[BVTooltip] Transition classes are not removed properly

[mattersj]

Describe the bug

I've noticed that animation classes appended by Vue within transition-group component are not properly removed if there is bootstrap tooltip used.

Steps to reproduce the bug

1. Add transition-group component with any animation.
2. Add some elements inside transition-group e.g. couple of li items with b-v-tooltip on every item.
3. Create some button or anything that can toggle visibility of li elements.
4. Click the button from third step and check out current li classes in DevTools when visibility has been changed.
5. Observe that *-enter-to class was not properly removed from li items.

Expected behavior

*-enter-to class should be removed after animation has been finished.

Versions

Libraries:

• BootstrapVue: 2.5.0
• Bootstrap: 4.5.0
• Vue: 2.6.11

Environment:

• Device: Mac
• OS: macOS Mojave 10.14.6
• Browser: Chrome
• Version: 83.0.4103.116

Demo link

https://codepen.io/mattersj/pen/GRoYyoG

1. Open the demo link
2. Open DevTools
3. Look at li items and click Toggle view button.
4. li classes still have *-enter-to class after animation has been finished.

If you click on Toggle tooltips button and then click on Toggle view again two times you'll see that transition classes were properly removed.

[jacobmllr95]

@mattersj I've looked into this and it's a bug in Vue.js <transition-group> implementation.

The is an open PR on GitHub since 2018 which seems to fix the issue:
vuejs/vue#7901

I've created a fork of your CodePen with a patched version of Vue.js with the changes of the PR applied an the *-enter-to classes get properly removed there:
https://codepen.io/jackmu95/pen/PoNOeMz

[mattersj]

@jackmu95 It seems your CodePen example a bit broken because BootstrapVue is not actually initialized so tooltips are just not working.
I created another CodePen and I think mentioned PR unfortunately does not fix the issue we are talking about.

[jacobmllr95]

@mattersj Good catch. I will investigate it further but I still thinks it's related to the Vue.js issues.

We have internally a workaround for toasts to work around a similar issue:
https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/toast/toaster.js#L46

[mattersj]

@jackmu95 Yeah, it looks really like Vue related issue. Anyway, thanks for looking into this:)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!