-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
"show" class is added to modals too late #4761
"show" class is added to modals too late #4761
Comments
Apologies for the partial submit initially, form glitch! |
Added demo for problem and solution as a codepen. |
The show is added "twice", once as the |
That isn't true for the modal which has it's own transition which adds no classes at all.
See here bootstrap-vue/src/components/modal/modal.js Line 1024 in 6adcd0f
You can see what I mean in the reproduction link also https://codepen.io/sonicisthebest/pen/LYVGpvJ |
Ah, yes... A fix is on it's way. |
Thanks chaps! Very quick turn around :) |
@tmorehouse I've just been testing this in the full nuxt app rather than the codepen, and while calling |
I just had a look at the modal docs example too here https://bootstrap-vue.org/docs/components/modal and I found that some of them do the show transition, and others don't when you click the example buttons. I found these ones didn't generally show the transition, but even they sometimes do and sometimes don't: https://bootstrap-vue.org/docs/components/modal#using-thisbvmodalshow-and-thisbvmodalhide-instance-methods |
@tmorehouse Maybe we need to add a second |
Yes that's what I've done locally, and it seems to be the only way to guarantee the right behaviour. I assume this is part of the reason why the built in Vue transition API does that. I think because |
Also in previous testing I tried a few combinations of |
@philipmountifield Thanks for the research! Do you want't to come up with a PR to add the second |
Sure I'll take a look. |
Describe the bug
When a modal is shown, it uses a transition, however at the moment
isShow
is set inonAfterEnter
which doesn't happen until the end of the transition. This means you get sequential transitions or a perceived delay, also the buttons which should show disabled during the transition are always enabled.Steps to reproduce the bug
fade
to make it easier to seeshow
class is added and you see the modal show transitionExpected behavior
The
show
class needs to be added at the same point as aenter-to
class would be added, i.e. the very next frame after enter.Versions
Libraries:
Fix
To solve the issue I changed the following here:
bootstrap-vue/src/components/modal/modal.js
Line 616 in 7a34f73
And also remove
this.isShow = true;
fromonAfterEnter
Ideally I'd like to use
nextFrame(() => {this.isShow = true;})
from the built in transition lib in Vue but I couldn't see a way to import that definition. https://github.com/vuejs/vue/blob/4de4649d9637262a9b007720b59f80ac72a5620c/src/platforms/web/runtime/transition-util.js#L67Demo link for problem and solution
https://codepen.io/sonicisthebest/pen/LYVGpvJ
The text was updated successfully, but these errors were encountered: