The bug in the v-show directive of v3.4.16 causes the components to not display.

[mlkt]

Vue version

3.4.16

Link to minimal reproduction

Element Plus Playground

Steps to reproduce

You can test it at the link above. Choose Element Plus version 2.5.5 and Vue version 3.4.16. After selecting, you will notice that clicking the el-select dropdown does not display anything. Checking the console, it's observed that the popup layer is set to display: none , causing it not to show. Switching Vue version to 3.4.15 restores normal functionality.

After investigation, it's found that the following two changes under v3.4.16 caused this issue. I tested locally and directly reverted these two changes in the code under node_modules runtime-dom/dist , which restored normal functionality.

Besides el-select, there are many other components that are not displayed properly, such as el-container, el-menu, el-scrollbar, el-overlay, etc. After examining the code, it's noticed that these components are all implemented using rendering functions. Components using template seem to display correctly.

v3.4.15...v3.4.16
9b19f09

core/packages/runtime-dom/src/directives/vShow.ts

Line 25 in 1339330

if (!value === !oldValue && el.style.display === el[vShowOldKey]) return

  updated(el, { value, oldValue }, { transition }) {
-   if (!value === !oldValue) return
+   if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
    if (transition) {
      if (value) {
        transition.beforeEnter(el)

core/packages/runtime-dom/src/modules/style.ts

Line 41 in 1339330

el[vShowOldKey] = style.display

  // indicates that the `display` of the element is controlled by `v-show`,
  // so we always keep the current `display` value regardless of the `style`
  // value, thus handing over control to `v-show`.
  if (vShowOldKey in el) {
+   el[vShowOldKey] = style.display
    style.display = currentDisplay
  }

v3.4.16 版本会导致 element-plus 所有用渲染函数创建的组件都无法显示

可以在上面的链接测试，Element Plus版本选择2.5.5，Vue版本选择3.4.16，选择后可以发现点击 el-select 下拉框无法显示，看控制台发现是弹出层被设为了 display: none 导致无法显示，将Vue版本切换为 3.4.15 后恢复正常。

排查后发现是 v3.4.16 这两个改动导致的，我本地测试直接改了 node_modules下的 runtime-dom/dist 的代码还原这两个改动后就恢复正常。

除了 el-select， 无法显示的组件还有很多，比如 el-container 、el-menu 、el-scrollbar 、 el-overlay 等，看了下代码，发现这些组件都是用渲染函数实现的，使用 template 的组件好像都正常显示。

What is expected?

Displayed normally.

What is actually happening?

Not displayed.

System Info

No response

Any additional comments?

No response

[KaelWD]

Similar problem in vuetify, the transition leave hook is being called on the initial render: https://play.vuetifyjs.com/#eNq9VU1vGjEQ/SsjXwCJhVS0PawIUtQeeumlVU7AwbUHYtW7tmwvTYX47xkv2WU/AKFEysn2+M28N/O03uWeeSemD9ZOdgWylM0DZlbzgItVDjDfJYI7CUJz7+9XLHtOeBHMisE/JcMTRWZ3dytWYku0Vj7ALsmMRJ0aizlKAsVNjapxiSIusA7pViZKmDwySJU8mQyJIqigkUI/yuNiPm2kUa1uta0zhYUd10VMevTofIOTcFVnpM9rE1IugtrxYBzB96TDWA+HVkpbajMOVOSPymNzZeKKtW/PdMWFMEUeEqGc0NRQO6Fq9lV387LXeS1u2jCrET47kAeZqaYJbx5Jx7/uHOpOKsJL6i/qvz71TSluuCxpxhAHvKZlBCoHHil7XqR/8T+lqF68UlquvduOhXHpYarhnqlwxbWmP7c4R6aY2NYHeldTfqB7whXydvOujP791t5u3pVwFTy+pHSITykdOoObe+GUPaLw2RoXQOKGFzrA/lhI8sBTGI7gfgHD1xhAfFRTWA7KF2OwHlfx40dANyfVy8FPnvMtZpiHwRgGzecoIyJlNSamCFrl2KgUE39jCCrf+ipNmO0Z5GlXmtgh/+aQmq0qWF34C2S/kMsKtlEXNT1amkhdrzie2pDvqPEEoZ9RPPX1Hkbl5hBNqW1ghzGbTT5PPn1lcfNlMmPrF6+2HfE=

[coader]

yes, v-if v-show has problem

[tbl0605]

Hi,
I have same problem when using components from the bootstrap-vue-next project. Reverting to vue v3.4.15 makes the components show again.

[leorantakupari]

It seems like a vast majority of the "v-(anything)" properties are acting up. I was having v-model and v-for issues as well.

[sfxcode]

Also a problem with primevue:

primefaces/primevue#5242

[pumba-dev]

I have same problem with Vue 3 and Ant Design without update any dependency, I just rebuild my project cleaning package-lock.json and node_modules and this bug appears.

All components with the effect of showing something on the screen had the error of not changing their style after the click or hover event. It also be noted that the use of "display: none" is common in all components that present an error.

[andersonllc]

Same problem here after my project is rebuilded... I tried to downgrade Vue but without success, I'm desperate, any suggestions?

[donalmurtagh]

Same problem here after my project is rebuilded... I tried to downgrade Vue but without success, I'm desperate, any suggestions?

This problem definitely only occurs with Vue 3.4.16, so check that you're using an earlier Vue version

[hslee2008]

Same problem here after my project is rebuilded... I tried to downgrade Vue but without success, I'm desperate, any suggestions?

make sure you have the exact package.json like below:

"vue": "3.4.15",

not

"vue": "^3.4.15",

[alanibrus]

Same issue, noticed it with very easy usecase:
Vuetify button component with v-show used like:

<v-btn ... v-show="!isMobile && activeItem !== 'data'" />

And once activeItem changes (but not to 'data'), the button simply disappears. All fine in 3.4.15 so downgraded too.

[yyx990803]

The problematic commit has been reverted in 3.4.17.

[volarname]

looks like the issue is reintroduced in 3.4.18 for vuetify:
https://play.vuetifyjs.com/#eNq9VU1vGjEQ/SsjXwCJhVS0UrUiSFF76KWXVjkBB9ceiFXv2rK9NBXiv2e8ZJf9AIQSKSfb4zfz3szTepd75p2YPlg72RXIUjYPmFnNAy5WOcB8lwjuJAjNvb9fsew54UUwKwb/lAxPFJnd3a1YiS3RWvkAuyQzEnVqLOYoCRQ3NarGJYq4wDqkW5koYfLIIFXyZDIkiqCCRgr9KI+L+bSRRrW61bbOFBZ2XBcx6dGj8w1OwlWdkT6vTUi5CGrHg3EE35MOYz0cWiltqc04UJE/Ko/NlYkr1r490xUXwhR5SIRyQlND7YSq2Vfdzcte57W4acOsRvjsQB5kppomvHkkHf+6c6g7qQgvqb+o//rUN6W44bKkGUMc8JqWEagceKTseZH+xf+UonrxSmm59m47Fsalh6mGe6bCFdea/tziHJliYlsf6F1N+YHuCVfI2827Mvr3W3u7eVfCVfD4ktIhPqV06Axu7oVT9ojCZ2tcAIkbXugA+2MhyQNPYTiC+wUMX2MA8VFNYTkoX4zBelzFjx8B3ZxULwc/ec63mGEeBmMYNJ+jjIiU1ZiYImiVY6NSTPyNIah866s0YbZnkKddaWKH/JtDaraqYHXhL5D9Qi4r2EZd1PRoaSJ1veJ4akO+o8YThH5G8dTXexiVm0M0pbaBHcZsNvk8+fSVxc2XyYytXwCvzB3z

[johnleider]

looks like the issue is reintroduced in 3.4.18 for vuetify: play.vuetifyjs.com/#eNq9VU1vGjEQ/SsjXwCJhVS0UrUiSFF76KWXVjkBB9ceiFXv2rK9NBXiv2e8ZJf9AIQSKSfb4zfz3szTepd75p2YPlg72RXIUjYPmFnNAy5WOcB8lwjuJAjNvb9fsew54UUwKwb/lAxPFJnd3a1YiS3RWvkAuyQzEnVqLOYoCRQ3NarGJYq4wDqkW5koYfLIIFXyZDIkiqCCRgr9KI+L+bSRRrW61bbOFBZ2XBcx6dGj8w1OwlWdkT6vTUi5CGrHg3EE35MOYz0cWiltqc04UJE/Ko/NlYkr1r490xUXwhR5SIRyQlND7YSq2Vfdzcte57W4acOsRvjsQB5kppomvHkkHf+6c6g7qQgvqb+o//rUN6W44bKkGUMc8JqWEagceKTseZH+xf+UonrxSmm59m47Fsalh6mGe6bCFdea/tziHJliYlsf6F1N+YHuCVfI2827Mvr3W3u7eVfCVfD4ktIhPqV06Axu7oVT9ojCZ2tcAIkbXugA+2MhyQNPYTiC+wUMX2MA8VFNYTkoX4zBelzFjx8B3ZxULwc/ec63mGEeBmMYNJ+jjIiU1ZiYImiVY6NSTPyNIah866s0YbZnkKddaWKH/JtDaraqYHXhL5D9Qi4r2EZd1PRoaSJ1veJ4akO+o8YThH5G8dTXexiVm0M0pbaBHcZsNvk8+fSVxc2XyYytXwCvzB3z

Looking into it.

[Predrag]

Problem is also with v-list-group. Try to click on Admin or Actions group it shows nothing. Example is from official vuetify.com. v-list-group stopped working with VUE > 3.4.15
v-list-group

[johnleider]

This is happening because this is running even when the previous state was disabled. Still looking into it.

[zh-lx]

looks like the issue is reintroduced in 3.4.18 for vuetify: https://play.vuetifyjs.com/#eNq9VU1vGjEQ/SsjXwCJhVS0UrUiSFF76KWXVjkBB9ceiFXv2rK9NBXiv2e8ZJf9AIQSKSfb4zfz3szTepd75p2YPlg72RXIUjYPmFnNAy5WOcB8lwjuJAjNvb9fsew54UUwKwb/lAxPFJnd3a1YiS3RWvkAuyQzEnVqLOYoCRQ3NarGJYq4wDqkW5koYfLIIFXyZDIkiqCCRgr9KI+L+bSRRrW61bbOFBZ2XBcx6dGj8w1OwlWdkT6vTUi5CGrHg3EE35MOYz0cWiltqc04UJE/Ko/NlYkr1r490xUXwhR5SIRyQlND7YSq2Vfdzcte57W4acOsRvjsQB5kppomvHkkHf+6c6g7qQgvqb+o//rUN6W44bKkGUMc8JqWEagceKTseZH+xf+UonrxSmm59m47Fsalh6mGe6bCFdea/tziHJliYlsf6F1N+YHuCVfI2827Mvr3W3u7eVfCVfD4ktIhPqV06Axu7oVT9ojCZ2tcAIkbXugA+2MhyQNPYTiC+wUMX2MA8VFNYTkoX4zBelzFjx8B3ZxULwc/ec63mGEeBmMYNJ+jjIiU1ZiYImiVY6NSTPyNIah866s0YbZnkKddaWKH/JtDaraqYHXhL5D9Qi4r2EZd1PRoaSJ1veJ4akO+o8YThH5G8dTXexiVm0M0pbaBHcZsNvk8+fSVxc2XyYytXwCvzB3z

Add a new PR to fix it in #10311

[ADumaine]

Also having an issue with modals. Confirm not working again in 3.4.18.
3.4.15 ok
3.4.16 broken
3.4.17 ok
3.4.18 broken

The builds with the issue cause a modal dialog to appear when loading the page ( a table with multiple modals not shown per row).
The modal (has transitions) is unresponsive and cannot be canceled.

[arapangabriel]

Similar problem in vuetify, the transition leave hook is being called on the initial render: https://play.vuetifyjs.com/#eNq9VU1vGjEQ/SsjXwCJhVS0PawIUtQeeumlVU7AwbUHYtW7tmwvTYX47xkv2WU/AKFEysn2+M28N/O03uWeeSemD9ZOdgWylM0DZlbzgItVDjDfJYI7CUJz7+9XLHtOeBHMisE/JcMTRWZ3dytWYku0Vj7ALsmMRJ0aizlKAsVNjapxiSIusA7pViZKmDwySJU8mQyJIqigkUI/yuNiPm2kUa1uta0zhYUd10VMevTofIOTcFVnpM9rE1IugtrxYBzB96TDWA+HVkpbajMOVOSPymNzZeKKtW/PdMWFMEUeEqGc0NRQO6Fq9lV387LXeS1u2jCrET47kAeZqaYJbx5Jx7/uHOpOKsJL6i/qvz71TSluuCxpxhAHvKZlBCoHHil7XqR/8T+lqF68UlquvduOhXHpYarhnqlwxbWmP7c4R6aY2NYHeldTfqB7whXydvOujP791t5u3pVwFTy+pHSITykdOoObe+GUPaLw2RoXQOKGFzrA/lhI8sBTGI7gfgHD1xhAfFRTWA7KF2OwHlfx40dANyfVy8FPnvMtZpiHwRgGzecoIyJlNSamCFrl2KgUE39jCCrf+ipNmO0Z5GlXmtgh/+aQmq0qWF34C2S/kMsKtlEXNT1amkhdrzie2pDvqPEEoZ9RPPX1Hkbl5hBNqW1ghzGbTT5PPn1lcfNlMmPrF6+2HfE=

same problem on vurtify 3

[xvaara]

I think 3.4.19 fixed this

[MeesterDev]

Maybe this exact issue was fixed, but in our applications several of our modals now pop-up when the app starts up, rather than being hidden. I'll see if I can create a minimal reproduction and create a new issue.

We'll probably just downgrade to 3.4.15 for now.

Created #10338