Element: [Bug Report] Select 选择器选择多个选项时，选择后输入的内容不会清空

Created on 10 Jul 2017 · 10Comments · Source: ElemeFE/element

Element UI version

1.2.4

OS/Browsers version

Mac os /Chrome 59

Vue version

2.2.1

Reproduction Link

官方selectdemo

Steps to reproduce

输入内容
匹配出内容结果下拉框
选择内容
选中后，输入的内容仍旧存在

What is Expected?

选中对应选项后，输入的内容会被清空
重新输入执行下一次的选择

What is actually happening?

选中对应选项后，输入的内容不会被清空

更换匹配内容的时候要手动删除然后再重新输入。

Source

stuxt

👍2

Most helpful comment

我是通过指令解决的，虽然不提倡，但能满足需求，写一个 v-select-empty，先绑定下面的指令，使用时如

export default {
    name: 'select-empty',
    update(el, binding, vnode, oldnode) {
        let len1 = vnode.data.model.value.length || 0
        let len2 = oldnode.data.model.value.length || 0
        if (len1 !== len2) {
            vnode.componentInstance.query = ''
        }
    }
}

kimyLee on 2 Nov 2017

👍2

All 10 comments

This is by design. After typing a search string, chances are that the user needs to pick more than one filtered options. If the search string is cleared after picking one option, other options will be lost.

Leopoldthecoder on 10 Jul 2017

@Leopoldthecoder
However, when I input the content after selecting a I want to choose, and don't want to choose again but in the search results to search options, manually to delete the original input, is a terrible experience.

stuxt on 11 Jul 2017

@Leopoldthecoder
If we can according to your need to configure, would be a good choice.

stuxt on 11 Jul 2017

This is a bad design. If the user has already selected an item, the user has got the result he want. It is strange to keep the input after user has already choosen an item.

这种设计并不好。如果用户已经选择好了一个Item，说明用户已经获得了他想要的结果，如果还保留之前的输入不觉得很奇怪吗？！

2017-07-20_14-14-15

liamwang on 20 Jul 2017

同需要支持清空输入框的事件，目前设计不能满足基本需求

zhujz on 31 Jul 2017

不必自动清空，支持一个event即可

zhujz on 31 Jul 2017

目前临时解决办法是在选择事件使用setTimeout清空Input文本

liamwang on 1 Aug 2017

+1，保留input 的内容的场景不会比不需要保留input 的场景多吧？

zhoulaiqing on 19 Sep 2017

我是通过指令解决的，虽然不提倡，但能满足需求，写一个 v-select-empty，先绑定下面的指令，使用时如

export default {
    name: 'select-empty',
    update(el, binding, vnode, oldnode) {
        let len1 = vnode.data.model.value.length || 0
        let len2 = oldnode.data.model.value.length || 0
        if (len1 !== len2) {
            vnode.componentInstance.query = ''
        }
    }
}

kimyLee on 2 Nov 2017

👍2

2.0中该问题被修复了