phoenix_live_view 1.0.4 → 1.0.6

package/assets/js/phoenix_live_view/constants.js

@@ -67,6 +67,7 @@ export const PHX_RELOAD_STATUS = "__phoenix_reload_status__"
 export const LOADER_TIMEOUT = 1
 export const MAX_CHILD_JOIN_ATTEMPTS = 3
 export const BEFORE_UNLOAD_LOADER_TIMEOUT = 200
+export const DISCONNECTED_TIMEOUT = 500
 export const BINDING_PREFIX = "phx-"
 export const PUSH_TIMEOUT = 30000
 export const LINK_HEADER = "x-requested-with"

package/assets/js/phoenix_live_view/dom.js

@@ -234,10 +234,11 @@ let DOM = {
       case null: return callback()
 
       case "blur":
+        this.incCycle(el, "debounce-blur-cycle", () => {
+          if(asyncFilter()){ callback() }
+        })
         if(this.once(el, "debounce-blur")){
-          el.addEventListener("blur", () => {
-            if(asyncFilter()){ callback() }
-          })
+          el.addEventListener("blur", () => this.triggerCycle(el, "debounce-blur-cycle"))
         }
         return
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -245,7 +245,11 @@ export default class DOMPatch {
             return false
           }
 
-          // input handling
+          // if we are undoing a lock, copy potentially nested clones over
+          if(this.undoRef && DOM.private(toEl, PHX_REF_LOCK)){
+            DOM.putPrivate(fromEl, PHX_REF_LOCK, DOM.private(toEl, PHX_REF_LOCK))
+          }
+          // now copy regular DOM.private data
           DOM.copyPrivates(toEl, fromEl)
 
           // skip patching focused inputs unless focus is a select that has changed options
@@ -295,14 +299,8 @@ export default class DOMPatch {
       // clear stream items from the dead render if they are not inserted again
       if(isJoinPatch){
         DOM.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, el => {
-          // make sure to only remove elements owned by the current view
-          // see https://github.com/phoenixframework/phoenix_live_view/issues/3047
-          this.liveSocket.owner(el, (view) => {
-            if(view === this.view){
-              Array.from(el.children).forEach(child => {
-                this.removeStreamChildElement(child)
-              })
-            }
+          Array.from(el.children).forEach(child => {
+            this.removeStreamChildElement(child)
           })
         })
       }
@@ -359,6 +357,11 @@ export default class DOMPatch {
   }
 
   removeStreamChildElement(child){
+    // make sure to only remove elements owned by the current view
+    // see https://github.com/phoenixframework/phoenix_live_view/issues/3047
+    // and https://github.com/phoenixframework/phoenix_live_view/issues/3681
+    if(!this.view.ownsElement(child)){ return }
+
     // we need to store the node if it is actually re-added in the same patch
     // we do NOT want to execute phx-remove, we do NOT want to call onNodeDiscarded
     if(this.streamInserts[child.id]){

package/assets/js/phoenix_live_view/hooks.js

@@ -67,12 +67,9 @@ let Hooks = {
           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)
-        }
+      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

@@ -46,12 +46,9 @@ let JS = {
   // commands
 
   exec_exec(e, eventType, phxEvent, view, sourceEl, el, {attr, to}){
-    let nodes = to ? DOM.all(document, to) : [sourceEl]
-    nodes.forEach(node => {
-      let encodedJS = node.getAttribute(attr)
-      if(!encodedJS){ throw new Error(`expected ${attr} to contain JS command on "${to}"`) }
-      view.liveSocket.execJS(node, encodedJS, eventType)
-    })
+    let encodedJS = el.getAttribute(attr)
+    if(!encodedJS){ throw new Error(`expected ${attr} to contain JS command on "${to}"`) }
+    view.liveSocket.execJS(el, encodedJS, eventType)
   },
 
   exec_dispatch(e, eventType, phxEvent, view, sourceEl, el, {event, detail, bubbles}){
@@ -98,21 +95,35 @@ let JS = {
 
   exec_focus(e, eventType, phxEvent, view, sourceEl, el){
     ARIA.attemptFocus(el)
+    // in case the JS.focus command is in a JS.show/hide/toggle chain, for show we need
+    // to wait for JS.show to have updated the element's display property (see exec_toggle)
+    // but that run in nested animation frames, therefore we need to use them here as well
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => ARIA.attemptFocus(el))
+    })
   },
 
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el){
     ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el)
+    // if you wonder about the nested animation frames, see exec_focus
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el))
+    })
   },
 
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => focusStack.push(el || sourceEl))
+    focusStack.push(el || sourceEl)
   },
 
   exec_pop_focus(_e, _eventType, _phxEvent, _view, _sourceEl, _el){
-    window.requestAnimationFrame(() => {
-      const el = focusStack.pop()
-      if(el){ el.focus() }
-    })
+    const el = focusStack.pop()
+    if(el){
+      el.focus()
+      // if you wonder about the nested animation frames, see exec_focus
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => el.focus())
+      })
+    }
   },
 
   exec_add_class(e, eventType, phxEvent, view, sourceEl, el, {names, transition, time, blocking}){
@@ -198,11 +209,19 @@ let JS = {
         if(eventType === "remove"){ return }
         let onStart = () => {
           this.addOrRemoveClasses(el, inStartClasses, outClasses.concat(outStartClasses).concat(outEndClasses))
-          let stickyDisplay = display || this.defaultDisplay(el)
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
+          const stickyDisplay = display || this.defaultDisplay(el)
           window.requestAnimationFrame(() => {
+            // first add the starting + active class, THEN make the element visible
+            // otherwise if we toggled the visibility earlier css animations
+            // would flicker, as the element becomes visible before the active animation
+            // class is set (see https://github.com/phoenixframework/phoenix_live_view/issues/3456)
             this.addOrRemoveClasses(el, inClasses, [])
-            window.requestAnimationFrame(() => this.addOrRemoveClasses(el, inEndClasses, inStartClasses))
+            // addOrRemoveClasses uses a requestAnimationFrame itself, therefore we need to move the putSticky
+            // into the next requestAnimationFrame...
+            window.requestAnimationFrame(() => {
+              DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
+              this.addOrRemoveClasses(el, inEndClasses, inStartClasses)
+            })
           })
         }
         let onEnd = () => {
@@ -219,14 +238,18 @@ let JS = {
       }
     } else {
       if(this.isVisible(el)){
-        el.dispatchEvent(new Event("phx:hide-start"))
-        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
-        el.dispatchEvent(new Event("phx:hide-end"))
+        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"))
+        })
       } else {
-        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"))
+        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"))
+        })
       }
     }
   },

package/assets/js/phoenix_live_view/live_socket.js

@@ -28,6 +28,8 @@
  * @param {Object} [opts.uploaders] - The optional object for referencing LiveView uploader callbacks.
  * @param {integer} [opts.loaderTimeout] - The optional delay in milliseconds to wait before apply
  * loading states.
+ * @param {integer} [opts.disconnectedTimeout] - The delay in milliseconds to wait before
+ * executing phx-disconnected commands. Defaults to 500.
  * @param {integer} [opts.maxReloads] - The maximum reloads before entering failsafe mode.
  * @param {integer} [opts.reloadJitterMin] - The minimum time between normal reload attempts.
  * @param {integer} [opts.reloadJitterMax] - The maximum time between normal reload attempts.
@@ -78,6 +80,7 @@ import {
   DEFAULTS,
   FAILSAFE_JITTER,
   LOADER_TIMEOUT,
+  DISCONNECTED_TIMEOUT,
   MAX_RELOADS,
   PHX_DEBOUNCE,
   PHX_DROP_TARGET,
@@ -152,6 +155,7 @@ export default class LiveSocket {
     this.hooks = opts.hooks || {}
     this.uploaders = opts.uploaders || {}
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT
+    this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT
     this.reloadWithJitterTimer = null
     this.maxReloads = opts.maxReloads || MAX_RELOADS
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN

package/assets/js/phoenix_live_view/view.js

@@ -67,8 +67,8 @@ export let prependFormDataKey = (key, prefix) => {
   return baseKey
 }
 
-let serializeForm = (form, metadata, onlyNames = []) => {
-  const {submitter, ...meta} = metadata
+let serializeForm = (form, opts, onlyNames = []) => {
+  const {submitter} = opts
 
   // We must inject the submitter in the order that it exists in the DOM
   // relative to other inputs. For example, for checkbox groups, the order must be maintained.
@@ -100,12 +100,26 @@ let serializeForm = (form, metadata, onlyNames = []) => {
 
   const params = new URLSearchParams()
 
-  let elements = Array.from(form.elements)
+  const {inputsUnused, onlyHiddenInputs} = Array.from(form.elements).reduce((acc, input) => {
+    const {inputsUnused, onlyHiddenInputs} = acc
+    const key = input.name
+    if(!key){ return acc }
+
+    if(inputsUnused[key] === undefined){ inputsUnused[key] = true }
+    if(onlyHiddenInputs[key] === undefined){ onlyHiddenInputs[key] = true }
+
+    const isUsed = DOM.private(input, PHX_HAS_FOCUSED) || DOM.private(input, PHX_HAS_SUBMITTED)
+    const isHidden = input.type === "hidden"
+    inputsUnused[key] = inputsUnused[key] && !isUsed
+    onlyHiddenInputs[key] = onlyHiddenInputs[key] && isHidden
+
+    return acc
+  }, {inputsUnused: {}, onlyHiddenInputs: {}})
+
   for(let [key, val] of formData.entries()){
     if(onlyNames.length === 0 || onlyNames.indexOf(key) >= 0){
-      let inputs = elements.filter(input => input.name === key)
-      let isUnused = !inputs.some(input => (DOM.private(input, PHX_HAS_FOCUSED) || DOM.private(input, PHX_HAS_SUBMITTED)))
-      let hidden = inputs.every(input => input.type === "hidden")
+      let isUnused = inputsUnused[key]
+      let hidden = onlyHiddenInputs[key]
       if(isUnused && !(submitter && submitter.name == key) && !hidden){
         params.append(prependFormDataKey(key, "_unused_"), "")
       }
@@ -119,8 +133,6 @@ let serializeForm = (form, metadata, onlyNames = []) => {
     submitter.parentElement.removeChild(injectedElement)
   }
 
-  for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }
-
   return params.toString()
 }
 
@@ -143,6 +155,7 @@ export default class View {
     this.lastAckRef = null
     this.childJoins = 0
     this.loaderTimer = null
+    this.disconnectedTimer = null
     this.pendingDiffs = []
     this.pendingForms = new Set()
     this.redirect = false
@@ -254,6 +267,7 @@ export default class View {
 
   hideLoader(){
     clearTimeout(this.loaderTimer)
+    clearTimeout(this.disconnectedTimer)
     this.setContainerClasses(PHX_CONNECTED_CLASS)
     this.execAll(this.binding("connected"))
   }
@@ -740,6 +754,12 @@ export default class View {
   }
 
   applyPendingUpdates(){
+    // prevent race conditions where we might still be pending a new
+    // navigation after applying the current one;
+    // if we call update and a pendingDiff is not applied, it would
+    // be silently dropped otherwise, as update would push it back to
+    // pendingDiffs, but we clear it immediately after
+    if(this.liveSocket.hasPendingLink() && this.root.isMain()){ return }
     this.pendingDiffs.forEach(({diff, events}) => this.update(diff, events))
     this.pendingDiffs = []
     this.eachChild(child => child.applyPendingUpdates())
@@ -891,7 +911,13 @@ export default class View {
     if(this.isMain()){ DOM.dispatchEvent(window, "phx:page-loading-start", {detail: {to: this.href, kind: "error"}}) }
     this.showLoader()
     this.setContainerClasses(...classes)
-    this.execAll(this.binding("disconnected"))
+    this.delayedDisconnected()
+  }
+
+  delayedDisconnected(){
+    this.disconnectedTimer = setTimeout(() => {
+      this.execAll(this.binding("disconnected"))
+    }, this.liveSocket.disconnectedTimeout)
   }
 
   wrapPush(callerPush, receives){
@@ -1171,12 +1197,13 @@ export default class View {
       ], phxEvent, "change", opts)
     }
     let formData
-    let meta  = this.extractMeta(inputEl.form)
-    if(inputEl instanceof HTMLButtonElement){ meta.submitter = inputEl }
+    let meta = this.extractMeta(inputEl.form, {}, opts.value)
+    let serializeOpts = {}
+    if(inputEl instanceof HTMLButtonElement){ serializeOpts.submitter = inputEl }
     if(inputEl.getAttribute(this.binding("change"))){
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta}, [inputEl.name])
+      formData = serializeForm(inputEl.form, serializeOpts, [inputEl.name])
     } else {
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta})
+      formData = serializeForm(inputEl.form, serializeOpts)
     }
     if(DOM.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0){
       LiveUploader.trackFiles(inputEl, Array.from(inputEl.files))
@@ -1187,6 +1214,7 @@ export default class View {
       type: "form",
       event: phxEvent,
       value: formData,
+      meta: {_target: opts._target, ...meta},
       uploads: uploads,
       cid: cid
     }
@@ -1300,22 +1328,24 @@ export default class View {
         if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
           return this.undoRefs(ref, phxEvent)
         }
-        let meta = this.extractMeta(formEl)
-        let formData = serializeForm(formEl, {submitter, ...meta})
+        let meta = this.extractMeta(formEl, {}, opts.value)
+        let formData = serializeForm(formEl, {submitter})
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
           value: formData,
+          meta: meta,
           cid: cid
         }).then(({resp}) => onReply(resp))
       })
     } else if(!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))){
-      let meta = this.extractMeta(formEl)
-      let formData = serializeForm(formEl, {submitter, ...meta})
+      let meta = this.extractMeta(formEl, {}, opts.value)
+      let formData = serializeForm(formEl, {submitter})
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
         value: formData,
+        meta: meta,
         cid: cid
       }).then(({resp}) => onReply(resp))
     }

package/package.json

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