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
Comments
Make sure you are providing the name of a field/column via the The field in your item data must be unique value across all rows of data. This value will be used to generate a Vue See https://bootstrap-vue.js.org/docs/components/table#primary-key |
Hello @tmorehouse, Thank you for the quick answer! I have indeed provided the <b-table
...
primary-key="id"
>
# ...
export default {
# ...
data: function () {
return {
fields: [
{ key: 'id', class: 'd-none' },
# ...
]
}
}
# ...
}
|
Could you provide a sample of the markup you are using for the slot? You might also need to set a unique |
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> |
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> |
Also note, you don't need to define the |
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 ( |
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 |
Same. Something about transitions appears broken. Using a 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 Sanity check example table using documentation code:
|
Tooltips (and popovers) have a default trigger delay of Perhaps setting the hide delay on the tooltip to <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 |
@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 |
@tmorehouse I can't manage to reproduce the bug if I remove the |
Actually this might be related to another issue we just found.... and PR #4372 may fix it. |
BootstrapVue |
Hello @tmorehouse, thank you very much for your help and reactivity! I can confirm that |
Excellent |
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 aformatter
, 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
Expected behavior
The selected row should be the one on which I clicked
Versions
Libraries:
Environment:
GIF
Additional context
N/A
The text was updated successfully, but these errors were encountered: