vue-multiselect
vue-multiselect copied to clipboard
shentao
Empty list space when no more options while hiding selected options
Reproduction Link
https://jsfiddle.net/g7wLo1pr/2/
Steps to reproduce
Have a vue-multiselect component with multiple and hide-select on true. Select all the options in the list until there's no more option.
Expected behaviour
Some kind of "no more option" slot should be displayed.
Actual behaviour
There's an empty space and no "empty" slot is used.
Thanks for reporting! Found the source of the problem. Should be quite easy to fix.
@shentao what's the intended fix for this? A new slot for when no results can be displayed?
I was thinking of actually showing the no-results slot without the Please consider changing the search query that is there now. However, it only shows when you type something.
So after the change, it would be No results found. instead of that empty bar and if you start typing, it adds the Please consider changing the search query to it.
Wdyt?
Sounds good to me.
Another solution might be to have an additionnal "no more options" slot to cover this slightly different case, but this might be overkill.
Another slot gives more options to the user in case they want to modify the message that shows up. For e.g. my current implementation for noResult slot just says "No results found", reusing the same slot works for my use case. But users may want to show another message here.
The slot’s scope would include information like the current search query. Thus you will be able to show a different content depending on that. Also reduces the risk of having them both pop at the same time (and making this yet another opinionated element of the component since you can’t control which slot appears when).
Dear @shentao, did you settle on a solution for this? Would love to see it :)
As a workaround, you can use the max props. Give it a max with a count of all your elements. Then you can use the maxElements slot to show your message.
For example: https://jsfiddle.net/s3cfq0uk/1/
