[main] Stop duplicating history with streaming-enhanced-form PRG. Fixes #51674 (#53303)

Author: SteveSandersonMS

src/Components/Web.JS/src/Rendering/StreamingRendering.ts

@@ -53,19 +53,24 @@ class BlazorStreamingUpdate extends HTMLElement {
  const isFormPost = node.getAttribute('from') === 'form-post';
  const isEnhancedNav = node.getAttribute('enhanced') === 'true';
  if (isEnhancedNav && isWithinBaseUriSpace(destinationUrl)) {
+ // At this point the destinationUrl might be an opaque URL so we don't know whether it's internal/external or
+ // whether it's even going to the same URL we're currently on. So we don't know how to update the history.
+ // Defer that until the redirection is resolved by performEnhancedPageLoad.
+ const treatAsRedirectionFromMethod = isFormPost ? 'post' : 'get';
+ const fetchOptions = undefined;
+ performEnhancedPageLoad(destinationUrl, /* interceptedLink */ false, fetchOptions, treatAsRedirectionFromMethod);
+ } else {
  if (isFormPost) {
  // The URL is not yet updated. Push a whole new entry so that 'back' goes back to the pre-redirection location.
- history.pushState(null, '', destinationUrl);
+ // WARNING: The following check to avoid duplicating history entries won't work if the redirection is to an opaque URL.
+ // We could change the server-side logic to return URLs in plaintext if they match the current request URL already,
+ // but it's arguably easier to understand that history non-duplication only works for enhanced nav, which is also the
+ // case for non-streaming responses.
+ if (destinationUrl !== location.href) {
+ location.assign(destinationUrl);
+ }
  } else {
  // The URL was already updated on the original link click. Replace so that 'back' goes to the pre-redirection location.
- history.replaceState(null, '', destinationUrl);
- }
- performEnhancedPageLoad(destinationUrl, /* interceptedLink */ false);
- } else {
- // Same reason for varying as above
- if (isFormPost) {
- location.assign(destinationUrl);
- } else {
  location.replace(destinationUrl);
  }
  }

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

@@ -132,10 +132,10 @@ function onDocumentSubmit(event: SubmitEvent) {
 
  event.preventDefault();
 
- const url = new URL(event.submitter?.getAttribute('formaction') || formElem.action, document.baseURI); 
- const fetchOptions: RequestInit = { method: method}; 
+ const url = new URL(event.submitter?.getAttribute('formaction') || formElem.action, document.baseURI);
+ const fetchOptions: RequestInit = { method: method};
  const formData = new FormData(formElem);
- 
+
  const submitterName = event.submitter?.getAttribute('name');
  const submitterValue = event.submitter!.getAttribute('value');
  if (submitterName && submitterValue) {
@@ -153,8 +153,8 @@ function onDocumentSubmit(event: SubmitEvent) {
  } else {
  // 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' 
+ if (enctype === 'multipart/form-data') {
+ // Content-Type header will be set to 'multipart/form-data'
  fetchOptions.body = formData;
  } else {
  fetchOptions.body = urlSearchParams;
@@ -170,7 +170,7 @@ function onDocumentSubmit(event: SubmitEvent) {
  }
 }
 
-export async function performEnhancedPageLoad(internalDestinationHref: string, interceptedLink: boolean, fetchOptions?: RequestInit) {
+export async function performEnhancedPageLoad(internalDestinationHref: string, interceptedLink: boolean, fetchOptions?: RequestInit, treatAsRedirectionFromMethod?: 'get' | 'post') {
  performingEnhancedPageLoad = true;
 
  // First, stop any preceding enhanced page load
@@ -232,8 +232,9 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
  // For 301/302/etc redirections to internal URLs, the browser will already have followed the chain of redirections
  // to the end, and given us the final content. We do still need to update the current URL to match the final location,
  // then let the rest of enhanced nav logic run to patch the new content into the DOM.
- if (response.redirected) {
- if (isGetRequest) {
+ if (response.redirected || treatAsRedirectionFromMethod) {
+ const treatAsGet = treatAsRedirectionFromMethod ? (treatAsRedirectionFromMethod === 'get') : isGetRequest;
+ if (treatAsGet) {
  // For gets, the intermediate (redirecting) URL is already in the address bar, so we have to use 'replace'
  // so that 'back' would go to the page before the redirection
  history.replaceState(null, '', response.url);

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

@@ -1466,6 +1466,8 @@ public void SubmitButtonFormenctypeAttributeOverridesEnhancedFormEnctype()
  [Fact]
  public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry()
  {
+ GoTo("about:blank");
+
  var startUrl = Browser.Url;
  GoTo("forms/form-that-calls-navigation-manager-refresh");
  var guid = Browser.Exists(By.Id("guid")).Text;
@@ -1482,6 +1484,30 @@ public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry
  Browser.Navigate().Back();
  Browser.Equal(startUrl, () => Browser.Url);
  }
+ 
+ [Fact]
+ public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry_Streaming()
+ {
+ GoTo("about:blank");
+
+ var startUrl = Browser.Url;
+ GoTo("forms/form-that-calls-navigation-manager-refresh-streaming");
+
+ // Submit the form
+ Browser.FindElement(By.Id("some-text")).SendKeys("test string");
+ Browser.Equal("test string", () => Browser.FindElement(By.Id("some-text")).GetAttribute("value"));
+ Browser.Exists(By.Id("submit-button")).Click();
+
+ // Wait for the async/streaming process to complete. We know this happened
+ // if the loading indicator says we're done, and the textbox was cleared
+ // due to the refresh
+ Browser.Equal("False", () => Browser.FindElement(By.Id("loading-indicator")).Text);
+ Browser.Equal("", () => Browser.FindElement(By.Id("some-text")).GetAttribute("value"));
+
+ // Checking that the history entry was not pushed
+ Browser.Navigate().Back();
+ Browser.Equal(startUrl, () => Browser.Url);
+ }
 
  // 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.

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

@@ -0,0 +1,41 @@
+@page "/forms/form-that-calls-navigation-manager-refresh-streaming"
+@using Microsoft.AspNetCore.Components.Forms
+@attribute [StreamRendering]
+@inject NavigationManager Nav
+
+<h3>Form That Calls NavigationManager.Refresh() with streaming</h3>
+
+<form data-enhance @onsubmit="@RefreshAfterDelayAsync" @formname="form-refresh" method="post">
+ <AntiforgeryToken />
+ <input id="some-text" name="SomeText" value="@SomeText" />
+ <button id="submit-button">Submit</button>
+</form>
+
+<p>Loading: <span id="loading-indicator">@loading</span></p>
+
+@if (missingText)
+{
+ <p>Enter some text, so you can see it go back to blank after the refresh happened.</p>
+}
+
+@code {
+ [SupplyParameterFromForm]
+ public string SomeText { get; set; }
+
+ bool loading;
+ bool missingText;
+
+ async Task RefreshAfterDelayAsync()
+ {
+ if (string.IsNullOrEmpty(SomeText))
+ {
+ missingText = true;
+ }
+ else
+ {
+ loading = true;
+ await Task.Delay(1000);
+ Nav.Refresh();
+ }
+ }
+}