Element: el-select with multiple and filterable options combined

Created on 10 Jan 2017 · 13Comments · Source: ElemeFE/element

ElementUI version

1.1.3 (though I guess all versions)

OS/Browers version

Linux/Firefox 50.1.0 (though I guess all versions)

Vue version

2.1.0 (though I guess all versions)

Reproduction Link

https://jsfiddle.net/8o1eqbd6/

Steps to reproduce

Use an el-select element with multiple and filterable options combined.

What is Expected?

If you start typing (let's say 'T') and then click on Two, that option gets selected, the input should be focused again and the text erased.

What is actually happening?

After you click on Two the input looses focus, you can't use backspace to erase, the text is still there and if you click outside the component or inside the input, the list disappears so you have to click again. It's annoying when you want to select multiple options (tags for a post in my case)

Source

zeratulmdq

Most helpful comment

@allfreelancers

your html (or jade, like in my case) template should contain ref attribute as well as use listener on @change event, like this:

el-select(
  ref="participants",
  v-model="form.participants",
  multiple,
  filterable,
  :default-first-option='true',
  @change='onChangeParticipants'
)
  el-option(
    v-for="person in people",
    :key="person.id",
    :value="person.id",
    :label="person.name"
  )

and you need to define that listener function like this in your js code:

onChangeParticipants ( e, data ) {
  this.$refs.participants.query = '';
},

anotheri on 18 Oct 2017

👍2

All 13 comments

Fixed in https://github.com/ElemeFE/element/pull/2540/commits/8fc55e30e6ef2611e5a54df6488db4856e7943c1

Now after selecting an option, the input regains focus. But the text is not erased because in some cases you may need to select more than one options for the same query.

Leopoldthecoder on 22 Jan 2017

Thanks! Not a fan of the text decision but it's ok. Great work BTW.

zeratulmdq on 23 Jan 2017

En Taro Tassadar!

Leopoldthecoder on 24 Jan 2017

@Leopoldthecoder
could that behaviour be optional to erase the query text?
or how can i force it to erase the query text?

anotheri on 18 Sep 2017

@anotheri how did you solve this problem?

allfreelancers on 16 Oct 2017

@allfreelancers

your html (or jade, like in my case) template should contain ref attribute as well as use listener on @change event, like this:

el-select(
  ref="participants",
  v-model="form.participants",
  multiple,
  filterable,
  :default-first-option='true',
  @change='onChangeParticipants'
)
  el-option(
    v-for="person in people",
    :key="person.id",
    :value="person.id",
    :label="person.name"
  )

and you need to define that listener function like this in your js code:

onChangeParticipants ( e, data ) {
  this.$refs.participants.query = '';
},

anotheri on 18 Oct 2017

👍2

@anotheri Thank you so much!

allfreelancers on 19 Oct 2017

In version 2.0 we'll have a new prop reserve-keyword. When set to false, the query text will be cleared after selecting an option.

Leopoldthecoder on 19 Oct 2017

👍1

A W E S O M E

zeratulmdq on 19 Oct 2017

@Leopoldthecoder I cant reserve-keyword found in
http://element.eleme.io/2.0/#/en-US/component/select

allfreelancers on 20 Oct 2017

@allfreelancers I just released 2.0.0-beta.1. Guess you can find it now.

Leopoldthecoder on 20 Oct 2017

@Leopoldthecoder Thank you so much!

allfreelancers on 20 Oct 2017

This issue is still there in "element-ui": "^2.9.1". I am not able to filter if I pass multiple as a prop as well. I am not able to focus on the input itself if I pass multiple.