Remove focus when an external field is focused programmatically

[davidfou]

Hello 👋

First of all, thanks a lot for your library, it helped me a lot with my project.

After a user selects an item, another field is focused automatically. The problem is, the Select component is still focused and pressing arrows keys are handled by it. Here is a demo (based on your comment #250 (comment)).

I'm not 100% though it was the use case reported by @jquesada2016.

Let me know what you think about that improvement/fix 😄

Closes #250

[davidfou]

Something strange, yarn test succeeded on my machine

The CI report mentions 3 failures and still, it's green 🤷

The same problem happened already?

[rob-balfre]

Thanks for this. Will merge soon 👍

[davidfou]

Hello @rob-balfre 👋

Do you have any ETA when this can be merged and released?

[rob-balfre]

When i get the time :)

[davidfou]

Hey @rob-balfre 👋

Well done for improving the library and incorporating one of the tests I wrote on this PR in the master branch. Unfortunately, only one scenario is covered. The demo I shared is still relevant.

Would it be possible to merge this PR and release it? I updated my branch, so no more conflict and no test duplication.

[rob-balfre]

No prob. Will take a look this week. Thanks for updating the pr

…

On Sun, 4 Jul 2021, 21:00 David Fournier, ***@***.***> wrote: Hey @rob-balfre <https://github.com/rob-balfre> 👋 Well done for improving the library and incorporating one of the tests I wrote on this PR in the master branch. Unfortunately, only one scenario is covered. The demo <https://svelte.dev/repl/d94bee3dcbe041aaaf892208d7446005?version=3.12.1> I shared is still relevant. Would it be possible to merge this PR and release it? I updated my branch, so no more conflict and no test duplication. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#264 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUAM7WLBTWC24J7FHCM3ULTWA5OVANCNFSM45YGZETA> .

[rob-balfre]

@davidfou released in v4.2.1 - thanks :)

[andreavaccari]

Hi, this change has caused a new bug in our application. We don't fully understand what is the root cause. However, we have confirmed that our application works correctly with v4.2.0 and breaks with v4.2.1 and v4.2.2. It is difficult to prepare a small reproducible example, so I thought to first describe the issue and see if you could intuit what's going on.

We use svelte-select inside a NodeView component for prosemirror. With the latest change in svelte-select, clicking on any item in the dropdown does not dispatch a select event. The dropdown closes as if the click happened outside of it. Mousing over an option in the dropdown and then pressing Enter or Tab (instead of clicking) triggers the select event as expected.

This only happens if svelte-select is inside a NodeView. The component works normally otherwise. Any ideas?

[yadoga]

4.2.1 is breaking selects in my app as well. Mouse clicks on options are not working any longer.

[rob-balfre]

Can you raise an issue with a REPL please

…

On Sat, 10 Jul 2021, 23:57 Claas, ***@***.***> wrote: 4.2.1 is breaking Selects my app as well. Mouse clicks on options are not working any longer. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#264 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUAM7SEYBLQYQXWMLWY7JDTXBGUPANCNFSM45YGZETA> .

[yadoga]

Just tested: Select in regular Svelte REPL works, Select in new barebones SvelteKit app fails.

[yadoga]

Suspecting the deprecation of handleWindowClick in the Svelte:window listener to be the culprit.

[davidfou]

I would love to give you a hand here. Would it be possible to share either a demo on the online REPL or a repo with that bug?

[yadoga]

thanks, I just set up a fresh barebones SvelteKit via npm init svelte@next my-app and added svelte-select to it.

<script>
	import Select from 'svelte-select';

	let items = [
		{ value: 'chocolate', label: 'Chocolate' },
		{ value: 'pizza', label: 'Pizza' },
		{ value: 'cake', label: 'Cake' },
		{ value: 'chips', label: 'Chips' },
		{ value: 'ice-cream', label: 'Ice Cream' }
	];
	function handleSelect(event) {
		console.log(event.detail);
	}
</script>

<h1>Welcome to SvelteKit</h1>
<Select {items} on:select={handleSelect} />

nothing more to it, i guess

[davidfou]

Indeed I confirm, I have the bug as well by following your steps 👍 I think the best would be to create a ticket?

[yadoga]

@rob-balfre has seen this thread, but I opened a new issue #278 in any case.