Svelte 5: Chrome: list is not opened on the first click

[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 tried Firefox and it works! Chrome doesn't!

---

I opened sveltejs/svelte#11691.

[ennoente]

Same here. What I have found is that an initial binding to listOpen={true} fixes the issue.

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

  const items = [
    {value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
    {value: 'pizza', label: 'Pizza', group: 'Savory'},
    {value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
    {value: 'chips', label: 'Chips', group: 'Savory'},
    {value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
  ];

  let listOpen = $state(true);
</script>

<Select {items} bind:listOpen />

@frederikhors Can you confirm this?

[frederikhors]

@ennoente apparently this issue is on Chrome & on Windows: sveltejs/svelte#11691.

With listOpen works, but is not a valid workaround.

[rob-balfre]

@frederikhors thanks for opening the issue over on Svelte, was an interesting read this morning! A Chrome bug, wild times!

[Neptunium1129]

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

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

[knd775]

This can probably be closed now. The fix for svelte 5 has been released.