fix: apply modifiers to bubbled events (#11369)

fixes #11365

.changeset/fast-penguins-matter.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: apply modifiers to bubbled events

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1170,8 +1170,11 @@ function serialize_render_stmt(state) {
  * @param {import('../types.js').ComponentContext} context
  */
 function serialize_event_handler(node, { state, visit }) {
+	/** @type {import('estree').Expression} */
+	let handler;
+
 	if (node.expression) {
-		let handler = node.expression;
+		handler = node.expression;
 
 		// Event handlers can be dynamic (source/store/prop/conditional etc)
 		const dynamic_handler = () =>
@@ -1209,6 +1212,16 @@ function serialize_event_handler(node, { state, visit }) {
 		} else {
 			handler = /** @type {import('estree').Expression} */ (visit(handler));
 		}
+	} else {
+		state.analysis.needs_props = true;
+
+		// Function + .call to preserve "this" context as much as possible
+		handler = b.function(
+			null,
+			[b.id('$$arg')],
+			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
+		);
+	}
 
 	if (node.modifiers.includes('stopPropagation')) {
 		handler = b.call('$.stopPropagation', handler);
@@ -1227,16 +1240,6 @@ function serialize_event_handler(node, { state, visit }) {
 	}
 
 	return handler;
-	} else {
-		state.analysis.needs_props = true;
-
-		// Function + .call to preserve "this" context as much as possible
-		return b.function(
-			null,
-			[b.id('$$arg')],
-			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
-		);
-	}
 }
 
 /**

packages/svelte/tests/runtime-legacy/samples/event-handler-modifier-bubble/_config.js

@@ -0,0 +1,12 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, component, target }) {
+		const button = target.querySelector('button');
+		ok(button);
+
+		await button.click();
+
+		assert.ok(component.default_was_prevented);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/event-handler-modifier-bubble/button.svelte

@@ -0,0 +1 @@
+<button on:click|preventDefault>click me</button>

packages/svelte/tests/runtime-legacy/samples/event-handler-modifier-bubble/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Button from "./button.svelte";
+
+	export let default_was_prevented;
+
+	function handle_click(event) {
+		default_was_prevented = event.defaultPrevented;
+	}
+</script>
+
+<Button on:click={handle_click} />