Element: [Bug Report] NavMenu component, submenu loses focus will automatically retract.

Created on 17 Nov 2018 · 18Comments · Source: ElemeFE/element

Element UI version

2.4.10

OS/Browsers version

MAC OS 10.13.6 / Chrome 70.0.3538.102

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/

Steps to reproduce

鼠标点击展开子菜单后，在页面其他地方随意点击鼠标，子菜单会自动收起。

What is Expected?

鼠标点击展开子菜单后，在页面其他地方随意点击鼠标，子菜单保持不动

What is actually happening?

鼠标点击展开子菜单后，在页面其他地方随意点击鼠标，子菜单自动收起。发现这个问题在2.3.9种不存在，只有2.4.10。因为这个bug，同样导致了unique-opened配置失效

menu bug

Source

wxxcarl

Most helpful comment

2.4.10版本中应该是两个问题：
1、布局为左右布局，左侧为垂直菜单，右侧为内容区域。展开左侧菜单，并点击其中一个菜单子项，再去点击非菜单区域，左侧菜单会自动收缩起来；
2、unique-opened这个属性不生效，始终会收缩当前已展开的菜单。

sds0917 on 17 Nov 2018

👍5

All 18 comments

Translation of this issue:

Element UI version
2.4.10

OS/Browsers version
MAC OS 10.13.6 / Chrome 70.0.3538.102

Vue version
2.5.17

Reproduction Link
https://jsfiddle.net/mmx38qxw/

Steps to reproduce
After the mouse clicks to expand the sub-menu, the sub-menu will be automatically retracted by clicking the mouse at will in other parts of the page.

What is Expected?
After clicking the unfolding menu, click the mouse anywhere else on the page, and the submenus remain unchanged.

What is actually happening?
After clicking the expansion menu, click the mouse anywhere else on the page, and the sub menu is automatically retracted. It is found that this problem does not exist in 2.3.9, only 2.4.10. Because this bug also causes unique-opened configuration failure.

element-bot on 17 Nov 2018

sds0917 on 17 Nov 2018

👍5

今天升级后，遇到同样的问题，求解。

linziguan on 19 Nov 2018

pr #13296 导致的该问题。这个 pr 的目的是点击菜单外部时，关闭已经打开的菜单。没想到升级会导致这么多问题。

点击菜单外部时，关闭已经打开的菜单

这个功能有那么重要吗？

ziyoung on 19 Nov 2018

@ziyoung 垂直模式的时候，这个体验糟糕透顶，你可以去体验一下。希望能尽快解决，不然只能退回老版本了。。。o(╥﹏╥)o

wxxcarl on 19 Nov 2018

👍3

SubMenu中引入了Clickoutside directive，如果能有一个配置项就好了，目前可以dirty hack一下：

const closeMenu = this.$refs.menu.closeMenu.bind(this.$refs.menu);
this.$refs.menu.closeMenu = (index) => {
  if (new Error().stack.indexOf('handleSubmenuClick') < 0) return;
  closeMenu(index);
};

bestmike007 on 19 Nov 2018

👎1

今天升级后，遇到同样的问题，求解。

要么退回去，要么将就着等更新么。

zhangyile on 19 Nov 2018

@wxxcarl @bestmike007 @sds0917 先回撤到旧版。另外大家讨论一下这个功能吧。

pr #13296 导致的该问题。这个 pr 的目的是点击菜单外部时，关闭已经打开的菜单。没想到升级会导致这么多问题。

点击菜单外部时，关闭已经打开的菜单

这个功能有那么重要吗？

ziyoung on 19 Nov 2018

就功能而言没有问题。是否有个配置项能好一些？

sds0917 on 19 Nov 2018

@wxxcarl @bestmike007 @sds0917 先回撤到旧版。另外大家讨论一下这个功能吧。

pr #13296 导致的该问题。这个 pr 的目的是点击菜单外部时，关闭已经打开的菜单。没想到升级会导致这么多问题。

点击菜单外部时，关闭已经打开的菜单

这个功能有那么重要吗？

“点击菜单外部时，关闭已经打开的菜单”，如果你展开菜单时，没有做什么操作，然后被关闭了，那没问题，但是你明明选择了子菜单呢？子菜单有了新的is active item ，路由也跳转了，一开始不动，等我点了其它地方，菜单突然收起来了，不觉得很诡异吗？相当吸引眼球，而且也看不到当前的激活页面属于哪个菜单了。另外，有考虑过 prop unique-opened 的感受吗？无论如何只能展开一个，这一个还会在你下次任意点击的时候被迫关闭。

wxxcarl on 19 Nov 2018

自己打了个补丁先用着
if (this.opened && this.rootMenu.mode==='horizontal') this.rootMenu.closeMenu(this.index);