Hiding dropdown while retaining focus on input, and having a placeholder after first selection

[jerefrer]

Hi there again,

This is a follow-up to this issue that began to get me closer to the UX I'm trying to achieve, but there still remains a bit of polishing to be done to fit exactly what I had in mind.

If you open the app I'm building, you might see how the situation is not ideal.

The idea is to allow people to filter dictionaries by choosing one or two languages.

So they open the dropdown or start typing a few letters to select a language, then pick one, the dropdown closes (thanks!) so that below the filtered results are not hidden by the open dropdown. Wonderful.

But then the focus in the select is lost, so the user has to understand that he can click again inside the input and add another language. Wouldn't it be better that they could continue typing immediately without having to focus the input again?

That's kind of funny because closeDropdownOnSelect has replaced the previous focusInputOnSelect option but we might actually want to have control over both behaviors at the same time.

So that's one thing.

Then in the same vein I would like the input to be focused on page load without having the dropdown actually visible. In that way people could start filtering languages immediately without clicking again. The dropdown could appear after the first key stroke.

The UX question here is how to make it clear to the user that he can pick a second language, apart from seeing that 1/2 hint on the right hand side of the select?

Retaining focus in the input is already a good indicator, but I was thinking that we could have, at the same place than the cursor (and not at the right hand side as allowed by using the after-input slot), a placeholder saying "Pick a second language" or something.

So why not, instead of having a placeholder prop, having a slot instead, receiving all the same props as the after-input slot, so that the placeholder could be dynamic and adjust depending for example on the number of selected options. We could have for instance "Pick a second language", then "Pick a third language" if 2 are selected, and so on.

So my humble requests are actually three-fold:

• Allow closeDropdownOnSelect to retain the focus after closing the dropdown. Maybe the dropdown could reappear after a first letter is typed. Maybe closeDropdownOnSelect could be a boolean or a string, false mean leave open, true means close and lose focus, "retain-focus" means close but retain focus.
• Replace the placeholder prop by a slot (receiving the same props as after-input), or offer to have either a prop or a slot with the same name (if that's even possible) to not make things too complicated for simple use cases. If that's not possible, maybe we could have placeholder as a prop, and a slot like extra-placeholder or secondary-placeholder that would appear after a first option has been selected.
• Have a way to programmatically focus the input without opening the dropdown. I'd like to have auto-focus in the input on page load, but without the dropdown opened.

Thanks for reading, and for making this multiselect component so easy to set up :)