Honor preventdefault for events so they don't bubble (#982)

* Honor preventdefault for events so they don't bubble

* Small change to fix the normal bubbling events

* Small rename of a private method to better indicate its intention

* Improvement and simplification

* Build fix by removing an empty statement

* Changelog

* formatting of the changelog

* Updated changelog

---------

Co-authored-by: Steven Giesel <[email protected]>

Author: JelleHissink

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to **bUnit** will be documented in this file. The project ad
 
 ## [Unreleased]
 
+-   Submit buttons and input fields now no longer cause a form submit when they have the `@onclick:preventDefault` attribute. By [@JelleHissink](https://github.com/JelleHissink).
+
 ## [1.16.2] - 2023-02-07
 
 -   Changed semantic comparer to handle elements parsed outside their proper context, e.g. an `<path>` element parsed without being inside a `<svg>` element. The semantic comparer will now be able to treat those as regular elements and thus be able to compare correctly to other elements of the same type and with the same node name. By [@egil](https://github.com/egil).

src/bunit.web/EventDispatchExtensions/TriggerEventDispatchExtensions.cs

@@ -80,30 +80,39 @@ public static Task TriggerEventAsync(this IElement element, string eventName, Ev
 	}
 
 	[SuppressMessage("Globalization", "CA1308:Normalize strings to uppercase", Justification = "HTML events are standardize to lower case and safe in this context.")]
-	private static Task TriggerEventsAsync(ITestRenderer renderer, IElement element, string eventName, EventArgs eventArgs)
+	private static async Task TriggerEventsAsync(ITestRenderer renderer, IElement element, string eventName, EventArgs eventArgs)
 	{
 		var isNonBubblingEvent = NonBubblingEvents.Contains(eventName.ToLowerInvariant());
 		var unwrappedElement = element.Unwrap();
 		if (isNonBubblingEvent)
-			return TriggerNonBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs);
+			await TriggerNonBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs);
+		else
+			await TriggerBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs);
 
-		return unwrappedElement switch
+		switch (unwrappedElement)
 		{
-			IHtmlInputElement { Type: "submit", Form: not null } input when eventName is "onclick"
-				=> TriggerFormSubmitBubblingEventAsync(renderer, input, eventArgs, input.Form),
-			IHtmlButtonElement { Type: "submit", Form: not null } button when eventName is "onclick"
-				=> TriggerFormSubmitBubblingEventAsync(renderer, button, eventArgs, button.Form),
-			_ => TriggerBubblingEventAsync(renderer, unwrappedElement, eventName, eventArgs)
-		};
+			case IHtmlInputElement { Type: "submit", Form: not null } input when eventName is "onclick":
+				await TriggerFormSubmitAsync(renderer, input, eventArgs, input.Form);
+				break;
+			case IHtmlButtonElement { Type: "submit", Form: not null } button when eventName is "onclick":
+				await TriggerFormSubmitAsync(renderer, button, eventArgs, button.Form);
+				break;
+		}
 	}
 
-	private static Task TriggerFormSubmitBubblingEventAsync(ITestRenderer renderer, IElement element, EventArgs eventArgs, IHtmlFormElement form)
+	private static Task TriggerFormSubmitAsync(ITestRenderer renderer, IElement element, EventArgs eventArgs, IHtmlFormElement form)
 	{
-		var events = GetDispatchEventTasks(renderer, element, "onclick", eventArgs);
-		events = events.Concat(GetDispatchEventTasks(renderer, form, "onsubmit", eventArgs)).ToList();
+		const string eventName = "onclick";
+
+		var eventAttrName = Htmlizer.ToBlazorAttribute(eventName);
+		var preventDefaultAttrName = $"{eventAttrName}:preventdefault";
+		if (element.HasAttribute(preventDefaultAttrName))
+			return Task.CompletedTask;
+
+		var events = GetDispatchEventTasks(renderer, form, "onsubmit", eventArgs);
 
 		if (events.Count == 0)
-			throw new MissingEventHandlerException(element, "onclick");
+			throw new MissingEventHandlerException(element, eventName);
 
 		return Task.WhenAll(events);
 	}

tests/bunit.testassets/SampleComponents/SubmitFormOnClick.razor

@@ -1,11 +1,13 @@
-<form id="my-form" @onsubmit="() => FormSubmitted = true">
-	<button id="inside-form-button" type="submit" @onclick="() => Clicked = true">Submit</button>
-	<input id="inside-form-input" type="submit" @onclick="() => Clicked = true" value="Submit" />
+<form id="my-form" @onsubmit="() => FormSubmitted = true">
+    <button id="inside-form-button" type="submit" @onclick="() => Clicked = true" @onclick:preventDefault=PreventDefault>Submit</button>
+    <input id="inside-form-input" type="submit" @onclick="() => Clicked = true" @onclick:preventDefault=PreventDefault value="Submit" />
 </form>
 
 <button id="outside-form-button" form="my-form">Submit outside</button>
 
 @code {
     public bool FormSubmitted;
-	public bool Clicked;
+    public bool Clicked;
+
+    [Parameter] public bool PreventDefault { get; set; } = false;
 }

tests/bunit.web.tests/EventDispatchExtensions/GeneralEventDispatchExtensionsTest.cs

@@ -266,6 +266,18 @@ public void Test306()
 		Should.Throw<InvalidOperationException>(() => cut.Find("button").Submit());
 	}
 
+	[Fact(DisplayName = "Should not submit a form if the button has preventDefault")]
+	public void Test307()
+	{
+		var cut = RenderComponent<SubmitFormOnClick>(
+			ComponentParameter.CreateParameter(nameof(SubmitFormOnClick.PreventDefault), true));
+
+		cut.Find("#inside-form-input").Click();
+
+		cut.Instance.FormSubmitted.ShouldBeFalse();
+		cut.Instance.Clicked.ShouldBeTrue();
+	}
+
 	public static IEnumerable<object[]> GetTenNumbers() => Enumerable.Range(0, 10)
 		.Select(i => new object[] { i });