BModal and v-if -> no show event (and no transition too)

[makroxyz]

Describe the bug

Using a BModal with v-if will not emit show event... since transition is not working!

Transition is not working with v-if. In some cases Modal should be "under a v-if" and this breaks animation and show event is not emitted

How we could fix that?

Reproduction

https://stackblitz.com/edit/github-nfznav?file=src%2FApp.vue

Used Package Manager

npm

Validations

• Have tested with the latest version. This is still alpha version and sometime things change rapidly.
• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-nfznav (Open reproduction)

[VividLemon]

I wonder if the core code of the modal could be rewritten to instead use https://headlessui.com/vue/dialog

Multiple components could be rewritten to use them, such as BTabs as well... It would certainly simplify things. @xvaara

[makroxyz]

@VividLemon issue #1655 is still present... double show and hide events...

[xvaara]

I wonder if the core code of the modal could be rewritten to instead use https://headlessui.com/vue/dialog

Multiple components could be rewritten to use them, such as BTabs as well... It would certainly simplify things. @xvaara

@VividLemon
There are some differences how headlessui and bootstrap require the classes or tags that didn't work. I checked it out long ago, but don't remember what they were. And I couldn't get some animation to work correctly.

Also https://www.radix-vue.com/ might be a better option, with more features.

Both of those take the low road in tabs for example and it's quite clunky to implement. ie you have component for tabs and tabcontent and some value to match them together. We just have tab component that does both.

[VividLemon]

Its likely a better idea all around to suggest a fix to Bootstrap itself for a potential v6. What exactly this would look like, i am unsure. Tbh the core issue with the animations of Bootstrap eludes me. All I know is that Ive had issues with the animations and js. If we can identify the problem, we should mention it upstream to Bootstrap. But this isnt directly related to this issue

[xvaara]

@VividLemon I've been reworking the modal and fixing the events and this... But now I'm wondering is this working as expected? if the modelValue is true, it is show without animation. Should that be an option if I change this to animate? In collapse we don't animate if the modelValue is true, only animated if it toggle=true on start.

This might need some guidelines so that the components are aligned.

[VividLemon]

@VividLemon I've been reworking the modal and fixing the events and this... But now I'm wondering is this working as expected? if the modelValue is true, it is show without animation. Should that be an option if I change this to animate? In collapse we don't animate if the modelValue is true, only animated if it toggle=true on start.

This might need some guidelines so that the components are aligned.

If I'm understanding the issue correctly: when the page is mounted, if a modal (for example) has modelValue=true, it plays the animation (or not, for example). And the issue is, do we display the animation or not?

If this is the issue, my recommendation is to not display the animation. For two reasons. The first issue is content layout shift. It would cause the page to unnecessarily move based off of non user related events. The second issue depends on whats simpler code-wise. The real world usage of modal is likely that its activated through real user interaction, seldom would i think a modal would be opened immediately when the page is mounted... So, in such a case, it would be whatever's simplest. However, the first issue takes precedence over simplicity.

[xvaara]

I'm implementing the same as in BCollapse for now. There is no animation on modelValue=true, unless toggle prop is true.

[VividLemon]

I suppose that would also work

[makroxyz]

@xvaara good job! It should fix also double events. I wait new BVN release to try it.

[github-actions]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed