[release/8.0] Fix "Blazor enhanced form handling doesn't honor button formaction attribute" (#52220)

# [release 8.0] Fix "Blazor enhanced form handling doesn't honor button formaction attribute"

Manual backport of #51895

## Description

This PR fixes Blazor enhanced form honoring submit button's `formaction` attribute

```html
<form data-enhance action="test-action">
    <button type="submit" formaction="test-formaction">Submit to formaction url</button>
</form>
```
Workaround is to remove `data-enhance` attribute.

Fixes #51734

## Customer Impact

Without this change customers will have bad experience using enhanced form that has a button with `formaction` attribute. The attribute will not be honored.

## Regression?

- [ ] Yes
- [x] No

[If yes, specify the version the behavior has regressed from]

## Risk

- [ ] High
- [ ] Medium
- [x] Low

This is a minor change. There are unit and e2e tests for this change.

## Verification

- [x] Manual (required)
- [x] Automated

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [x] N/A

----

## When servicing release/2.1

- [ ] Make necessary changes in eng/PatchConfig.props

Author: surayya-MS

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -118,14 +118,20 @@ function onDocumentSubmit(event: SubmitEvent) {
 
     event.preventDefault();
 
-    const url = new URL(formElem.action);
+    let url = new URL(formElem.action);
     const fetchOptions: RequestInit = { method: formElem.method };
     const formData = new FormData(formElem);
-
-    // Replicate the normal behavior of appending the submitter name/value to the form data
+  
     const submitter = event.submitter as HTMLButtonElement;
-    if (submitter && submitter.name) {
-      formData.append(submitter.name, submitter.value);
+    if (submitter) {
+      if (submitter.name) {
+        // Replicate the normal behavior of appending the submitter name/value to the form data
+        formData.append(submitter.name, submitter.value);
+      }
+      if (submitter.getAttribute("formaction") !== null) {
+        // Replicate the normal behavior of overriding action attribute of form element
+        url = new URL(submitter.formAction);
+      }
     }
 
     if (fetchOptions.method === 'get') { // method is always returned as lowercase

src/Components/Web.JS/src/Services/NavigationEnhancement.ts

@@ -1337,6 +1337,17 @@ void AssertUiState(string expectedStringValue, bool expectedBoolValue)
         }
     }
 
+    [Fact]
+    public void SubmitButtonFormactionAttributeOverridesEnhancedFormAction()
+    {
+        GoTo("forms/form-submit-button-with-formaction");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Assert.EndsWith("/test-formaction", Browser.Url);
+        Browser.Equal("Formaction url", () => Browser.Exists(By.TagName("html")).Text);
+    }
+
     // Can't just use GetAttribute or GetDomAttribute because they both auto-resolve it
     // to an absolute URL. We want to be able to assert about the attribute's literal value.
     private string ReadFormActionAttribute(IWebElement form)

src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs

@@ -173,6 +173,8 @@ private static void MapEnhancedNavigationEndpoints(IEndpointRouteBuilder endpoin
             return Task.Delay(Timeout.Infinite, token);
         });
 
+        endpoints.Map("/test-formaction", () => "Formaction url");
+
         static Task PerformRedirection(HttpRequest request, HttpResponse response)
         {
             response.Redirect(request.Query["external"] == "true"

src/Components/test/testassets/Components.TestServer/RazorComponentEndpointsStartup.cs

@@ -0,0 +1,6 @@
+@page "/forms/form-submit-button-with-formaction"
+<h1>Form Submit Button with formaction</h1>
+
+<form data-enhance action="test-action">
+    <button type="submit" formaction="test-formaction" id="submit-button">Submit to formaction url</button>
+</form>