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

[Bug Report] 从1.2.0-beta.5 升级到2.0.1以后 MessageBox 关闭的时候会重新弹出一次 需要点击两次关闭 #5838

Closed
nanmuye opened this issue Feb 8, 2022 · 30 comments

Comments

@nanmuye
Copy link

nanmuye commented Feb 8, 2022

Element Plus version

2.0.1

OS/Browsers version

chrome 94.0.4606.61

Vue version

3.0.0

Reproduction Link

https://codesandbox.io/s/element-plus-spa-ms973

Steps to reproduce

没有用代码复现,请不要点击Reproduction Link;
项目代码没有做任何更改,只是升级后出现 ;
点击关闭按钮 和 取消按钮以后,box会很快速度再弹一次;
1.2.0-beta.5没有这个问题,升级到2.0.1后出现;

What is Expected?

点击取消或关闭以后直接关闭

What is actually happening?

点击取消或关闭后 会很快速度再次出现messagebox 肉眼看就是没有关闭出现抖动闪烁 再次点击取消或关闭后 才会关闭

@emojiiii
Copy link
Contributor

emojiiii commented Feb 8, 2022

I didn't find the problem you said in the example on the official website. Can you provide a mini repo ?

@Dithub2016
Copy link

Dithub2016 commented Feb 8, 2022

I found the problem with v-for and el-dropdown-item[click=handle], this is reproduction link:
https://jsfiddle.net/verux85d/15/
image
@emojiiii

@nanmuye
Copy link
Author

nanmuye commented Feb 8, 2022

I found the problem with v-for and el-dropdown-item[click=handle], this is reproduction link: https://jsfiddle.net/verux85d/15/ image @emojiiii

我的问题也是发生在el-dropdown-item内的@click调用的方法

@emojiiii
Copy link
Contributor

emojiiii commented Feb 8, 2022

playground 内无法复现,很奇怪。。。

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

有没有具体点的场景

@nanmuye
Copy link
Author

nanmuye commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

@spx443812507
Copy link
Contributor

看了看历史应该是1.3.0-beta.2重构出来的问题,但是源码里的playground无法复现,求解呀

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

@nanmuye
Copy link
Author

nanmuye commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

@spx443812507
Copy link
Contributor

spx443812507 commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

我是在el-table里的el-table-column里写的,如果click传递了scope参数就会触发两次,不传就触发一次,挺奇怪的,目前看到的现象是,引用了循环里的变量会出现两次click

@Dithub2016
Copy link

Dithub2016 commented Feb 9, 2022

断点发现,这个可能是个思路
在 JSFiddle 上,点击 Action X,会先触发 log 函数,然后 emit 再触发 log
image

而在 Playground 上,点击 Action X,是先触发 emit,后触发 log 函数
image

可能是vue的问题?

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

在html 中 无v-for
image
有v-for 会执行两次
image

有v-for 的props中多了个onclick

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

@spx443812507
Copy link
Contributor

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

vite里也有,log里传入i

@nanmuye
Copy link
Author

nanmuye commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

webpack

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

vite里也有,log里传入i

我是在 element plus play dev里面试的
image
image
你的是什么情况下会引发

@spx443812507
Copy link
Contributor

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

vite里也有,log里传入i

我是在 element plus play dev里面试的 image image 你的是什么情况下会引发

奇怪也在这,源码的play里是没问题的,用vite新建一个项目,引用最新的elementplus,然后再把代码加进去

@iwusong
Copy link
Contributor

iwusong commented Feb 9, 2022

有没有具体点的场景

我的代码是v-for循环出来的用于显示blog的组件 有更多选项用于包括删除 用的是el-dropdown @click触发method 他会执行两次method中的Messagebox 起初我以为是Messagebox的bug 最后应该是el-dropdown的bug

你是在单文件里面写的吗,还是在html里面,我发现这两种表现好像不太一致

是在.vue里面写的 也是有这个bug

我发现在webpack下面有这个问题,vite下没有,你是用webpack的吗

vite里也有,log里传入i

我是在 element plus play dev里面试的 image image 你的是什么情况下会引发

奇怪也在这,源码的play里是没问题的,用vite新建一个项目,引用最新的elementplus,然后再把代码加进去

我试了下源码里的play,引用的依赖改成构建后的源码里的dist,也变成执行两次了,直接引用项目里的组件是正常的。似乎构建前后结果不一致

@huang-yf3160
Copy link

element-plus版本 2.0.1
不用v-for也会出现点击一次,触发两次的情况

@iwusong
Copy link
Contributor

iwusong commented Feb 14, 2022

这个问题没有进展吗

@emojiiii
Copy link
Contributor

这个问题没有进展吗

很抱歉,暂时还没有事件处理,最近比较忙, 你可以先临时使用防抖解决这个问题。

@Jrohy
Copy link

Jrohy commented Feb 15, 2022

2.0.2版本依然会出现此问题,触发2次

@Jrohy
Copy link

Jrohy commented Feb 16, 2022

@emojiiii @JeremyWuuuuu 实测从1.3.0-beta.4版本就出现此问题, beta2和3不清楚为啥弹窗好像都弹不出来,1.3.0-beta.1就没问题,有遇到类似问题的可以回退到1.3.0-beta.1

iwusong pushed a commit to iwusong/element-plus that referenced this issue Feb 18, 2022
the method of click event is executed twice in some cases (element-plus#5838)
iwusong added a commit to iwusong/element-plus that referenced this issue Feb 18, 2022
the method of click event is executed twice in some cases (element-plus#5838)
jw-foss pushed a commit that referenced this issue Feb 21, 2022
the method of click event is executed twice in some cases (#5838)
@jw-foss
Copy link
Member

jw-foss commented Feb 21, 2022

@iwusong I just merged your code, could you please run some tests locally see if we have still have this issue?

@iwusong
Copy link
Contributor

iwusong commented Feb 21, 2022

@iwusong I just merged your code, could you please run some tests locally see if we have still have this issue?

ok ,and i can upload the code after build

@iwusong
Copy link
Contributor

iwusong commented Feb 21, 2022

@JeremyWuuuuu the npm after build https://www.npmjs.com/package/@iwusong/element-plus and there is a cdn on https://elet-1256217456.cos-website.ap-nanjing.myqcloud.com/dist/index.full.js to do some tests
the problem on my locally is ok

@jw-foss
Copy link
Member

jw-foss commented Feb 21, 2022

@JeremyWuuuuu the npm after build https://www.npmjs.com/package/@iwusong/element-plus and there is a cdn on https://elet-1256217456.cos-website.ap-nanjing.myqcloud.com/dist/index.full.js to do some tests

the problem on my locally is ok

@iwusong thank you so much for confirming that! Really appreciated!

@zh1011
Copy link

zh1011 commented Feb 28, 2022

2.0.3版本该问题还是没有修复

@Jrohy
Copy link

Jrohy commented Feb 28, 2022

2.0.3我自己试了可以,不会触发2次

@iwusong
Copy link
Contributor

iwusong commented Apr 27, 2022

@JeremyWuuuuu the issue can be closed

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

10 participants