Svelte 5: Chrome: svelte-select list is not opened on the first click (same code of Svelte 4)

[frederikhors]

Firefox 126 works. Chrome 125 doesn't.

The same code on Svelte 4:

https://svelte.dev/repl/cde634ff0a054288a0da1044cfd3d4eb?version=4.2.17

and on Svelte 5.0.0-next.136:

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACoWRPW_CMBCG_8rpFi9G7CZFqpi6VWIkDMZcilV_yXaCIMp_r0wilMDQ8X3kx6_v3GOjDSUUhx6dtIQCP0NAjvkWSkgdmUzIMfk2qkKqpKIOeVs7AG2Djxn2ZEhlaKK3wEZjlR6MbWpXDirvUgadySb4gENBAH0nTUsCmLp45Y3MxDgYeSIjgO1m7Cf6Nghg-ytRZgN_0YO-3-VM_Z7yU5Odj7d3T8nfReMYl2UcxkHkyZCARppE7_dcdEiLp4_5v36taKUiSTtzvxTBbmIvYxf7uKldtX7-QO2qaff9Y7cDrLfI0fqzbjSdUeTY0nAc_gD3U2Kl5gEAAA==

In the Svelte 5 the first click on the select doesn't open the list.

---

I already opened rob-balfre/svelte-select#690.

Severity

blocking an upgrade

[longnguyen2004]

It works for me just fine, in both non-runes and runes mode.

[frederikhors]

It works for me just fine, in both non-runes and runes mode.

The issue is the list is not opening when you first click without writing.

[frederikhors]

I tried Firefox and it works! Chrome doesn't!

[longnguyen2004]

Yes, Chrome Canary 127.0.6490.0 also breaks, Edge 125.0.2535.51 works fine

[frederikhors]

Wow. Now we have to understand if it's a Svelte 5 or a Chrome bug... :(

[longnguyen2004]

Also it seems to be intermittent, I just tested again and now it works? Not sure what's going on here

[frederikhors]

Are you sure you didn't pressed any keyboard key? Because if you do the list appears. The issue is the first click only.

[longnguyen2004]

Yes, it works fine, but I've also seen it breaks, so it's pretty confusing. Let's wait for the dev then.

2024-05-20.18-29-27.mp4

[frederikhors]

Which Chrome version is this?

[longnguyen2004]

Same as above, Canary 127.0.6490.0

[trueadm]

So this looks like a really ugly Chrome bug. Essentially, pointerup is registered to the DOM element, but Chrome isn't invoking it on select elements – at all? If you change it to a click inside svelte-select then it works fine.

https://github.com/rob-balfre/svelte-select/blob/master/src/lib/Select.svelte#L682

I'll keep digging as to why this is the case though, as it works in Svelte 4.

[trueadm]

Okay this seems to be because we use cloneNode on the template that generates the div, using importNode resolves the problem – however, that doesn't seem like ideal. This is definitely a Chrome bug.

[gterras]

For what it's worth this seems to be working as expected on Chrome 125 linux (debian).

simplescreenrecorder-.5.webm

[trueadm]

For me, the dropdown never opens at all in Chrome 125 or Chrome canary. It seems that pointer events are not working correctly with cloneNode. Interestingly, mouseup works fine.

[trueadm]

It seems that adding point events to DOM elements that were cloned and not attached when the event handler is added is what causes this issue:

https://jsfiddle.net/x8u742cL/1/

[frederikhors]

Should we open a bug on Chrome or it's a bug everywhere else is working right now?

[trueadm]

I think someone should report it to Chrome, as this bug only occurs in Chrome – not even Edge. On the other-hand, we might be able to mitigate this in Svelte by attaching inline event handlers after we append to the DOM.

Update: we can't really add events later, because it breaks the ordering with other directives like bind:, use: and transition: which both expect event handlers to have run in an order they understand. This is a tricky one for sure.

[frederikhors]

@Rich-Harris @trueadm can you please release this ASAP?

[atjn]

@trueadm Chrome is currently improving their pointer event logic as part of WPT Interop 2024. I checked and there does not seem to be any tests for this problem. Chances are that if you contribute a test, Chrome will fix it by the end of the year.

[Neptunium1129]

is It seems to be working fine without any problems now.

• 125.0.6422.142(공식 빌드) (64비트)

[trueadm]

That’s because we fixed it