Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selectable b-table with tooltips behaves erratically after sorting #4360

Closed
fakenine opened this issue Nov 8, 2019 · 16 comments · Fixed by #4372
Closed

Selectable b-table with tooltips behaves erratically after sorting #4360

fakenine opened this issue Nov 8, 2019 · 16 comments · Fixed by #4372
Labels

Comments

@fakenine
Copy link

@fakenine fakenine commented Nov 8, 2019

Describe the bug

I'm using a selectable, small, and responsive b-table component, in which a column contains an array of data passed through a formatter, truncated automatically via the responsive prop and which is rendered fully in a tooltip.

When I'm selecting some items, then sorting, then trying to select again, the highlighted/selected row is not the one on which I just clicked.

Steps to reproduce the bug

  1. See GIF below

Expected behavior

The selected row should be the one on which I clicked

Versions

Libraries:

  • BootstrapVue: 2.0.2
  • Bootstrap: 4.3.1
  • Vue: 2.6.10

Environment:

  • Device: Lenovo Thinkpad E580
  • OS: Ubuntu 18.04 LTS
  • Browser: Firefox
  • Version: 70

GIF

Peek 08-11-2019 14-46

Additional context

N/A

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 8, 2019

Make sure you are providing the name of a field/column via the primary-key prop.

The field in your item data must be unique value across all rows of data. This value will be used to generate a Vue :key on each row rendered. When the rows move due to sorting, pagination, etc, Vue will re-use the previously rendered DOM elements rather than recreating them or re-using the wrong one.

See https://bootstrap-vue.js.org/docs/components/table#primary-key

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 8, 2019

Hello @tmorehouse,

Thank you for the quick answer!

I have indeed provided the primary-key prop. It is refering to the id field my JSON data (which refers to the unique integer id in the MySQL database). The id column is hidden in the table.

      <b-table
        ...
        primary-key="id"
      >

# ...
export default {
# ...
  data: function () {
    return {
      fields: [
        { key: 'id', class: 'd-none' },
       # ...
      ]
    }
 }
# ...
}
     
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 8, 2019

Could you provide a sample of the markup you are using for the slot?

You might also need to set a unique key on the container that you have the tooltip applied to

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 8, 2019

Sure:

<template>
   <b-table
     # ...
   />
     <template v-slot:cell(myfield)="data">
          <span
            v-b-tooltip.hover
            :title="data.item.myfield | parseMyField"
          >
            {{ data.item.myfield | parseMyField }}
          </span>
      </template>
   </b-table>
</template>

<script>
export default {
  filters: {
    parseMyField: function (value) {
      return value.join(', ')
    }
  },
  data: function () {
    return {
      fields: [
        { key: 'myfield', label: 'Field 4' }
      ]
    }
  }
}
</script>
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 8, 2019

Maybe try this:

     <template v-slot:cell(myfield)="data">
          <span
            :key="data.item.id"
            v-b-tooltip.hover
            :title="data.item.myfield | parseMyField"
          >
            {{ data.item.myfield | parseMyField }}
          </span>
      </template>
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 8, 2019

Also note, you don't need to define the id column in fields if you don't need to show it, and it can still be used as the primary-key

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 8, 2019

I still have the same issue, whether I click on any cell or use the spacebar :(

When using "Inspect element", I can see that each row has its own id (__BVID__19__row_6913 for instance), but when the bug happens, the row on which I click is not the one that I see changing to b-table-row-selected live in the in inspector. Instead its a row that has a totally different id.

@zbateson

This comment has been minimized.

Copy link

@zbateson zbateson commented Nov 9, 2019

I'm experiencing this exact same issue. I'm also using an "id" field which corresponds to a mysql unique integer id, fed from an 'id' property in a JSON response object.

I noticed though that it seems to work if I remove the primary-key prop.

@cjaoude

This comment has been minimized.

Copy link

@cjaoude cjaoude commented Nov 10, 2019

Same. Something about transitions appears broken. Using a selectable table/rows with transitions breaks select-ability. The select event doesn't appear to fire.

I created a "sanity" check table using the documentation table provided for transitions. Then I added to it the code from the selectable example, and something about it breaks. Edit out :tbody-transition-props and select-ability works again. Gist example below:

Sanity check example table using documentation code:
https://gist.github.com/cjaoude/e85291d5b1413d849a61c5a87b86f15d

        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.10"
        "bootstrap": "^4.3.1",
        "bootstrap-vue": "^2.0.4",
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 10, 2019

Tooltips (and popovers) have a default trigger delay of 50ms (for both show and hide).

Perhaps setting the hide delay on the tooltip to 0 may address the issue:

     <template v-slot:cell(myfield)="data">
          <span
            :key="data.item.id"
            v-b-tooltip.hover.dh0
            :title="data.item.myfield | parseMyField"
          >
            {{ data.item.myfield | parseMyField }}
          </span>
      </template>

https://bootstrap-vue.js.org/docs/directives/tooltip#directive-syntax-and-usage

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 12, 2019

@tmorehouse This does not work :( I tried to remove the column that has a tooltip and the bug is still happening...So I don't think the tooltips are the root cause.

I removed every custom slots so that I'm only left with:

        <template v-slot:head(selected)>
          <TableSelectBox
            :selected="selected.length > 0"
            @click="selectAllRows"
          />
        </template>

But the bug is still happening

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 12, 2019

@tmorehouse I can't manage to reproduce the bug if I remove the primary-key="id" prop, like @zbateson noticed

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 12, 2019

Actually this might be related to another issue we just found.... and PR #4372 may fix it.

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

BootstrapVue v2.1.0 has been released. It should fix this issue

@fakenine

This comment has been minimized.

Copy link
Author

@fakenine fakenine commented Nov 13, 2019

Hello @tmorehouse, thank you very much for your help and reactivity! I can confirm that v2.1.0 fixes this issue 👍

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

Excellent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.