-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
[v1] QSlideTransition inside v-show calculates incorrect 0px height if outer element is hidden #4630
Labels
Comments
pdanpdan
added a commit
to pdanpdan/quasar
that referenced
this issue
Jul 12, 2019
…ted element is hidden ref quasarframework#4630
pdanpdan
added a commit
to pdanpdan/quasar
that referenced
this issue
Jul 12, 2019
…ted element is hidden ref quasarframework#4630
pdanpdan
added a commit
to pdanpdan/quasar
that referenced
this issue
Jul 12, 2019
…ted element is hidden ref quasarframework#4630
pdanpdan
added a commit
to pdanpdan/quasar
that referenced
this issue
Jul 12, 2019
…ted element is hidden ref quasarframework#4630
pdanpdan
added a commit
to pdanpdan/quasar
that referenced
this issue
Jul 12, 2019
…ted element is hidden ref quasarframework#4630
Fix willl be available in 1.0.5. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Given a
q-slide-transition
inside av-show
like below:And both
outerCondition
andinnerCondition
evaluate tofalse
, ifinnerCondition
is first set totrue
and thenouterCondition
is set totrue
, theinnerCondition
div has a 0px height and is not shown after theouterCondition
transition.In this case I've got an outer
QSlideTransition
as well but that's not required for the issue to happen. I assume this would happen if the ancestor was hidden for any reason,v-show
or otherwise.Codesandbox
https://codesandbox.io/s/quasar-portal-input-49lug?fontsize=14
To Reproduce
Steps to reproduce the behavior:
beforeRouteEnter
guard to simulate an API load)If you uncheck "Show level 2" and re-check it, then Level 2 is visible.
Note that if
innerCondition
is initialized indata(
) astrue
instead of being set fromfalse
totrue
, then Level 2 is visible as expected once Level 1 is visible because the transition did not fire on initial render. IfinnerCondition
is initialized astrue
indata()
andappear
is used on the innerQSlideTransition
, then Level 2 is once again not visible once Level 1 is.Expected behavior
Level 2 to be visible once Level 1 is visible.
Not sure how it could be fixed because I'm assuming it's impossible for the inner
QSlideTransition
to calculate a height when it's inside the collapsed outer element. If there was a way to conditionally disable aQSlideTransition
animation (so it just lets the childv-if
/v-show
do its thing) then that could help because I could disable the inner transition based on the outer condition. Since it's hidden anyway, the animation is not necessary:Or if a new prop is not desired (it's a bit of an edge case, I'll agree), perhaps if the duration is 0, the height calculation could be skipped since the animation is effectively useless at that duration anyway? Then it could be used like:
Then that would just be like a performance tweak that could also happen to be used as a workaround.
Screenshots
Platform (please complete the following information):
OS: Windows_NT(10.0.17763) - win32/x64
Node: 10.15.3
NPM: 6.9.0
Yarn: 1.16.0
Browsers: Mozilla Firefox 67.0.4 (64-bit)
Additional context
The example Codesandbox is contrived to illustrate the issue. In the real world I'm using a modified
QStepper
that keeps all theQStep
s in the DOM usingv-show
, so that my VeeValidateValidationObserver
can keep track of validation for all steps at the same time (and also allows theQStep
to not be a direct child ofQStepper
so I can wrap the steps inValidationObserver
s).In some steps, there are
QSlideTransition
s based on other conditions and those components are not being shown once their step is visible, which is how I came across this issue originally.I can't just use the default
QStepper
/Qstep
because theValidationObserver
cannot observe inactive components.The text was updated successfully, but these errors were encountered: