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

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

Closed
mlkt opened this issue Feb 8, 2024 · 20 comments · Fixed by #10311
Closed

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

mlkt opened this issue Feb 8, 2024 · 20 comments · Fixed by #10311
Labels
🔥 p5-urgent Priority 5: this fixes build-breaking bugs that affect most users and should be released ASAP. 🐞 bug Something isn't working regression

Comments

@mlkt
Copy link

mlkt commented Feb 8, 2024

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

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)

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-containerel-menuel-scrollbarel-overlay 等,看了下代码,发现这些组件都是用渲染函数实现的,使用 template 的组件好像都正常显示。

What is expected?

Displayed normally.

What is actually happening?

Not displayed.

System Info

No response

Any additional comments?

No response

@coader
Copy link

coader commented Feb 8, 2024

yes, v-if v-show has problem

@tbl0605
Copy link

tbl0605 commented Feb 8, 2024

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.

@edison1105 edison1105 added 🐞 bug Something isn't working ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. regression labels Feb 8, 2024
somnisomni added a commit to somnisomni/MyBoothManager that referenced this issue Feb 8, 2024
Related issues
vuetifyjs/vuetify#19194
vuetifyjs/vuetify#19191
vuejs/core#10294

Keep Vue version v3.4.15 until these issues be resolved
@sxzz sxzz added 🔥 p5-urgent Priority 5: this fixes build-breaking bugs that affect most users and should be released ASAP. and removed ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Feb 8, 2024
@leorantakupari
Copy link

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
Copy link

sfxcode commented Feb 8, 2024

Also a problem with primevue:

primefaces/primevue#5242

@pumba-dev
Copy link

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.

image_2024-02-08_183737492

@andersonllc
Copy link

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

@donalmurtagh
Copy link

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
Copy link

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
Copy link

alanibrus commented Feb 8, 2024

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
Copy link
Member

The problematic commit has been reverted in 3.4.17.

@mlkt mlkt changed the title v3.4.16 will cause all components created with render function in Element-Plus to not display. The bug in the v-show directive of v3.4.16 causes the components to not display. Feb 9, 2024
@Predrag
Copy link

Predrag commented Feb 9, 2024

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
Copy link

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

image

@ADumaine
Copy link

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.

@xvaara
Copy link

xvaara commented Feb 13, 2024

I think 3.4.19 fixed this

@MeesterDev
Copy link

MeesterDev commented Feb 13, 2024

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

@github-actions github-actions bot locked and limited conversation to collaborators Feb 29, 2024
lynxlangya pushed a commit to lynxlangya/core that referenced this issue May 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔥 p5-urgent Priority 5: this fixes build-breaking bugs that affect most users and should be released ASAP. 🐞 bug Something isn't working regression
Projects
None yet