PreventDefault on touchstart not working!

[legendSabbir]

Describe the bug

<input type="text">
<button ontouchstart={(e) => e.preventDefault()}>click</button>

While the input has focus clicking the button on a touch device shouldn't take the focus away from the input . In svelte 4 it is working fine . I'm guessing under the hood passive: true is added .

Severity

annoyance

[trueadm]

This is intentional because we now use event delegation, if you use on:touchstart as per Svelte 4, it should work fine and thus isn't a breaking change. Although I think we're missing documentation around this. You can additionally just create your own event handler using on from svelte/events and handle that in an action or an effect.

[huntabyte]

@trueadm this works as expected? REPL

[trueadm]

@trueadm this works as expected? REPL

We specifically made PassiveDelegatedEvents for ['touchstart', 'touchmove', 'touchend']. Maybe we should revise that list though.

[legendSabbir]

This is intentional because we now use event delegation, if you use on:touchstart as per Svelte 4, it should work fine and thus isn't a breaking change. Although I think we're missing documentation around this. You can additionally just create your own event handler using on from svelte/events and handle that in an action or an effect.

The issue still exists even if i use old syntax (on:touchstart) on svelte-5 . As a workaround
i can do this btn.addEventListener('touchstart', (e) => e.preventDefault(), { passive: true }) but this not ideal

[trueadm]

This is intentional because we now use event delegation, if you use on:touchstart as per Svelte 4, it should work fine and thus isn't a breaking change. Although I think we're missing documentation around this. You can additionally just create your own event handler using on from svelte/events and handle that in an action or an effect.

The issue still exists even if i use old syntax (on:touchstart) on svelte-5 . As a workaround i can do this btn.addEventListener('touchstart', (e) => e.preventDefault(), { passive: true }) but this not ideal

What are you adding on:touchstart to? It seems onpointerdown works for me?

Edit: you deleted your comment?

[legendSabbir]

The issue still exists even if i use old syntax (on:touchstart) on svelte-5 . As a workaround i can do this btn.addEventListener('touchstart', (e) => e.preventDefault(), { passive: true }) but this not ideal

What are you adding on:touchstart to? It works fine for me locally, as does onpointerdown?

Edit: you deleted your comment?

https://github.com/user-attachments/assets/3aa3af5f-3fa6-4724-9778-77ffc85b214a
On click of the button they input loses focus , In svelte 4 repl its working fine

[trueadm]

Nice catch. I have a PR that fixes the on: version of this, #12645

[dummdidumm]

Reopening since we still need to document this for runes mode (and/or decide if the default passive is the right move)