phoenix_live_view 0.19.4 → 0.20.0

package/assets/js/phoenix_live_view/dom.js

@@ -48,6 +48,8 @@ let DOM = {
 
   isUploadInput(el){ return el.type === "file" && el.getAttribute(PHX_UPLOAD_REF) !== null },
 
+  isAutoUpload(inputEl){ return inputEl.hasAttribute("data-phx-auto-upload") },
+
   findUploadInputs(node){ return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`) },
 
   findComponentNodeList(node, cid){
@@ -66,7 +68,16 @@ let DOM = {
   },
 
   isUnloadableFormSubmit(e){
-    return !e.defaultPrevented && !this.wantsNewTab(e)
+    // Ignore form submissions intended to close a native <dialog> element
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes
+    let isDialogSubmit = (e.target && e.target.getAttribute("method") === "dialog") ||
+      (e.submitter && e.submitter.getAttribute("formmethod") === "dialog")
+
+    if(isDialogSubmit){
+      return false
+    } else {
+      return !e.defaultPrevented && !this.wantsNewTab(e)
+    }
   },
 
   isNewPageClick(e, currentLocation){
@@ -75,6 +86,7 @@ let DOM = {
 
     if(e.defaultPrevented || href === null || this.wantsNewTab(e)){ return false }
     if(href.startsWith("mailto:") || href.startsWith("tel:")){ return false }
+    if(e.target.isContentEditable){ return false }
 
     try {
       url = new URL(href)

package/assets/js/phoenix_live_view/dom_patch.js

@@ -110,7 +110,9 @@ export default class DOMPatch {
         })
         if(reset !== undefined){
           DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
-            this.removeStreamChildElement(child)
+            if(!inserts[child.id]){
+              this.removeStreamChildElement(child)
+            }
           })
         }
         deleteIds.forEach(id => {
@@ -284,7 +286,9 @@ export default class DOMPatch {
 
     if(externalFormTriggered){
       liveSocket.unload()
-      externalFormTriggered.submit()
+      // use prototype's submit in case there's a form control with name or id of "submit"
+      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
+      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered)
     }
     return true
   }

package/assets/js/phoenix_live_view/js.js

@@ -194,12 +194,19 @@ let JS = {
   },
 
   addOrRemoveClasses(el, adds, removes, transition, time, view){
-    let [transition_run, transition_start, transition_end] = transition || [[], [], []]
-    if(transition_run.length > 0){
-      let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(transition_run), [])
-      let onDone = () => this.addOrRemoveClasses(el, adds.concat(transition_end), removes.concat(transition_run).concat(transition_start))
+    let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []]
+    if(transitionRun.length > 0){
+      let onStart = () => {
+        this.addOrRemoveClasses(el, transitionStart, [].concat(transitionRun).concat(transitionEnd))
+        window.requestAnimationFrame(() => {
+          this.addOrRemoveClasses(el, transitionRun, [])
+          window.requestAnimationFrame(() => this.addOrRemoveClasses(el, transitionEnd, transitionStart))
+        })
+      }
+      let onDone = () => this.addOrRemoveClasses(el, adds.concat(transitionEnd), removes.concat(transitionRun).concat(transitionStart))
       return view.transition(time, onStart, onDone)
     }
+
     window.requestAnimationFrame(() => {
       let [prevAdds, prevRemoves] = DOM.getSticky(el, "classes", [[], []])
       let keepAdds = adds.filter(name => prevAdds.indexOf(name) < 0 && !el.classList.contains(name))
@@ -244,4 +251,4 @@ let JS = {
   }
 }
 
-export default JS
+export default JS

package/assets/js/phoenix_live_view/live_socket.js

@@ -407,7 +407,7 @@ export default class LiveSocket {
           DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
           this.outgoingMainEl.replaceWith(newMainEl)
           this.outgoingMainEl = null
-          callback && requestAnimationFrame(callback)
+          callback && requestAnimationFrame(() => callback(linkRef))
           onDone()
         })
       }
@@ -684,6 +684,7 @@ export default class LiveSocket {
       let {type, id, root, scroll} = event.state || {}
       let href = window.location.href
 
+      DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: type === "patch", pop: true}})
       this.requestDOMUpdate(() => {
         if(this.main.isConnected() && (type === "patch" && id === this.main.id)){
           this.main.pushLinkPatch(href, null, () => {
@@ -761,6 +762,7 @@ export default class LiveSocket {
     if(!this.commitPendingLink(linkRef)){ return }
 
     Browser.pushState(linkState, {type: "patch", id: this.main.id}, href)
+    DOM.dispatchEvent(window, "phx:navigate", {detail: {patch: true, href, pop: false}})
     this.registerNewLocation(window.location)
   }
 
@@ -773,9 +775,12 @@ export default class LiveSocket {
     }
     let scroll = window.scrollY
     this.withPageLoading({to: href, kind: "redirect"}, done => {
-      this.replaceMain(href, flash, () => {
-        Browser.pushState(linkState, {type: "redirect", id: this.main.id, scroll: scroll}, href)
-        this.registerNewLocation(window.location)
+      this.replaceMain(href, flash, (linkRef) => {
+        if(linkRef === this.linkRef){
+          Browser.pushState(linkState, {type: "redirect", id: this.main.id, scroll: scroll}, href)
+          DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: false, pop: false}})
+          this.registerNewLocation(window.location)
+        }
         done()
       })
     })
@@ -844,8 +849,10 @@ export default class LiveSocket {
         let currentIterations = iterations
         iterations++
         let {at: at, type: lastType} = DOM.private(input, "prev-iteration") || {}
-        // detect dup because some browsers dispatch both "input" and "change"
-        if(at === currentIterations - 1 && type !== lastType){ return }
+        // Browsers should always fire at least one "input" event before every "change"
+        // Ignore "change" events, unless there was no prior "input" event.
+        // This could happen if user code triggers a "change" event, or if the browser is non-conforming.
+        if(at === currentIterations - 1 && type === "change" && lastType === "input"){ return }
 
         DOM.putPrivate(input, "prev-iteration", {at: currentIterations, type: type})
 

package/assets/js/phoenix_live_view/live_uploader.js

@@ -120,6 +120,7 @@ export default class LiveUploader {
       })
 
     let groupedEntries = this._entries.reduce((acc, entry) => {
+      if(!entry.meta){ return acc }
       let {name, callback} = entry.uploader(liveSocket.uploaders)
       acc[name] = acc[name] || {callback: callback, entries: []}
       acc[name].entries.push(entry)

package/assets/js/phoenix_live_view/rendered.js

@@ -136,7 +136,7 @@ export default class Rendered {
   }
 
   componentToString(cid){
-    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid)
+    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null, false)
     return [str, streams]
   }
 
@@ -186,6 +186,7 @@ export default class Rendered {
 
     if(stream !== undefined && (rendered[DYNAMICS].length > 0 || deleteIds.length > 0 || reset)){
       delete rendered[STREAM]
+      rendered[DYNAMICS] = []
       output.streams.add(stream)
     }
   }
@@ -202,7 +203,7 @@ export default class Rendered {
     }
   }
 
-  recursiveCIDToString(components, cid, onlyCids){
+  recursiveCIDToString(components, cid, onlyCids, allowRootComments = true){
     let component = components[cid] || logError(`no component for CID ${cid}`, components)
     let template = document.createElement("template")
     let [html, streams] = this.recursiveToString(component, components, onlyCids)
@@ -223,6 +224,11 @@ export default class Rendered {
             child.innerHTML = ""
           }
           return [true, hasComponents]
+        } else if(child.nodeType === Node.COMMENT_NODE){
+          // we have to strip root comments when rendering a component directly
+          // for patching because the morphdom target must be exactly the root entrypoint
+          if(!allowRootComments){ child.remove() }
+          return [hasNodes, hasComponents]
         } else {
           if(child.nodeValue.trim() !== ""){
             logError("only HTML element tags are allowed at the root of components.\n\n" +
@@ -256,4 +262,4 @@ export default class Rendered {
     span.setAttribute(PHX_COMPONENT, cid)
     return span
   }
-}
+}

package/assets/js/phoenix_live_view/upload_entry.js

@@ -10,6 +10,7 @@ import {
 } from "./utils"
 
 import LiveUploader from "./live_uploader"
+import DOM from "./dom"
 
 export default class UploadEntry {
   static isActive(fileEl, file){
@@ -71,7 +72,7 @@ export default class UploadEntry {
   error(reason = "failed"){
     this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated)
     this.view.pushFileProgress(this.fileEl, this.ref, {error: reason})
-    LiveUploader.clearFiles(this.fileEl)
+    if(!DOM.isAutoUpload(this.fileEl)){ LiveUploader.clearFiles(this.fileEl) }
   }
 
   //private

package/assets/js/phoenix_live_view/view.js

@@ -656,10 +656,12 @@ export default class View {
   onJoinError(resp){
     if(resp.reason === "reload"){
       this.log("error", () => [`failed mount with ${resp.status}. Falling back to page request`, resp])
-      return this.onRedirect({to: this.href})
+      if(this.isMain()){ this.onRedirect({to: this.href}) }
+      return
     } else if(resp.reason === "unauthorized" || resp.reason === "stale"){
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp])
-      return this.onRedirect({to: this.href})
+      if(this.isMain()){ this.onRedirect({to: this.href}) }
+      return
     }
     if(resp.redirect || resp.live_redirect){
       this.joinPending = false
@@ -911,7 +913,7 @@ export default class View {
     }
     this.pushWithReply(refGenerator, "event", event, resp => {
       DOM.showError(inputEl, this.liveSocket.binding(PHX_FEEDBACK_FOR))
-      if(DOM.isUploadInput(inputEl) && inputEl.getAttribute("data-phx-auto-upload") !== null){
+      if(DOM.isUploadInput(inputEl) && DOM.isAutoUpload(inputEl)){
         if(LiveUploader.filesAwaitingPreflight(inputEl).length > 0){
           let [ref, _els] = refGenerator()
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
@@ -1073,7 +1075,10 @@ export default class View {
       let inputs = Array.from(form.elements).filter(el => DOM.isFormInput(el) && el.name && !el.hasAttribute(phxChange))
       if(inputs.length === 0){ return }
 
-      let input = inputs.find(el => el.type !== "hidden") || input[0]
+      // we must clear tracked uploads before recovery as they no longer have valid refs
+      inputs.forEach(input => input.hasAttribute(PHX_UPLOAD_REF) && LiveUploader.clearFiles(input))
+      let input = inputs.find(el => el.type !== "hidden") || inputs[0]
+
       let phxEvent = form.getAttribute(this.binding(PHX_AUTO_RECOVER)) || form.getAttribute(this.binding("change"))
       JS.exec("change", phxEvent, view, input, ["push", {_target: input.name, newCid: newCid, callback: callback}])
     })
@@ -1083,8 +1088,9 @@ export default class View {
     let linkRef = this.liveSocket.setPendingLink(href)
     let refGen = targetEl ? () => this.putRef([targetEl], "click") : null
     let fallback = () => this.liveSocket.redirect(window.location.href)
+    let url = href.startsWith("/") ? `${location.protocol}//${location.host}${href}` : href
 
-    let push = this.pushWithReply(refGen, "live_patch", {url: href}, resp => {
+    let push = this.pushWithReply(refGen, "live_patch", {url}, resp => {
       this.liveSocket.requestDOMUpdate(() => {
         if(resp.link_redirect){
           this.liveSocket.replaceMain(href, null, callback, linkRef)
@@ -1118,7 +1124,10 @@ export default class View {
         .filter(form => form.elements.length > 0)
         .filter(form => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore")
         .map(form => {
-          let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${form.getAttribute(phxChange)}"]`)
+          // attribute given via JS module needs to be escaped as it contains the symbols []",
+          // which result in an invalid css selector otherwise.
+          const phxChangeValue = form.getAttribute(phxChange).replaceAll(/([\[\]"])/g, '\\$1')
+          let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${phxChangeValue}"]`)
           if(newForm){
             return [form, newForm, this.targetComponentID(newForm)]
           } else {

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.19.4",
+  "version": "0.20.0",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.19.4",
+  "version": "0.20.0",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

package/priv/static/phoenix_live_view.cjs.js

@@ -304,6 +304,9 @@ var DOM = {
   isUploadInput(el) {
     return el.type === "file" && el.getAttribute(PHX_UPLOAD_REF) !== null;
   },
+  isAutoUpload(inputEl) {
+    return inputEl.hasAttribute("data-phx-auto-upload");
+  },
   findUploadInputs(node) {
     return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`);
   },
@@ -320,7 +323,12 @@ var DOM = {
     return wantsNewTab || isTargetBlank || isDownload;
   },
   isUnloadableFormSubmit(e) {
-    return !e.defaultPrevented && !this.wantsNewTab(e);
+    let isDialogSubmit = e.target && e.target.getAttribute("method") === "dialog" || e.submitter && e.submitter.getAttribute("formmethod") === "dialog";
+    if (isDialogSubmit) {
+      return false;
+    } else {
+      return !e.defaultPrevented && !this.wantsNewTab(e);
+    }
   },
   isNewPageClick(e, currentLocation) {
     let href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute("href") : null;
@@ -331,6 +339,9 @@ var DOM = {
     if (href.startsWith("mailto:") || href.startsWith("tel:")) {
       return false;
     }
+    if (e.target.isContentEditable) {
+      return false;
+    }
     try {
       url = new URL(href);
     } catch (e2) {
@@ -793,7 +804,9 @@ var UploadEntry = class {
   error(reason = "failed") {
     this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
     this.view.pushFileProgress(this.fileEl, this.ref, { error: reason });
-    LiveUploader.clearFiles(this.fileEl);
+    if (!dom_default.isAutoUpload(this.fileEl)) {
+      LiveUploader.clearFiles(this.fileEl);
+    }
   }
   onDone(callback) {
     this._onDone = () => {
@@ -930,6 +943,9 @@ var LiveUploader = class {
       return entry;
     });
     let groupedEntries = this._entries.reduce((acc, entry) => {
+      if (!entry.meta) {
+        return acc;
+      }
       let { name, callback } = entry.uploader(liveSocket.uploaders);
       acc[name] = acc[name] || { callback, entries: [] };
       acc[name].entries.push(entry);
@@ -1767,7 +1783,9 @@ var DOMPatch = class {
         });
         if (reset !== void 0) {
           dom_default.all(container, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
-            this.removeStreamChildElement(child);
+            if (!inserts[child.id]) {
+              this.removeStreamChildElement(child);
+            }
           });
         }
         deleteIds.forEach((id) => {
@@ -1940,7 +1958,7 @@ var DOMPatch = class {
     this.transitionPendingRemoves();
     if (externalFormTriggered) {
       liveSocket.unload();
-      externalFormTriggered.submit();
+      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered);
     }
     return true;
   }
@@ -2162,7 +2180,7 @@ var Rendered = class {
     return merged;
   }
   componentToString(cid) {
-    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid);
+    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null, false);
     return [str, streams];
   }
   pruneCIDs(cids) {
@@ -2208,6 +2226,7 @@ var Rendered = class {
     }
     if (stream !== void 0 && (rendered[DYNAMICS].length > 0 || deleteIds.length > 0 || reset)) {
       delete rendered[STREAM];
+      rendered[DYNAMICS] = [];
       output.streams.add(stream);
     }
   }
@@ -2222,7 +2241,7 @@ var Rendered = class {
       output.buffer += rendered;
     }
   }
-  recursiveCIDToString(components, cid, onlyCids) {
+  recursiveCIDToString(components, cid, onlyCids, allowRootComments = true) {
     let component = components[cid] || logError(`no component for CID ${cid}`, components);
     let template = document.createElement("template");
     let [html, streams] = this.recursiveToString(component, components, onlyCids);
@@ -2243,6 +2262,11 @@ var Rendered = class {
           child.innerHTML = "";
         }
         return [true, hasComponents];
+      } else if (child.nodeType === Node.COMMENT_NODE) {
+        if (!allowRootComments) {
+          child.remove();
+        }
+        return [hasNodes, hasComponents];
       } else {
         if (child.nodeValue.trim() !== "") {
           logError(`only HTML element tags are allowed at the root of components.
@@ -2522,10 +2546,16 @@ var JS = {
     }
   },
   addOrRemoveClasses(el, adds, removes, transition, time, view) {
-    let [transition_run, transition_start, transition_end] = transition || [[], [], []];
-    if (transition_run.length > 0) {
-      let onStart = () => this.addOrRemoveClasses(el, transition_start.concat(transition_run), []);
-      let onDone = () => this.addOrRemoveClasses(el, adds.concat(transition_end), removes.concat(transition_run).concat(transition_start));
+    let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []];
+    if (transitionRun.length > 0) {
+      let onStart = () => {
+        this.addOrRemoveClasses(el, transitionStart, [].concat(transitionRun).concat(transitionEnd));
+        window.requestAnimationFrame(() => {
+          this.addOrRemoveClasses(el, transitionRun, []);
+          window.requestAnimationFrame(() => this.addOrRemoveClasses(el, transitionEnd, transitionStart));
+        });
+      };
+      let onDone = () => this.addOrRemoveClasses(el, adds.concat(transitionEnd), removes.concat(transitionRun).concat(transitionStart));
       return view.transition(time, onStart, onDone);
     }
     window.requestAnimationFrame(() => {
@@ -3126,10 +3156,16 @@ var View = class {
   onJoinError(resp) {
     if (resp.reason === "reload") {
       this.log("error", () => [`failed mount with ${resp.status}. Falling back to page request`, resp]);
-      return this.onRedirect({ to: this.href });
+      if (this.isMain()) {
+        this.onRedirect({ to: this.href });
+      }
+      return;
     } else if (resp.reason === "unauthorized" || resp.reason === "stale") {
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp]);
-      return this.onRedirect({ to: this.href });
+      if (this.isMain()) {
+        this.onRedirect({ to: this.href });
+      }
+      return;
     }
     if (resp.redirect || resp.live_redirect) {
       this.joinPending = false;
@@ -3402,7 +3438,7 @@ var View = class {
     };
     this.pushWithReply(refGenerator, "event", event, (resp) => {
       dom_default.showError(inputEl, this.liveSocket.binding(PHX_FEEDBACK_FOR));
-      if (dom_default.isUploadInput(inputEl) && inputEl.getAttribute("data-phx-auto-upload") !== null) {
+      if (dom_default.isUploadInput(inputEl) && dom_default.isAutoUpload(inputEl)) {
         if (LiveUploader.filesAwaitingPreflight(inputEl).length > 0) {
           let [ref, _els] = refGenerator();
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
@@ -3557,7 +3593,8 @@ var View = class {
       if (inputs.length === 0) {
         return;
       }
-      let input = inputs.find((el) => el.type !== "hidden") || input[0];
+      inputs.forEach((input2) => input2.hasAttribute(PHX_UPLOAD_REF) && LiveUploader.clearFiles(input2));
+      let input = inputs.find((el) => el.type !== "hidden") || inputs[0];
       let phxEvent = form.getAttribute(this.binding(PHX_AUTO_RECOVER)) || form.getAttribute(this.binding("change"));
       js_default.exec("change", phxEvent, view, input, ["push", { _target: input.name, newCid, callback }]);
     });
@@ -3566,7 +3603,8 @@ var View = class {
     let linkRef = this.liveSocket.setPendingLink(href);
     let refGen = targetEl ? () => this.putRef([targetEl], "click") : null;
     let fallback = () => this.liveSocket.redirect(window.location.href);
-    let push = this.pushWithReply(refGen, "live_patch", { url: href }, (resp) => {
+    let url = href.startsWith("/") ? `${location.protocol}//${location.host}${href}` : href;
+    let push = this.pushWithReply(refGen, "live_patch", { url }, (resp) => {
       this.liveSocket.requestDOMUpdate(() => {
         if (resp.link_redirect) {
           this.liveSocket.replaceMain(href, null, callback, linkRef);
@@ -3593,7 +3631,8 @@ var View = class {
     let template = document.createElement("template");
     template.innerHTML = html;
     return dom_default.all(this.el, `form[${phxChange}]`).filter((form) => form.id && this.ownsElement(form)).filter((form) => form.elements.length > 0).filter((form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore").map((form) => {
-      let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${form.getAttribute(phxChange)}"]`);
+      const phxChangeValue = form.getAttribute(phxChange).replaceAll(/([\[\]"])/g, "\\$1");
+      let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${phxChangeValue}"]`);
       if (newForm) {
         return [form, newForm, this.targetComponentID(newForm)];
       } else {
@@ -3936,7 +3975,7 @@ var LiveSocket = class {
           dom_default.findPhxSticky(document).forEach((el) => newMainEl.appendChild(el));
           this.outgoingMainEl.replaceWith(newMainEl);
           this.outgoingMainEl = null;
-          callback && requestAnimationFrame(callback);
+          callback && requestAnimationFrame(() => callback(linkRef));
           onDone();
         });
       }
@@ -4218,6 +4257,7 @@ var LiveSocket = class {
       }
       let { type, id, root, scroll } = event.state || {};
       let href = window.location.href;
+      dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: type === "patch", pop: true } });
       this.requestDOMUpdate(() => {
         if (this.main.isConnected() && (type === "patch" && id === this.main.id)) {
           this.main.pushLinkPatch(href, null, () => {
@@ -4295,6 +4335,7 @@ var LiveSocket = class {
       return;
     }
     browser_default.pushState(linkState, { type: "patch", id: this.main.id }, href);
+    dom_default.dispatchEvent(window, "phx:navigate", { detail: { patch: true, href, pop: false } });
     this.registerNewLocation(window.location);
   }
   historyRedirect(href, linkState, flash) {
@@ -4307,9 +4348,12 @@ var LiveSocket = class {
     }
     let scroll = window.scrollY;
     this.withPageLoading({ to: href, kind: "redirect" }, (done) => {
-      this.replaceMain(href, flash, () => {
-        browser_default.pushState(linkState, { type: "redirect", id: this.main.id, scroll }, href);
-        this.registerNewLocation(window.location);
+      this.replaceMain(href, flash, (linkRef) => {
+        if (linkRef === this.linkRef) {
+          browser_default.pushState(linkState, { type: "redirect", id: this.main.id, scroll }, href);
+          dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: false, pop: false } });
+          this.registerNewLocation(window.location);
+        }
         done();
       });
     });
@@ -4377,7 +4421,7 @@ var LiveSocket = class {
         let currentIterations = iterations;
         iterations++;
         let { at, type: lastType } = dom_default.private(input, "prev-iteration") || {};
-        if (at === currentIterations - 1 && type !== lastType) {
+        if (at === currentIterations - 1 && type === "change" && lastType === "input") {
           return;
         }
         dom_default.putPrivate(input, "prev-iteration", { at: currentIterations, type });