Skip to content
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

Closed
GordonBlahut opened this issue Jul 11, 2019 · 1 comment

Comments

@GordonBlahut
Copy link

Describe the bug
Given a q-slide-transition inside a v-show like below:

<q-slide-transition>
    <div v-show="outerCondition"> // outer must be v-show
        // ...
        <q-slide-transition>
            <div v-if="innerCondition"> // inner can be v-if or v-show
                // ...
            </div>
        </q-slide-transition>
    </div>
</q-slide-transition>

And both outerCondition and innerCondition evaluate to false, if innerCondition is first set to true and then outerCondition is set to true, the innerCondition div has a 0px height and is not shown after the outerCondition 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:

  1. Open the code sandbox above
  2. Open the left menu and click on "Transition test" (note: Level 2 is set to true inside a beforeRouteEnter guard to simulate an API load)
  3. Check "Show level 1"
  4. Notice that "Show level 2" is checked off, but Level 2 is not visible.

If you uncheck "Show level 2" and re-check it, then Level 2 is visible.

Note that if innerCondition is initialized in data() as true instead of being set from false to true, then Level 2 is visible as expected once Level 1 is visible because the transition did not fire on initial render. If innerCondition is initialized as true in data() and appear is used on the inner QSlideTransition, 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 a QSlideTransition animation (so it just lets the child v-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:

<q-slide-transition>
    <div v-show="outerCondition">
        // ...
        <q-slide-transition animate="outerCondition">
            <div v-if="innerCondition">
                // ...
            </div>
        </q-slide-transition>
    </div>
</q-slide-transition>

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:

<q-slide-transition>
    <div v-show="outerCondition">
        // ...
        <q-slide-transition :duration="outerCondition ? 300 : 0"
            <div v-if="innerCondition">
                // ...
            </div>
        </q-slide-transition>
    </div>
</q-slide-transition>

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 the QSteps in the DOM using v-show, so that my VeeValidate ValidationObserver can keep track of validation for all steps at the same time (and also allows the QStep to not be a direct child of QStepper so I can wrap the steps in ValidationObservers).

In some steps, there are QSlideTransitions 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 the ValidationObserver cannot observe inactive components.

pdanpdan added a commit to pdanpdan/quasar that referenced this issue Jul 12, 2019
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Jul 12, 2019
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Jul 12, 2019
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Jul 12, 2019
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Jul 12, 2019
rstoenescu pushed a commit that referenced this issue Jul 12, 2019
@rstoenescu
Copy link
Member

Fix willl be available in 1.0.5.
Thanks for reporting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants