how to hide mobile keyboard after selection when searchable is True

[jeromecc]

Hello!

More of a question than an issue. This is not a bug.

My Select component has searchable={true}. Everything works perfectly according to standards BUT on mobile (tested on recent android) after searching for an item and selecting it by clicking (touching), it would be neat if the keyboard could be closed programmatically.

How could I achieve this? I'm trying to hack something by getting the element with on:focus, storing it, then calling element.blur() in the on:change function but maybe there is a more elegant solution?

Thanks for the great component and for your help.

[jeromecc]

I can confirm the hack works:

let srcElement = $state();
...

function handleFocus(e) {
	srcElement=e.detail.srcElement;
}

function handleChange(event: CustomEvent) {
		if (event.detail && event.detail.value) {
                    ...
		    if (srcElement) srcElement.blur();
                }
}

<Select
			{label}
			{itemId}
			items={...}
			searchable={true}
			on:focus={handleFocus}
			on:change={handleChange}
			on:clear={handleClear}
			bind:value={...}
		/>

Unfortunately, the same thing happens after a clear event (the focus remains on the Select element and the keyboard shows up) but this hack does not work when applied to handleClear.
Moreover, all my attempts at overriding handleClear were fruitless in my use case.

[jeromecc]

Could keeping focus on the input element after clicking on clear be considered as a bug?
I think that's what happens here:
https://svelte-select-examples.vercel.app/examples/props/focused

I guess if a user wants to select another option, they would click on the select area. Clicking on the clear cross should be for clearing only.