Cannot modify native DOM event with CustomEvent in use: directive action

[kodaicoder]

https://svelte.dev/playground/803e0d99397342d4a43fe26c7e5f5819?version=5.3.1

as per in REPL you will see that a input element have event handler to show a data that in event.detail and in actions.svelte.js there were has implement of CustomEvent to adding a detail data but enventaully there are not detail after event on change is fired.

this issue not persist if change CustomEvent's name to any other name that not matching with native DOM event (change, input, click, etc.)

[brunnerh]

The action only fires one event on mount and the event does not reach the handler.

This is because Svelte 5 uses event delegation for regular DOM events like change, which means one listener is attached at the root of the document which is used to handle all events of this type.

Compiler output for onchange:

input.__change = [changeHandler];

If this is changed to e.g. onmodify:

$.event("modify", input, changeHandler);

If you want to make sure the event is handled by event handlers using delegation, you have to make sure the event bubbles, there is an option for that on the event constructor:

const customChangeEvent = new CustomEvent('change', {
  detail: {
    extraData,
    timestamp: new Date()
  },
  bubbles: true, // <-
});

Playground

You also can manually use addEventListener in an action to circumvent event delegation when adding a handler.

[kodaicoder]

but with this approach there still running only once while element mounted and after change something in input a detail still can not attach to CustomEvent has been created in action that have type name as same as a Native DOM Event.

If I use addEventListener into a actions there will cause infinite loop of actions call when change event is fired

https://svelte.dev/playground/803e0d99397342d4a43fe26c7e5f5819?version=5.4.0

then I think a properly way is need to using other type name of CustomEvent if we need to passing something to detail object

[brunnerh]

For this case you should probably use a separate event.

If you were to encapsulate the input fully in a component, you could intercept the event and re-dispatch it, that way the parent would only see the event with additional data.