Selectable b-table with tooltips behaves erratically after sorting

[fakenine]

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

Additional context

N/A

[tmorehouse]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

@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]

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

[tmorehouse]

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

[tmorehouse]

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

[fakenine]

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

[tmorehouse]

Excellent