Showing an empty option in Select2?

[viveleroi]

I'm using Select2 as a select input replacement because we need ultimate control over the styling. What's the best way to show an empty option?

I assume I just need to add an empty option in my items array but was hoping for a prop.

[adidahiya]

Right now there is no prop like that, so yes you'll need to add your own empty option. But this seems like a useful feature request, and we already support another special kind of option (the "create new item" option). I think there are two ways to approach this UI problem:

• add a new "empty" option like you suggested, with props like showEmptyItem?: boolean and emptyItemText?: string (the latter for internationalization) on the Select2 and Suggest2 components (MultiSelect2 already has a "clear" button in its TagInput, so I don't think it's useful there)
• add an optional "clear" button to Suggest2, like in the below screenshot. since Select2 doesn't render its own target, the consumer would be responsible for creating their own "clear" button next to the dropdown button

I'm curious to hear @CPerinet's thoughts on this...

[viveleroi]

I went ahead and added a prop in our Select2 wrapper that unshifts an empty object to the array. The clear button would be a nice feature, but I wanted to say that both features would be useful and one may not replace the other for some users.