[release/8.0] Fix Blazor enhanced form bugs (#52765)

* fix "Blazor enhanced form handling doesn't honor button formmethod attribute" (#51942)

* [Blazor] do not enhance form  when method = "dialog" or target != "_self" (#52133)

* 1. form is not enhanced when method = "dialog"
2. form is not enhanced when target != "_self"

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

Co-authored-by: Mackinnon Buck <[email protected]>

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

Co-authored-by: Mackinnon Buck <[email protected]>

* fix warning message in the tests

* 1. use console.warn instead
2. do not cast event.submitter to HTMLButtonElement

* small fix

---------

Co-authored-by: Mackinnon Buck <[email protected]>

* Fix enhanced form handling use defalt enctype, honor enctype and formenctype (#52359)

* 1. fix enhanced form handling use default enctype when not specified
2. fix enhanced form handling honor form enctype attribute
3. fix enhanced form handling honor submit button formenctype attribute

* use SupplyParameterFromQuery to provide enctype and formenctype in the tests

* update blazor.web.js

---------

Co-authored-by: Mackinnon Buck <[email protected]>

Author: surayya-MS

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

@@ -31,6 +31,8 @@ Note that we don't reference NavigationManager.ts from NavigationEnhancement.ts
 different bundles that only contain minimal content.
 */
 
+const acceptHeader = 'text/html; blazor-enhanced-nav=on';
+
 let currentEnhancedNavigationAbortController: AbortController | null;
 let navigationEnhancementCallbacks: NavigationEnhancementCallbacks;
 let performingEnhancedPageLoad: boolean;
@@ -116,33 +118,52 @@ function onDocumentSubmit(event: SubmitEvent) {
       return;
     }
 
+    const method = event.submitter?.getAttribute('formmethod') || formElem.method;
+    if (method === 'dialog') {
+      console.warn('A form cannot be enhanced when its method is "dialog".');
+      return;
+    }
+
+    const target = event.submitter?.getAttribute('formtarget') || formElem.target;
+    if (target !== '' && target !== '_self') {
+      console.warn('A form cannot be enhanced when its target is different from the default value "_self".');
+      return;
+    }
+
     event.preventDefault();
 
-    let url = new URL(formElem.action);
-    const fetchOptions: RequestInit = { method: formElem.method };
+    const url = new URL(event.submitter?.getAttribute('formaction') || formElem.action, document.baseURI); 
+    const fetchOptions: RequestInit = { method: method}; 
     const formData = new FormData(formElem);
-  
-    const submitter = event.submitter as HTMLButtonElement;
-    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);
-      }
+   
+    const submitterName = event.submitter?.getAttribute('name');
+    const submitterValue = event.submitter!.getAttribute('value');
+    if (submitterName && submitterValue) {
+      formData.append(submitterName, submitterValue);
     }
 
+    const urlSearchParams = new URLSearchParams(formData as any).toString();
     if (fetchOptions.method === 'get') { // method is always returned as lowercase
-      url.search = new URLSearchParams(formData as any).toString();
+      url.search = urlSearchParams;
 
       // For forms with method=get, we need to push a URL history entry equivalent to how it
       // would be pushed for a native <form method=get> submission. This is also equivalent to
       // how we push a URL history entry before starting enhanced page load on an <a> click.
       history.pushState(null, /* ignored title */ '', url.toString());
     } else {
-      fetchOptions.body = formData;
+      // Setting request body and content-type header depending on enctype
+      const enctype = event.submitter?.getAttribute('formenctype') || formElem.enctype;
+      if (enctype === 'multipart/form-data') { 
+        // Content-Type header will be set to 'multipart/form-data' 
+        fetchOptions.body = formData;
+      } else {
+        fetchOptions.body = urlSearchParams;
+        fetchOptions.headers = {
+          'content-type': enctype,
+          // Setting Accept header here as well so it wouldn't be lost when coping headers
+          'accept': acceptHeader
+        };
+      }
     }
 
     performEnhancedPageLoad(url.toString(), /* interceptedLink */ false, fetchOptions);
@@ -168,7 +189,7 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
     headers: {
       // Because of no-cors, we can only send CORS-safelisted headers, so communicate the info about
       // enhanced nav as a MIME type parameter
-      'accept': 'text/html; blazor-enhanced-nav=on',
+      'accept': acceptHeader,
     },
   }, fetchOptions));
   let isNonRedirectedPostToADifferentUrlMessage: string | null = null;

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

@@ -1368,6 +1368,101 @@ public void SubmitButtonFormactionAttributeOverridesEnhancedFormAction()
         Browser.Equal("Formaction url", () => Browser.Exists(By.TagName("html")).Text);
     }
 
+    [Fact]
+    public void SubmitButtonFormmethodAttributeOverridesEnhancedFormMethod()
+    {
+        GoTo("forms/form-with-method-and-submit-button-with-formmethod/get/post");
+        Browser.DoesNotExist(By.Id("submitted"));
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Browser.Equal("Form submitted!", () => Browser.Exists(By.Id("submitted")).Text);
+    }
+
+    [Fact]
+    public void FormNotEnhancedWhenMethodEqualsDialog()
+    {
+        GoTo("forms/form-with-method-and-submit-button-with-formmethod/dialog");
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        // We are not checking staleness of the form element because the default behavior is to stay on the page.
+        // Check the warning
+        var logs = Browser.GetBrowserLogs(LogLevel.Warning);
+        Assert.True(logs.Count > 0);
+        Assert.Contains(logs, log => log.Message.Contains("A form cannot be enhanced when its method is \\\"dialog\\\"."));
+    }
+
+    [Fact]
+    public void FormNotEnhancedWhenFormmethodEqualsDialog()
+    {
+        GoTo("forms/form-with-method-and-submit-button-with-formmethod/get/dialog");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        // We are not checking staleness of the form element because the default behavior is to stay on the page.
+        // Check the warning
+        var logs = Browser.GetBrowserLogs(LogLevel.Warning);
+        Assert.True(logs.Count > 0);
+        Assert.Contains(logs, log => log.Message.Contains("A form cannot be enhanced when its method is \\\"dialog\\\"."));
+    }
+
+    [Fact]
+    public void FormNotEnhancedWhenTargetIsNotEqualSelf()
+    {
+        GoTo("forms/form-with-target-and-submit-button-with-formtarget/_blank");
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        // We are not checking staleness of form element because the default behavior is to open a new browser tab and the form remains on the original tab.
+        // Check the warning
+        var logs = Browser.GetBrowserLogs(LogLevel.Warning);
+        Assert.True(logs.Count > 0);
+        Assert.Contains(logs, log => log.Message.Contains("A form cannot be enhanced when its target is different from the default value \\\"_self\\\"."));
+    }
+
+    [Fact]
+    public void FormNotEnhancedWhenFormtargetIsNotEqualSelf()
+    {
+        GoTo("forms/form-with-target-and-submit-button-with-formtarget/_self/_blank");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        // We are not checking staleness of form element because the default behavior is to open a new browser tab and the form remains on the original tab.
+        // Check the warning
+        var logs = Browser.GetBrowserLogs(LogLevel.Warning);
+        Assert.True(logs.Count > 0);
+        Assert.Contains(logs, log => log.Message.Contains("A form cannot be enhanced when its target is different from the default value \\\"_self\\\"."));
+    }
+
+    [Fact]
+    public void FormEnctypeEqualsDefaultWhenNotSpecified()
+    {
+        GoTo("forms/form-with-enctype-and-submit-button-with-formenctype");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Browser.Equal("application/x-www-form-urlencoded", () => Browser.Exists(By.Id("content-type")).Text);
+    }
+
+    [Fact]
+    public void FormEnctypeSetsContentTypeHeader()
+    {
+        GoTo("forms/form-with-enctype-and-submit-button-with-formenctype?enctype=multipart/form-data");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Browser.Contains("multipart/form-data", () => Browser.Exists(By.Id("content-type")).Text);
+    }
+
+    [Fact]
+    public void SubmitButtonFormenctypeAttributeOverridesEnhancedFormEnctype()
+    {
+        GoTo("forms/form-with-enctype-and-submit-button-with-formenctype?enctype=text/plain&formenctype=application/x-www-form-urlencoded");
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Browser.Equal("application/x-www-form-urlencoded", () => Browser.Exists(By.Id("content-type")).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

@@ -0,0 +1,31 @@
+@page "/forms/form-with-enctype-and-submit-button-with-formenctype"
+@using Microsoft.AspNetCore.Components.Forms
+@inject IHttpContextAccessor HttpContextAccessor
+
+<h1>Form with enctype and Submit Button with formenctype</h1>
+
+<form id="form" data-enhance method="post" enctype="@Enctype" @onsubmit="Submitted" @formname="someform">
+    <AntiforgeryToken />
+    <input id="submit-button" type="submit" formenctype="@Formenctype" />
+</form>
+
+@if (_submitted)
+{
+    <p>Http request ContentType: <span id="content-type">@_contentType</span></p>
+}
+
+@code {
+    bool _submitted = false;
+    private string? _contentType;
+
+    [SupplyParameterFromQuery] public string? Enctype { get; set; }
+    [SupplyParameterFromQuery] public string? Formenctype { get; set; }
+
+    public void Submitted()
+    {
+        _submitted = true;
+
+        var httpContext = HttpContextAccessor.HttpContext;
+        _contentType = httpContext?.Request.ContentType;
+    }
+}

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/FormWithEnctypeAndSubmitButtonWithFormenctype.razor

@@ -0,0 +1,21 @@
+@page "/forms/form-with-method-and-submit-button-with-formmethod/{method}/{formmethod?}"
+@using Microsoft.AspNetCore.Components.Forms
+
+<h1>Form with method and Submit Button with formaction</h1>
+
+<form id="form" data-enhance method="@Method" @onsubmit="() => _submitted = true" @formname="someform">
+    <AntiforgeryToken />
+    <input id="submit-button" type="submit" formmethod="@Formmethod" />
+</form>
+
+@if (_submitted)
+{
+    <p id="submitted">Form submitted!</p>
+}
+
+@code {
+    bool _submitted = false;
+
+    [Parameter] public string Method { get; set; }
+    [Parameter] public string? Formmethod { get; set; }
+}

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/FormWithMethodAndSubmitButtonWithFormmethod.razor

@@ -0,0 +1,13 @@
+@page "/forms/form-with-target-and-submit-button-with-formtarget/{target}/{formtarget?}"
+@using Microsoft.AspNetCore.Components.Forms
+
+<h1>Form with target and Submit Button with formtarget</h1>
+
+<form id="form" data-enhance target="@Target">
+    <input id="submit-button" type="submit" formtarget="@Formtarget" />
+</form>
+
+@code {
+    [Parameter] public string Target { get; set; }
+    [Parameter] public string? Formtarget { get; set; }
+}