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

SSR bug with v-show + inheritAttrs: false + v-bind="$attrs" #12503

Open
oom- opened this issue Dec 5, 2024 · 0 comments · May be fixed by #12516
Open

SSR bug with v-show + inheritAttrs: false + v-bind="$attrs" #12503

oom- opened this issue Dec 5, 2024 · 0 comments · May be fixed by #12516
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: ssr

Comments

@oom-
Copy link

oom- commented Dec 5, 2024

Vue version

latest (v3.5.13)

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNrVVk1v2zgQ/StcYQFngdDuJu1htW6A7iKH7kdb7AbtISoKWRrZbGlSICnZhuH/3iEpSrSjJE1vvdjSvJnhm+E8UvvkVV1P2waSNJnrQrHaEA2mqclVJti6lsqQvYLqQCol1yRL0DVLfu+x16JuzAdmVq+MUWzRGNDBczobAe1So/HvlKzHQp19NOpGyiWHkxBv7P0zUUihDSlWUHyBkrwkWMtZlXMNvyDsQQNb81ZAB04mx8jNRh4h85lvE/ZnbmBd89wAPhMyL1lLCp5r/TJLavo8S5wZgZguzxfA0eENbAgIo3ZZQlq6lqWzdjzRNgvBcdaKw5bYH1pI3ucPK/TtCmZCvsAOw/6GHdaXJYO9pXolNwj91K8Yg4FO15kYDPz/sf9pjGAnClhJXoJC3DEiMg4OJcV8h8kYIY2tHyX9KOeTwKdxNnFwvw0z3Ae/zd3TfBbtfnKeGI0zU7Hl9LOWAtW0t87IVa5rxkG9rQ3DmcqSlDjEYjnncvOXsxnVwHmwu/pG7J/11tqy5J0CDarF3vaYydUSjIev/3+DTYhA7E3D0fsB8D/QkjeWo3f7oxEl0o78HNvXToBMLG/09daA0KEoS9R6Hpy/Oyf+fKD0ge7l9LmLy8QBu3gi4tNTCVvtldnmvLGKLaFiAv61e39m1enfnQrObidu4ycfB+B6zYwFmrrEjUvdzLy3qbxTpO0H1e10yBDXtEARgyLL/EjxbuGr/d6PHjkc5jNvivE+nQJchrVAmOBIkt6TnhSN0lLRWjJrjPXP/OTuagjyWEiclUgWrmFoCWtqRaXgO1KDzRRrEwsdBBLcN/Q3sqIvyGJJNyukRhZSoWi6P7rA5PTy2TOXjlayaHQqG+OqEXgIxHaF00Mv7lj6FEri6EFJq4Zz5+VdO9GneYW1p0blQtvNodvB8cRnlNuJSyjHv+Js4UwbejuZfOxM+cLpIngYWdPbi3obYA4VukcGzNgveERjqfLdHWv3clSyN61wv/3Tpn9yRTMrJopiPK4nWnc4va6GY8seXMMI3neI3XNj3/k44LlY2rMWRY2Bj4iu0//ZHud7BYoZm1ynxF3D5GAdH5P1k4QZLkinmotvF6UXUUjlN2hUQy1dMFGi4efcVtLL59Gu9h8z39HQczKJbivf3x+paWnE/skd/NSCslcN9u1y+mL662Vy+ArqKJrw

Steps to reproduce

In the code:
Using v-show on an component with defineOptions({ inheritAttrs: false }); and v-bind="$attrs" is resulting in display:none; applied on the root div of the subcomponent (good behavior)+ the binded $attrs div if the initial v-show value is false (not good behavior).

<script setup>const display = ref(false);</script>
<div>
    <div v-show="!display">
        <div>Normal component OK</div>
    </div>
    <div v-show="display"> <!--- Here is display:none --->
        <div>
            <div v-bind="$attrs"></div> <!--- Here the display: none of v-show is set as well but should stay on the root level --->
        </div>
    </div>
</div>

In the playground:

  • Chech the box

image

What is expected?

The InputWithAttributes component should be displayed

What is actually happening?

The InputWithAttributes component is not displayed.
The display: none; is applied on root div + child div with v-bind:$attrs
image
image

System Info

Vue SFC Playground envinfo

Any additional comments?

I think the issue could be linked with:

  • On SSR, vue core estimate that the v-show add the display: none; style and figures out that the input has a v-bind="$attrs" attribute, so it clone the style attribute and add it to the input html element as well.
  • On Client side, the Vue app doesn't understand that the display: none; is related to the same v-show condition than the root div, and fail to toogle it on checked.

Please check: nuxt/nuxt#30156 (comment) for more details.

@edison1105 edison1105 added scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem labels Dec 6, 2024
@edison1105 edison1105 removed the has workaround A workaround has been found to avoid the problem label Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: ssr
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants