Element: [Bug Report] [navMenu] click el-submenu trigger childMenu layer pop again

[yangguansen]

Element UI version

2.4.6

OS/Browsers version

windows10/chrome 68.0.3440.106

Vue version

2.5.2

Reproduction Link

https://jsfiddle.net/api/post/library/pure/

Steps to reproduce

English:
at the demo link, choose the anyone of submenu, the submenu layer pop again, accidental,need exprience more times

中文：
在demo链接的这个例子中，在菜单是collapse状态时，选中没有子菜单的一级菜单，然后再选中el-submenu中的某一项，子菜单弹层会消失再弹出，这个现象是偶发，需要来回点击多次才能发现。

What is Expected?

English:menu in collapse,when i choose submenu, the submenu layer disappear, and don't pop again.

中文：选中子菜单后，子菜单弹出层消失，不再自动弹出，需要再次人为点击时才能再次弹出。

What is actually happening?

English:menu in collapse, when i click menu, submenu pop at right of menu, choose el-meny-item, and then i choose submenu,the submenu disappear, and pop again!

中文：点击el-submenu中的某一项，子菜单会消失，再弹出，实际上，他不应该再次弹出。

[element-bot]

Translation of this issue:

Element UI version
2.4.6

OS/Browsers version
Windows10/chrome 68.0.3440.106

Vue version
2.5.2

Reproduction Link
https://jsfiddle.net/api/post/library/pure/

Steps to reproduce
English:

At the demo link, choose the anyone of submenu, the submenu layer pop again, accidental, need exprience more times
Chinese:

In this example of demo links, when the menu is collapsed, select the first level menu without a submenu, and then select one of the items in el-submenu. The submenu layer disappears and pops up again. This phenomenon is accidental and requires multiple clicks back and forth.
What is Expected?

English:menu in collapse, when I choose submenu, the submenu layer disappear, and layer
English: After selecting the neutron menu, the pop-up layer of the submenu disappears and no longer pops up automatically. It can only pop up again if it needs to be clicked again.

What is actually happening?
English: menu in collapse, when I click menu, submenu pop at right of menu, select el-meny-item, and then I select submenu, the submenu disappear, and pop again!

English: Click on an item in el-submenu and the submenu will disappear and pop up. In fact, he shouldn't pop up again.

[element-bot]

Hi, your JSFiddle page is blank because it seems you forgot to click the Save button. Please save your fiddle and then edit this issue with the new link.

[guidetheorient]

同遇到这个问题，不知道怎么写最小repro，点击跳转到另一个页面，点击元素的下一个submenu又跳出来了，（:popper-append-to-body="true"）

[AdrianDuan]

Same problem here.
On the demo page(http://element-cn.eleme.io/#/zh-CN/component/menu), if click the submeun button “我的工作台-选项1”, it trigger submenu layer pop again.

[ziyoung]

@AdrianDuan 无法重现。能否提供了例子？

[AdrianDuan]

@ziyoung 效果如上图，桌面端不是每次测试都可以重现，点击上面白色导航栏的时候没有出现，当点击下面黑色导航栏的“我的工作台-选项1”时，子菜单窗口收回后又立刻弹出。当切换到Chrome的响应式开发时，可以100%重现此问题。
我的环境如下：
操作系统 macOS 10.13.6 Darwin Kernel Version 17.7.0
浏览器 Chrome 版本 68.0.3440.106 64位
Vue版本 v2.5.17

[yangguansen]

这个问题我跟@AdrianDuan 情况类似，不知道可有什么解决办法？

[dreambo8563]

I got the same problem on my demo.
mobile mode with your chrome and open the online addr.
online addr: https://dreambo8563.github.io/bpit-vue/#/components/flockbutton
source code: https://github.com/dreambo8563/bpit-vue @ziyoung

[sstraus]

Same to me, its related to Touch events.

[spengjie]

I encountered the same issue as well.

[ziyoung]

能找到稳定重现的方法吗？我这里无法重现。

[dreambo8563]

能找到稳定重现的方法吗？我这里无法重现。

能试下我这个repo么 https://github.com/dreambo8563/bpit-vue.github.io
移动端这个路由下/components/flockbutton
100%复现啊

[bijiao1018]

同遇到这个问题，需反复点击才能复现

[dreambo8563]

@ziyoung I do some test.
add props on submenu can workaround the issue

          <el-submenu :show-timeout="100" :hideTimeout="300" index="1">

I suspect the issue is around the setTimeout

when mouseEnter and mouseLeave

https://github.com/ElemeFE/element/blob/15b57cbb2234eb93a648e9bac900cbf87a388e20/packages/menu/src/submenu.vue#L192

https://github.com/ElemeFE/element/blob/15b57cbb2234eb93a648e9bac900cbf87a388e20/packages/menu/src/submenu.vue#L206

@bijiao1018 @spengjie @sstraus @yangguansen @guidetheorient
this issue is not easy to repo on dev branch code. could you please test on your side with my solution.
If this works, I suggest make a quick fix just by changing the default value of the showTimeout

[bijiao1018]

@ziyoung I do some test.
add props on submenu can workaround the issue

          <el-submenu :show-timeout="100" :hideTimeout="300" index="1">

I suspect the issue is around the setTimeout

when mouseEnter and mouseLeave

element/packages/menu/src/submenu.vue

Line 192 in 15b57cb

     this.timeout = setTimeout(() => {

element/packages/menu/src/submenu.vue

Line 206 in 15b57cb

     this.timeout = setTimeout(() => {

@bijiao1018 @spengjie @sstraus @yangguansen @guidetheorient
this issue is not easy to repo on dev branch code. could you please test on your side with my solution.
If this works, I suggest make a quick fix just by changing the default value of the showTimeout

It works. @dreambo8563 :-D

[spengjie]

@ziyoung I do some test.
add props on submenu can workaround the issue

          <el-submenu :show-timeout="100" :hideTimeout="300" index="1">

I suspect the issue is around the setTimeout

when mouseEnter and mouseLeave

element/packages/menu/src/submenu.vue

Line 192 in 15b57cb

     this.timeout = setTimeout(() => {

element/packages/menu/src/submenu.vue

Line 206 in 15b57cb

     this.timeout = setTimeout(() => {

@bijiao1018 @spengjie @sstraus @yangguansen @guidetheorient
this issue is not easy to repo on dev branch code. could you please test on your side with my solution.
If this works, I suggest make a quick fix just by changing the default value of the showTimeout

Thanks for providing the solution. Your solution works for me.

[trylovetom]

Any Update?

[IssueHuntBot]

@rororofff has funded $15.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[IssueHuntBot]

@island205 has rewarded $13.50 to @panjiachen. See it on IssueHunt

• :moneybag: Total deposit: $15.00
• :tada: Repository reward(0%): $0.00
• :wrench: Service fee(10%): $1.50

[odex21]

还是有问题啊。。。
移动端，依旧会重复打开。

第一次点击重复打开，第二次点击第一次点击的选项，submenu 会关闭。
如果第二不点击第一点击的选项，而是点其它的，则会一直重复打开。

English:
At the demo link, choose the anyone of submenu, the submenu layer pop again.
And when the second time chooses the same menu-item the submenu will chose normaly,
But if chooses the other menu-item the submenu will open again.

codesandbox
https://codesandbox.io/embed/submenu-bug-n24er?fontsize=14

演示页面
https://n24er.codesandbox.io/
只要用chrome f12 → device phone 就可以复现了。。。

[taosiqi]

This mouse node has two mouseenter events. How can I clear it?

[Warlock-9000]

When this fix will be work?

[kdyzm]

解决了吗。。我也遇到这个问题了

[kdyzm]

找到了一个能用的解决方案：element-ui NavMenu手機版重複彈出的解決方法