Element: [Bug Report] collapse el-menu, second level menu will show twice when it is clicked on Pad

[zty4682137]

Element UI version

2.4.7

OS/Browsers version

chrome PAD模式及所有移动设备

Vue version

2.5.17

Reproduction Link

https://www.jsfiddle.com

Steps to reproduce

使用触屏设备或者chrome中的移动设备显示模式 打开 el-menu collapse:"isCollapse" 的二级菜单并点击时 二级菜单会再次弹出
官网的例子也有同样的问题 可以直接用官网中的样例测试

What is Expected?

点击后二级菜单关闭

What is actually happening?

点击后二级菜单关闭后又再次弹出

[element-bot]

Translation of this issue:

Element UI version
2.4.7

OS/Browsers version
Chrome PAD mode and all mobile devices

Vue version
2.5.17

Reproduction Link
https://www.jsfiddle.com

Steps to reproduce
Open the secondary menu of el-menu collapse: "isCollapse" using touch screen devices or mobile device display mode in chrome and the secondary menu pops up again when clicked

The example of official website also has the same problem, which can be directly tested in the official website.
What is Expected?

Click on the two level menu to close.
What is actually happening?

After clicking, the two level menu is closed and popped again.

[ziyoung]

Element is designed for desktop. It's not compatible with mobile devices. You can use other libraries like vant. FYI: https://github.com/vuejs/awesome-vue#mobile-1

[sstraus]

@ziyoung some people use desktop web application through touch devices. I have an iPad 12" and it behaves like a desktop device except for the touch events. The menu issue is really annoying, please consider to fix it, is not a mobile thing.

Thank you

[maximus136]

The menu-submenu works on hover only.
If anyone's facing this issue - add a click handler to your menu-item inside the submenu, and call the handleMouseleave function of the el-submenu component to close the menu.

in template:

<el-submenu ref="subMenu">
  <el-menu-item @click="handleSubmenuSelection">...
</el-submenu>

in js:

handleSubmenuSelection () {
  this.$refs.subMenu && this.$refs.subMenu.handleMouseleave()
}

[a631807682]

@maximus136 It work for me . Thank you.
in template:

<el-submenu>
  <el-menu-item @click="handleSubmenuSelection($event)">
</el-submenu>

in js:

handleSubmenuSelection () {
      if (vm.$parent && vm.$parent.$options.name === 'ElSubmenu') {
        vm.$parent.handleMouseleave();
      }
}