Element: [Bug Report] input component (type=text) can not enter spaces in el-menu.

Created on 22 Oct 2018  ·  8Comments  ·  Source: ElemeFE/element

Element UI version

2.4.8

OS/Browsers version

windows 7 x64

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/6764/

Steps to reproduce

当input在el-menu中,并且mode为"horizontal"时,input中不能输入空格。

What is Expected?

可以输入空格及任意字符(enter当然例外)

What is actually happening?

不能输入空格

menu bug

Most helpful comment

For english speakers here is the fix:

 <el-menu-item index="1">
    <el-input 
              v-model="myVar" 
              type="text" 
              @keyup.native.space="myVar= myVar+ ' '"
              clearable
              autofocus>
    </el-input>
  </el-menu-item>

All 8 comments

Translation of this issue:

Element UI version
2.4.8

OS/Browsers version
Windows 7 X64

Vue version
2.5.17

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

Steps to reproduce
When input is in el-menu and mode is "horizontal", space can not be entered in input.

What is Expected?
You can enter spaces and any characters (enter, of course).

What is actually happening?
Unable to enter space.

el-menu的mode不是horizontal时,input中可以输入空格。

@az1981cn 你这fiddle里的代码完全不能运行啊

@az1981cn 你这fiddle里的代码完全不能运行啊

https://jsfiddle.net/mmx38qxw/6764/

更新了啊

暂时可以这样来实现:

 <el-menu-item index="1">
    <el-input 
              v-model="keyword" 
              type="text" 
              placeholder="请输入搜索内容"
              @keyup.native.input="keyword = keyword + ' '"
              clearable
              autofocus>
    </el-input>
  </el-menu-item>

导致 Bug 的原因是由于 mode=“horizontal” 时会为每一个 menu-item 添加 keydown 的事件处理。
例如用方向键选择子菜单,按空格或回车键确认。

当 menu-item 中的 input 触发 keydown 事件时被错误处理。

For english speakers here is the fix:

 <el-menu-item index="1">
    <el-input 
              v-model="myVar" 
              type="text" 
              @keyup.native.space="myVar= myVar+ ' '"
              clearable
              autofocus>
    </el-input>
  </el-menu-item>

2.4.8的bug,现在2.13.1了,仍然存在。效率不是一般的低啊!

Was this page helpful?
0 / 5 - 0 ratings