phoenix_live_view 1.0.3 → 1.0.4

package/assets/js/phoenix_live_view/dom_patch.js

@@ -433,7 +433,7 @@ export default class DOMPatch {
   transitionPendingRemoves(){
     let {pendingRemoves, liveSocket} = this
     if(pendingRemoves.length > 0){
-      liveSocket.transitionRemoves(pendingRemoves, false, () => {
+      liveSocket.transitionRemoves(pendingRemoves, () => {
         pendingRemoves.forEach(el => {
           let child = DOM.firstPhxChild(el)
           if(child){ liveSocket.destroyViewByEl(child) }

package/assets/js/phoenix_live_view/hooks.js

@@ -67,9 +67,12 @@ let Hooks = {
           ARIA.focusFirst(this.el)
         }
       })
-      this.el.addEventListener("phx:show-end", () => this.el.focus())
-      if(window.getComputedStyle(this.el).display !== "none"){
-        ARIA.focusFirst(this.el)
+      // only try to change the focus if it is not already inside
+      if(!this.el.contains(document.activeElement)){
+        this.el.addEventListener("phx:show-end", () => this.el.focus())
+        if(window.getComputedStyle(this.el).display !== "none"){
+          ARIA.focusFirst(this.el)
+        }
       }
     }
   }

package/assets/js/phoenix_live_view/js.js

@@ -97,11 +97,11 @@ let JS = {
   },
 
   exec_focus(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.attemptFocus(el))
+    ARIA.attemptFocus(el)
   },
 
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el))
+    ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el)
   },
 
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el){
@@ -219,18 +219,14 @@ let JS = {
       }
     } else {
       if(this.isVisible(el)){
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:hide-start"))
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
-          el.dispatchEvent(new Event("phx:hide-end"))
-        })
+        el.dispatchEvent(new Event("phx:hide-start"))
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
+        el.dispatchEvent(new Event("phx:hide-end"))
       } else {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:show-start"))
-          let stickyDisplay = display || this.defaultDisplay(el)
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
-          el.dispatchEvent(new Event("phx:show-end"))
-        })
+        el.dispatchEvent(new Event("phx:show-start"))
+        let stickyDisplay = display || this.defaultDisplay(el)
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
+        el.dispatchEvent(new Event("phx:show-end"))
       }
     }
   },

package/assets/js/phoenix_live_view/live_socket.js

@@ -393,22 +393,26 @@ export default class LiveSocket {
   }
 
   replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)){
-    let liveReferer = this.currentLocation.href
+    const liveReferer = this.currentLocation.href
     this.outgoingMainEl = this.outgoingMainEl || this.main.el
-    let removeEls = DOM.all(this.outgoingMainEl, `[${this.binding("remove")}]`)
-    let newMainEl = DOM.cloneNode(this.outgoingMainEl, "")
+
+    const stickies = DOM.findPhxSticky(document) || []
+    const removeEls = DOM.all(this.outgoingMainEl, `[${this.binding("remove")}]`)
+      .filter(el => !DOM.isChildOfAny(el, stickies))
+
+    const newMainEl = DOM.cloneNode(this.outgoingMainEl, "")
     this.main.showLoader(this.loaderTimeout)
     this.main.destroy()
 
     this.main = this.newRootView(newMainEl, flash, liveReferer)
     this.main.setRedirect(href)
-    this.transitionRemoves(removeEls, true)
+    this.transitionRemoves(removeEls)
     this.main.join((joinCount, onDone) => {
       if(joinCount === 1 && this.commitPendingLink(linkRef)){
         this.requestDOMUpdate(() => {
           // remove phx-remove els right before we replace the main element
           removeEls.forEach(el => el.remove())
-          DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
+          stickies.forEach(el => newMainEl.appendChild(el))
           this.outgoingMainEl.replaceWith(newMainEl)
           this.outgoingMainEl = null
           callback && callback(linkRef)
@@ -418,12 +422,8 @@ export default class LiveSocket {
     })
   }
 
-  transitionRemoves(elements, skipSticky, callback){
+  transitionRemoves(elements, callback){
     let removeAttr = this.binding("remove")
-    if(skipSticky){
-      const stickies = DOM.findPhxSticky(document) || []
-      elements = elements.filter(el => !DOM.isChildOfAny(el, stickies))
-    }
     let silenceEvents = (e) => {
       e.preventDefault()
       e.stopImmediatePropagation()
@@ -800,7 +800,8 @@ export default class LiveSocket {
   }
 
   historyRedirect(e, href, linkState, flash, targetEl){
-    if(targetEl && e.isTrusted && e.type !== "popstate"){ targetEl.classList.add("phx-click-loading") }
+    const clickLoading = targetEl && e.isTrusted && e.type !== "popstate"
+    if(clickLoading){ targetEl.classList.add("phx-click-loading") }
     if(!this.isConnected() || !this.main.isMain()){ return Browser.redirect(href, flash) }
 
     // convert to full href if only path prefix
@@ -829,6 +830,9 @@ export default class LiveSocket {
           DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: false, pop: false, direction: "forward"}})
           this.registerNewLocation(window.location)
         }
+        // explicitly undo click-loading class
+        // (in case it originated in a sticky live view, otherwise it would be removed anyway)
+        if(clickLoading){ targetEl.classList.remove("phx-click-loading") }
         done()
       })
     })

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -1166,9 +1166,11 @@ var Hooks = {
           aria_default.focusFirst(this.el);
         }
       });
-      this.el.addEventListener("phx:show-end", () => this.el.focus());
-      if (window.getComputedStyle(this.el).display !== "none") {
-        aria_default.focusFirst(this.el);
+      if (!this.el.contains(document.activeElement)) {
+        this.el.addEventListener("phx:show-end", () => this.el.focus());
+        if (window.getComputedStyle(this.el).display !== "none") {
+          aria_default.focusFirst(this.el);
+        }
       }
     }
   }
@@ -1466,7 +1468,7 @@ var DOMPostMorphRestorer = class {
   }
 };
 
-// node_modules/morphdom/dist/morphdom-esm.js
+// ../node_modules/morphdom/dist/morphdom-esm.js
 var DOCUMENT_FRAGMENT_NODE = 11;
 function morphAttrs(fromNode, toNode) {
   var toNodeAttrs = toNode.attributes;
@@ -2343,7 +2345,7 @@ var DOMPatch = class {
   transitionPendingRemoves() {
     let { pendingRemoves, liveSocket } = this;
     if (pendingRemoves.length > 0) {
-      liveSocket.transitionRemoves(pendingRemoves, false, () => {
+      liveSocket.transitionRemoves(pendingRemoves, () => {
         pendingRemoves.forEach((el) => {
           let child = dom_default.firstPhxChild(el);
           if (child) {
@@ -2803,10 +2805,10 @@ var JS = {
     view.liveSocket.pushHistoryPatch(e, href, replace ? "replace" : "push", sourceEl);
   },
   exec_focus(e, eventType, phxEvent, view, sourceEl, el) {
-    window.requestAnimationFrame(() => aria_default.attemptFocus(el));
+    aria_default.attemptFocus(el);
   },
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el) {
-    window.requestAnimationFrame(() => aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el));
+    aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el);
   },
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el) {
     window.requestAnimationFrame(() => focusStack.push(el || sourceEl));
@@ -2912,18 +2914,14 @@ var JS = {
       }
     } else {
       if (this.isVisible(el)) {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:hide-start"));
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = "none");
-          el.dispatchEvent(new Event("phx:hide-end"));
-        });
+        el.dispatchEvent(new Event("phx:hide-start"));
+        dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = "none");
+        el.dispatchEvent(new Event("phx:hide-end"));
       } else {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:show-start"));
-          let stickyDisplay = display || this.defaultDisplay(el);
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
-          el.dispatchEvent(new Event("phx:show-end"));
-        });
+        el.dispatchEvent(new Event("phx:show-start"));
+        let stickyDisplay = display || this.defaultDisplay(el);
+        dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
+        el.dispatchEvent(new Event("phx:show-end"));
       }
     }
   },
@@ -4767,7 +4765,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.3";
+    return "1.0.4";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -4984,20 +4982,21 @@ var LiveSocket = class {
     browser_default.redirect(to, flash);
   }
   replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)) {
-    let liveReferer = this.currentLocation.href;
+    const liveReferer = this.currentLocation.href;
     this.outgoingMainEl = this.outgoingMainEl || this.main.el;
-    let removeEls = dom_default.all(this.outgoingMainEl, `[${this.binding("remove")}]`);
-    let newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
+    const stickies = dom_default.findPhxSticky(document) || [];
+    const removeEls = dom_default.all(this.outgoingMainEl, `[${this.binding("remove")}]`).filter((el) => !dom_default.isChildOfAny(el, stickies));
+    const newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
     this.main.showLoader(this.loaderTimeout);
     this.main.destroy();
     this.main = this.newRootView(newMainEl, flash, liveReferer);
     this.main.setRedirect(href);
-    this.transitionRemoves(removeEls, true);
+    this.transitionRemoves(removeEls);
     this.main.join((joinCount, onDone) => {
       if (joinCount === 1 && this.commitPendingLink(linkRef)) {
         this.requestDOMUpdate(() => {
           removeEls.forEach((el) => el.remove());
-          dom_default.findPhxSticky(document).forEach((el) => newMainEl.appendChild(el));
+          stickies.forEach((el) => newMainEl.appendChild(el));
           this.outgoingMainEl.replaceWith(newMainEl);
           this.outgoingMainEl = null;
           callback && callback(linkRef);
@@ -5006,12 +5005,8 @@ var LiveSocket = class {
       }
     });
   }
-  transitionRemoves(elements, skipSticky, callback) {
+  transitionRemoves(elements, callback) {
     let removeAttr = this.binding("remove");
-    if (skipSticky) {
-      const stickies = dom_default.findPhxSticky(document) || [];
-      elements = elements.filter((el) => !dom_default.isChildOfAny(el, stickies));
-    }
     let silenceEvents = (e) => {
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -5371,7 +5366,8 @@ var LiveSocket = class {
     this.registerNewLocation(window.location);
   }
   historyRedirect(e, href, linkState, flash, targetEl) {
-    if (targetEl && e.isTrusted && e.type !== "popstate") {
+    const clickLoading = targetEl && e.isTrusted && e.type !== "popstate";
+    if (clickLoading) {
       targetEl.classList.add("phx-click-loading");
     }
     if (!this.isConnected() || !this.main.isMain()) {
@@ -5397,6 +5393,9 @@ var LiveSocket = class {
           dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: false, pop: false, direction: "forward" } });
           this.registerNewLocation(window.location);
         }
+        if (clickLoading) {
+          targetEl.classList.remove("phx-click-loading");
+        }
         done();
       });
     });