Vue-select: Clear button flag

[pegiadise]

I am referring to the latest clear button addition. There might be cases where you do not want the user to be able to clear the preselected value in the single select (this could be based on a clearable prop). I could create a PR for this just let me know if it is needed. So i 'm suggesting something like this:

/**
  * Determines if the clear button should be displayed.
  * @return {Boolean}
  */
showClearButton() {
  return this.clearable && !this.multiple && !this.open && this.mutableValue != null
}

[sagalbot]

There was discussion in the original PR #368 about adding a prop or slot, but didn't do either for the sake of speed. I think the best option here is a scoped slot. With a scoped slot, you could turn the button off by passing empty content, or you could modify it's appearance and function and pass something like a search icon if there are no results that switches out to a clear button if there is.

[fractalocity]

I've been looking for the same feature. I was thinking/hoping it could be toggled on/off with one of the properties. Thought I may have just overlooked this feature and was digging through the documentation. Was glad to see pegiadise's post; I was going to post the same request.

[andywarren86]

At the moment you can only turn it off with CSS.

A prop would be trivial to implement as @pegiadise suggested and easy for users to understand.

A slot is going to be more difficult to implement and not as user friendly, but provides a greater level of customisability.

Just depends if you think users are actually going to want to customise it, or if like the comments on this issue, simply want to toggle it on/off.

or maybe we can get the best of both worlds and do a prop AND a slot 😄

[fractalocity]

Yeah, I ended up using the following css code and it did the trick. For anyone with the same thought, just copy and pasting the below code into your tag (in the .vue file you are using the v-select in) will do the trick if you need an immediate solution.
.v-select .dropdown-toggle .clear { visibility: hidden; }

[sagalbot]

@andywarren86 I think my original argument against the prop was just to avoid bloat, but it's definitely worth the extra bytes. I think prop and a slot is the way to go.

[bezborodow]

I need this myself for a project, so have created a pull request under #470. I wouldn't be comfortable writing unit tests, although I could give it a crack.

[defiant]

I guess this isn't included in the 2.4.0 version

[danielHalan]

+1 for "clearable"

[sagalbot]

clearable prop was added in 2.5.