Event stopImmediatePropagation does not prevent other listeners from being called

[craigvantonder]

Vue version

3.4.36 / 3.5.0-alpha.5 / latest commit

Link to minimal reproduction

https://play.vuejs.org/#eNqVVl1v2zYU/SsXwgDJmCNv6LYHzfGabtmQYkiKZnuahlWWKJuJRBIk5cQw/N93SFkfdj7avtgU79e5h4dX2gUXSsWbhgVJMDe55sqSYbZRi1TwWkltaUealVP8ZLnlG0Z7KrWsKURQmIpU5FIYS6XUNZ33XtEuFUQiq1lCYTh1D1xYppmxxu2kYj9xwWUj4C8FrTNRVOx3ZLltljU3BpsR2zBhJ+RzuQJxnwOl+nW8yaqGxXeSiyichshLlFVM2yh0+ci4hNayAoW/fX97cx0bq7lY8XIbuawTH+HzO8BI7fA9U7Hd7nbask+2OzgVEyu7hvk79Drw1Ll5rsoodHCPLa6SM/3zL0wn/PzJjb0o7hpjazBzxA8vKTqG1kM4BwiaIKltNIA8xaoasz4J9pw80yoN7H76WxUZaB0hj77ZeUyx3Sq2nyT06ZTwk9It9w77EOcBh/dsW8gHEU6otRgr1VVds4Kj5gctVbbKHDMRMoDf+axVL3SLB8tqVcEPT0RztfjIlJZF01JpLFMmmc+cxmFtKv+PVcUXlw4eZdQ2DAUQeCcFxIaAgukp2bU31MTNIK2Y/ri5+S2ez5DjtWwDVS5vXvH83ifMioFGWjbWStFW8ucO7qhXQsnh9Go9IRGpX6z6pJsXanhn2MVLLb+7GCGYzw5Egm4cz7JidfKZo2vTKSUNRGSlA+b8AUP7BiqonQmmTTtxAMqBBDsYUaw2LmTJiK+E1Kz4pT9Qj/RtizM+5DxPg+cmTBp07BV8c1g6KrMlq6CTbcUQWHADMW0TWlYyv0fItRtraNx5DUFcKCBzAkaMZY82DWhzVsuCVdjoxwt2Z13R2VD1qwBc9aP0CQqkgawyYxDXHfvZg86UYrrv9gvwdrHYfHu4irGXTM/k8SwateWztxru0rdPLpeX/Is5Fhe4B11381kbNjQ34mt8cQ/yB3qwjNyRV/4Usi/Y4wR/wwUAhATt+AZhRMXd7nBR9vvRbRrp+eSc1rpbHbfY6g0JbzO8JJ3MjvDPZ04BWM5no+GER3/IWHrVLsidn5/ndaZXXJwtJVLgJn3/o3r82U+6keOCWqH4gGOVtL7966uTAEIOsMdFKlbahPoKmKUHUME0sAavp5Kv4jsjBb4SfFwa5LJWHK+BG+VuMnhN2ozOllWVfHjv96zGQXT7+Zrl98/s3xkcRILFB0BleoM70tssEDLQ6syXt9depr0RYm0qeL9i/MiMrBqHsXV71zjd4Sr0fh7tlf/WwXj5y1w+Yui44dADdZ57758G+Or59ZXWB7hv4h98HBgFi/9tMMbgDQJhiN/8FOz/B82GO24=

Steps to reproduce

1. Create a form with @submit.prevent="fn1".
2. fn1 = function fn1() { alert('fn1'); }
3. Create a button with type="submit" inside of the form.
4. Create an input inside of the form with @keydown.enter="fn2".
5. fn2 = function fn2 (event) { alert('fn2'); event.stopImmediatePropagation(); }
6. Press enter whilst focusing the input.

What is expected?

A dialog would show "fn2" and when you click Ok no further dialog should appear.

What is actually happening?

A dialog will show "fn2" and when you click Ok a second dialog will show "fn1".

System Info

No response

Any additional comments?

In terms of submitting the form by using the enter key whilst focusing an input, the specifications describe this as implicit submission of the SubmitEvent.

The event modifiers documentation mentions that one can .stop further propagation of the event but this does not prevent propagation to other event-handlers of the current element. In order to prevent other listeners of the same event from being called one should use event.stopImmediatePropagation().

There are 3 closed issues that reference this method of the event: #916, #3643, #10179.

In 3643 @LinusBorg had mentioned the surrounding difficulties that are involved in making Vue aware of that this was called in order to stop calling the rest of the listeners.

And in 10179 they had also mentioned that we would need call event.stopImmediatePropagation() in the child handler.

The above comment is mentioned as being the solution but it does not seem to work in this instance. Or is it simply the case of me having missed something within my thought process?

[edison1105]

you should use event.preventDefault() see playground
The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called. see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation
When you press Enter, two events are triggered, KeyboardEvent and SubmitEvent, and they are not the same event.

[craigvantonder]

you should use event.preventDefault() see playground The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called. see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation When you press Enter, two events are triggered, KeyboardEvent and SubmitEvent, and they are not the same event.

Ah, the devil is in the details. I had overlooked that part, you are absolutely correct. Thank you very much for your response and the clarity that it has provided.