Vue-multiselect: Is it possible to hide placeholder in multiple select after first selection or when disabled?

[yoavpe1]

[shentao]

Placeholder can be dynamic so yes, you can just change it to '' whenever needed.

[yoavpe1]

Thanks for the quick replay..
My question was asked because even when I set the placeholder value to empty string - it keeps taking place in the DOM:

Attached is an example:
With placeholder string: http://prntscr.com/ekkbi8
With placeholder empty string: http://prntscr.com/ekkbvd
Thanks...

[yoavpe1]

Solved it with CSS for now...
Hiding disabled component placeholder: .multiselect--disabled .multiselect__single {display: none;}
Hiding after first tag is selected: .multiselect__tag ~ .multiselect__single {display: none; }

[shentao]

Och, okay. Glad you found a solution! If you think the placeholder functionality could use some enhancement - please create a feature request issue!

[pushamaku]

@yoavpe1 I tried your CSS with no luck, but I may be doing it wrong. Can you please try to explain how you solved it. Thank you

[yoavpe1]

@pushamaku
Hi,
To hide the placeholder when the component is disabled:
.multiselect--disabled .multiselect__single {
display: none;
}

To hide the placeholder after first item is chosen:
.multiselect__tag ~ .multiselect__single {
display: none;
}

Make sure your css overwrite the component css. If it doesn't, try to add a parent class to the css
for example:
.your-class .multiselect__tag ~ .multiselect__single {
display: none;
}

Hope it helps...

[pushamaku]

@yoavpe1

Thank you for your help. I have added this CSS, but there I still cannot get rid of the placeHolder when items are selected.

I want to get rid of the place holders when more than one item is selected. I tried logic to set the place holder to '' as advised by @shentao, but it still shows the empty space, e.g.,

[yoavpe1]

@pushamaku
It is difficult to help without seeing the code :)
I am attaching a screen print of the debugging tool with the relevant code.
Try to find this DOM element ( and add to it display: none in the developer tool to see that you are dealing with the correct element.
Then check that the css rule that you wrote applies to this element.
http://prntscr.com/f6kpn2

[pushamaku]

@yoavpe1

Yes, you're absolutely right, but THANK YOU so much for pointing me in the right direction, as I believe the issue is solved now, and no extra logic to mess with the placeholder was needed.

When I checked the DOM, it seems that in my version (not using groups), the relevant element is actually _multiselect__input_ and not _multiselect__single_

It works perfectly!

[rostockahoi]

@yoavpe1 This could actually be worth a new feature. Something like HidePlaceholderOnSelect as a new boolean Prop. What do you mean?