phoenix_live_view 0.20.2 → 0.20.4

package/assets/js/phoenix_live_view/constants.js

@@ -5,7 +5,8 @@ export const RELOAD_JITTER_MAX = 10000
 export const FAILSAFE_JITTER = 30000
 export const PHX_EVENT_CLASSES = [
   "phx-click-loading", "phx-change-loading", "phx-submit-loading",
-  "phx-keydown-loading", "phx-keyup-loading", "phx-blur-loading", "phx-focus-loading"
+  "phx-keydown-loading", "phx-keyup-loading", "phx-blur-loading", "phx-focus-loading",
+  "phx-hook-loading"
 ]
 export const PHX_COMPONENT = "data-phx-component"
 export const PHX_LIVE_LINK = "data-phx-link"
@@ -37,6 +38,7 @@ export const PHX_VIEWPORT_TOP = "viewport-top"
 export const PHX_VIEWPORT_BOTTOM = "viewport-bottom"
 export const PHX_TRIGGER_ACTION = "trigger-action"
 export const PHX_FEEDBACK_FOR = "feedback-for"
+export const PHX_FEEDBACK_GROUP = "feedback-group"
 export const PHX_HAS_FOCUSED = "phx-has-focused"
 export const FOCUSABLE_INPUTS = ["text", "textarea", "number", "email", "password", "search", "tel", "url", "date", "time", "datetime-local", "color", "range"]
 export const CHECKABLE_INPUTS = ["checkbox", "radio"]

package/assets/js/phoenix_live_view/dom.js

@@ -50,7 +50,11 @@ let DOM = {
 
   isAutoUpload(inputEl){ return inputEl.hasAttribute("data-phx-auto-upload") },
 
-  findUploadInputs(node){ return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`) },
+  findUploadInputs(node){
+    const formId = node.id
+    const inputsOutsideForm = this.all(document, `input[type="file"][${PHX_UPLOAD_REF}][form="${formId}"]`)
+    return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`).concat(inputsOutsideForm)
+  },
 
   findComponentNodeList(node, cid){
     return this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node)
@@ -252,7 +256,10 @@ let DOM = {
           })
         }
         if(this.once(el, "bind-debounce")){
-          el.addEventListener("blur", () => this.triggerCycle(el, DEBOUNCE_TRIGGER))
+          el.addEventListener("blur", () => {
+            // always trigger callback on blur
+            callback()
+          })
         }
     }
   },
@@ -285,14 +292,41 @@ let DOM = {
     }
   },
 
-  maybeHideFeedback(container, inputs, phxFeedbackFor){
+  maybeHideFeedback(container, forms, phxFeedbackFor, phxFeedbackGroup){
     let feedbacks = []
-    inputs.forEach(input => {
-      if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
-        feedbacks.push(input.name)
-        if(input.name.endsWith("[]")){ feedbacks.push(input.name.slice(0, -2)) }
-      }
+    // if there are multiple inputs with the same name
+    // (for example the default checkbox renders a hidden input as well)
+    // we must only add the no feedback class if none of them have been focused yet
+    let inputNamesFocused = {}
+    // an entry in this object will be true if NO input in the group has been focused yet
+    let feedbackGroups = {}
+
+    forms.forEach(form => {
+      Array.from(form.elements).forEach(input => {
+        const group = input.getAttribute(phxFeedbackGroup)
+        // initialize the group to true if it doesn't exist
+        if(group && !(group in feedbackGroups)){ feedbackGroups[group] = true }
+        // initialize the focused state to false if it doesn't exist
+        if(!(input.name in inputNamesFocused)){ inputNamesFocused[input.name] = false }
+        if(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)){
+          inputNamesFocused[input.name] = true
+          // the input was focused, therefore the group will NOT get phx-no-feedback
+          if(group){ feedbackGroups[group] = false }
+        }
+      })
     })
+
+    for(const [name, focused] of Object.entries(inputNamesFocused)){
+      if(!focused){
+        feedbacks.push(name)
+        if(name.endsWith("[]")){ feedbacks.push(name.slice(0, -2)) }
+      }
+    }
+
+    for(const [group, noFeedback] of Object.entries(feedbackGroups)){
+      if(noFeedback) feedbacks.push(group)
+    }
+
     if(feedbacks.length > 0){
       let selector = feedbacks.map(f => `[${phxFeedbackFor}="${f}"]`).join(", ")
       DOM.all(container, selector, el => el.classList.add(PHX_NO_FEEDBACK_CLASS))
@@ -329,12 +363,21 @@ let DOM = {
     return node.getAttribute && node.getAttribute(PHX_STICKY) !== null
   },
 
+  isChildOfAny(el, parents){
+    return !!parents.find(parent => parent.contains(el))
+  },
+
   firstPhxChild(el){
     return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0]
   },
 
   dispatchEvent(target, name, opts = {}){
-    let bubbles = opts.bubbles === undefined ? true : !!opts.bubbles
+    let defaultBubble = true
+    let isUploadTarget = target.nodeName === "INPUT" && target.type === "file"
+    if(isUploadTarget && name === "click"){
+      defaultBubble = false
+    }
+    let bubbles = opts.bubbles === undefined ? defaultBubble : !!opts.bubbles
     let eventOpts = {bubbles: bubbles, cancelable: true, detail: opts.detail || {}}
     let event = name === "click" ? new MouseEvent("click", eventOpts) : new CustomEvent(name, eventOpts)
     target.dispatchEvent(event)
@@ -350,20 +393,40 @@ let DOM = {
     }
   },
 
+  // merge attributes from source to target
+  // if an element is ignored, we only merge data attributes
+  // including removing data attributes that are no longer in the source
   mergeAttrs(target, source, opts = {}){
-    let exclude = opts.exclude || []
+    let exclude = new Set(opts.exclude || [])
     let isIgnored = opts.isIgnored
     let sourceAttrs = source.attributes
     for(let i = sourceAttrs.length - 1; i >= 0; i--){
       let name = sourceAttrs[i].name
-      if(exclude.indexOf(name) < 0){ target.setAttribute(name, source.getAttribute(name)) }
+      if(!exclude.has(name)){
+        const sourceValue = source.getAttribute(name)
+        if(target.getAttribute(name) !== sourceValue && (!isIgnored || (isIgnored && name.startsWith("data-")))){
+          target.setAttribute(name, sourceValue)
+        }
+      } else {
+        // We exclude the value from being merged on focused inputs, because the
+        // user's input should always win.
+        // We can still assign it as long as the value property is the same, though.
+        // This prevents a situation where the updated hook is not being triggered
+        // when an input is back in its "original state", because the attribute
+        // was never changed, see:
+        // https://github.com/phoenixframework/phoenix_live_view/issues/2163
+        if(name === "value" && target.value === source.value){
+          // actually set the value attribute to sync it with the value property
+          target.setAttribute("value", source.getAttribute(name))
+        }
+      }
     }
 
     let targetAttrs = target.attributes
     for(let i = targetAttrs.length - 1; i >= 0; i--){
       let name = targetAttrs[i].name
       if(isIgnored){
-        if(name.startsWith("data-") && !source.hasAttribute(name)){ target.removeAttribute(name) }
+        if(name.startsWith("data-") && !source.hasAttribute(name) && ![PHX_REF, PHX_REF_SRC].includes(name)){ target.removeAttribute(name) }
       } else {
         if(!source.hasAttribute(name)){ target.removeAttribute(name) }
       }
@@ -373,6 +436,7 @@ let DOM = {
   mergeFocusedInput(target, source){
     // skip selects because FF will reset highlighted index for any setAttribute
     if(!(target instanceof HTMLSelectElement)){ DOM.mergeAttrs(target, source, {exclude: ["value"]}) }
+
     if(source.readOnly){
       target.setAttribute("readonly", true)
     } else {
@@ -385,7 +449,9 @@ let DOM = {
   },
 
   restoreFocus(focused, selectionStart, selectionEnd){
+    if(focused instanceof HTMLSelectElement){ focused.focus() }
     if(!DOM.isTextualInput(focused)){ return }
+
     let wasFocused = focused.matches(":focus")
     if(focused.readOnly){ focused.blur() }
     if(!wasFocused){ focused.focus() }

package/assets/js/phoenix_live_view/dom_patch.js

@@ -2,6 +2,7 @@ import {
   PHX_COMPONENT,
   PHX_DISABLE_WITH,
   PHX_FEEDBACK_FOR,
+  PHX_FEEDBACK_GROUP,
   PHX_PRUNE,
   PHX_ROOT_ID,
   PHX_SESSION,
@@ -47,6 +48,7 @@ export default class DOMPatch {
     this.html = html
     this.streams = streams
     this.streamInserts = {}
+    this.streamComponentRestore = {}
     this.targetCID = targetCID
     this.cidPatch = isCid(this.targetCID)
     this.pendingRemoves = []
@@ -71,7 +73,6 @@ export default class DOMPatch {
 
   markPrunableContentForRemoval(){
     let phxUpdate = this.liveSocket.binding(PHX_UPDATE)
-    DOM.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, el => el.innerHTML = "")
     DOM.all(this.container, `[${phxUpdate}=append] > *, [${phxUpdate}=prepend] > *`, el => {
       el.setAttribute(PHX_PRUNE, "")
     })
@@ -86,12 +87,13 @@ export default class DOMPatch {
     let {selectionStart, selectionEnd} = focused && DOM.hasSelectionRange(focused) ? focused : {}
     let phxUpdate = liveSocket.binding(PHX_UPDATE)
     let phxFeedbackFor = liveSocket.binding(PHX_FEEDBACK_FOR)
+    let phxFeedbackGroup = liveSocket.binding(PHX_FEEDBACK_GROUP)
     let disableWith = liveSocket.binding(PHX_DISABLE_WITH)
     let phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP)
     let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM)
     let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION)
     let added = []
-    let trackedInputs = []
+    let trackedForms = new Set()
     let updates = []
     let appendPrependUpdates = []
 
@@ -102,16 +104,12 @@ export default class DOMPatch {
 
     liveSocket.time("morphdom", () => {
       this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
-        Object.entries(inserts).forEach(([key, [streamAt, limit]]) => {
-          this.streamInserts[key] = {ref, streamAt, limit, resetKept: false}
+        inserts.forEach(([key, streamAt, limit]) => {
+          this.streamInserts[key] = {ref, streamAt, limit, reset}
         })
         if(reset !== undefined){
           DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
-            if(inserts[child.id]){
-              this.streamInserts[child.id].resetKept = true
-            } else {
-              this.removeStreamChildElement(child)
-            }
+            this.removeStreamChildElement(child)
           })
         }
         deleteIds.forEach(id => {
@@ -120,6 +118,21 @@ 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)
+              })
+            }
+          })
+        })
+      }
+
       morphdom(targetContainer, html, {
         childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
         getNodeKey: (node) => {
@@ -133,10 +146,18 @@ export default class DOMPatch {
         skipFromChildren: (from) => { return from.getAttribute(phxUpdate) === PHX_STREAM },
         // tell morphdom how to add a child
         addChild: (parent, child) => {
-          let {ref, streamAt, limit} = this.getStreamInsert(child)
-          if(ref === undefined) { return parent.appendChild(child) }
+          let {ref, streamAt} = this.getStreamInsert(child)
+          if(ref === undefined){ return parent.appendChild(child) }
+
+          this.setStreamRef(child, ref)
 
-          DOM.putSticky(child, PHX_STREAM_REF, el => el.setAttribute(PHX_STREAM_REF, ref))
+          // we may need to restore skipped components, see removeStreamChildElement
+          child.querySelectorAll(`[${PHX_MAGIC_ID}][${PHX_SKIP}]`).forEach(el => {
+            const component = this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)]
+            if(component){
+              el.replaceWith(component)
+            }
+          })
 
           // streaming
           if(streamAt === 0){
@@ -147,19 +168,6 @@ export default class DOMPatch {
             let sibling = Array.from(parent.children)[streamAt]
             parent.insertBefore(child, sibling)
           }
-          let children = limit !== null && Array.from(parent.children)
-          let childrenToRemove = []
-          if(limit && limit < 0 && children.length > limit * -1){
-            childrenToRemove = children.slice(0, children.length + limit)
-          } else if(limit && limit >= 0 && children.length > limit){
-            childrenToRemove = children.slice(limit)
-          }
-          childrenToRemove.forEach(removeChild => {
-            // do not remove child as part of limit if we are re-adding it
-            if(!this.streamInserts[removeChild.id]){
-              this.removeStreamChildElement(removeChild)
-            }
-          })
         },
         onBeforeNodeAdded: (el) => {
           DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
@@ -167,7 +175,7 @@ export default class DOMPatch {
           return el
         },
         onNodeAdded: (el) => {
-          if(el.getAttribute){ this.maybeReOrderStream(el) }
+          if(el.getAttribute){ this.maybeReOrderStream(el, true) }
 
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
@@ -180,7 +188,7 @@ export default class DOMPatch {
           }
 
           if(el.getAttribute && el.getAttribute("name") && DOM.isFormInput(el)){
-            trackedInputs.push(el)
+            trackedForms.add(el.form)
           }
           // nested view handling
           if((DOM.isPhxChild(el) && view.ownsElement(el)) || DOM.isPhxSticky(el) && view.ownsElement(el.parentNode)){
@@ -188,27 +196,6 @@ export default class DOMPatch {
           }
           added.push(el)
         },
-        onBeforeElChildrenUpdated: (fromEl, toEl) => {
-          // before we update the children, we need to set existing stream children
-          // into the new order from the server if they were kept during a stream reset
-          if(fromEl.getAttribute(phxUpdate) === PHX_STREAM){
-            let toIds = Array.from(toEl.children).map(child => child.id)
-            Array.from(fromEl.children).filter(child => {
-              let {resetKept} = this.getStreamInsert(child)
-              return resetKept
-            }).sort((a, b) => {
-              let aIdx = toIds.indexOf(a.id)
-              let bIdx = toIds.indexOf(b.id)
-              if(aIdx === bIdx){
-                return 0
-              } else if(aIdx < bIdx){
-                return -1
-              } else {
-                return 1
-              }
-            }).forEach(child => fromEl.appendChild(child))
-          }
-        },
         onNodeDiscarded: (el) => this.onNodeDiscarded(el),
         onBeforeNodeDiscarded: (el) => {
           if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }
@@ -226,12 +213,16 @@ export default class DOMPatch {
             externalFormTriggered = el
           }
           updates.push(el)
-          this.maybeReOrderStream(el)
+          this.maybeReOrderStream(el, false)
         },
         onBeforeElUpdated: (fromEl, toEl) => {
           DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
           DOM.cleanChildNodes(toEl, phxUpdate)
-          if(this.skipCIDSibling(toEl)){ return false }
+          if(this.skipCIDSibling(toEl)){
+            // if this is a live component used in a stream, we may need to reorder it
+            this.maybeReOrderStream(fromEl)
+            return false
+          }
           if(DOM.isPhxSticky(fromEl)){ return false }
           if(DOM.isIgnored(fromEl, phxUpdate) || (fromEl.form && fromEl.form.isSameNode(externalFormTriggered))){
             this.trackBefore("updated", fromEl, toEl)
@@ -264,15 +255,19 @@ export default class DOMPatch {
           DOM.copyPrivates(toEl, fromEl)
 
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
-          if(isFocusedFormEl && fromEl.type !== "hidden"){
+          // skip patching focused inputs unless focus is a select that has changed options
+          let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl)
+          if(isFocusedFormEl && fromEl.type !== "hidden" && !focusedSelectChanged){
             this.trackBefore("updated", fromEl, toEl)
             DOM.mergeFocusedInput(fromEl, toEl)
             DOM.syncAttrsToProps(fromEl)
             updates.push(fromEl)
             DOM.applyStickyOperations(fromEl)
-            trackedInputs.push(fromEl)
+            trackedForms.add(fromEl.form)
             return false
           } else {
+            // blur focused select if it changed so native UI is updated (ie safari won't update visible options)
+            if(focusedSelectChanged){ fromEl.blur() }
             if(DOM.isPhxUpdate(toEl, phxUpdate, ["append", "prepend"])){
               appendPrependUpdates.push(new DOMPostMorphRestorer(fromEl, toEl, toEl.getAttribute(phxUpdate)))
             }
@@ -280,7 +275,7 @@ export default class DOMPatch {
             DOM.syncAttrsToProps(toEl)
             DOM.applyStickyOperations(toEl)
             if(toEl.getAttribute("name") && DOM.isFormInput(toEl)){
-              trackedInputs.push(toEl)
+              trackedForms.add(toEl.form)
             }
             this.trackBefore("updated", fromEl, toEl)
             return true
@@ -297,7 +292,7 @@ export default class DOMPatch {
       })
     }
 
-    DOM.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor)
+    DOM.maybeHideFeedback(targetContainer, trackedForms, phxFeedbackFor, phxFeedbackGroup)
 
     liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
     DOM.dispatchEvent(document, "phx:update")
@@ -332,6 +327,13 @@ export default class DOMPatch {
 
   removeStreamChildElement(child){
     if(!this.maybePendingRemove(child)){
+      if(this.streamInserts[child.id]){
+        // we need to store children so we can restore them later
+        // in case they are skipped
+        child.querySelectorAll(`[${PHX_MAGIC_ID}]`).forEach(el => {
+          this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)] = el
+        })
+      }
       child.remove()
       this.onNodeDiscarded(child)
     }
@@ -342,12 +344,21 @@ export default class DOMPatch {
     return insert || {}
   }
 
-  maybeReOrderStream(el){
-    let {ref, streamAt, limit} = this.getStreamInsert(el)
+  setStreamRef(el, ref){
+    DOM.putSticky(el, PHX_STREAM_REF, el => el.setAttribute(PHX_STREAM_REF, ref))
+  }
+
+  maybeReOrderStream(el, isNew){
+    let {ref, streamAt, reset} = this.getStreamInsert(el)
     if(streamAt === undefined){ return }
 
-    // we need to the PHX_STREAM_REF here as well as addChild is invoked only for parents
-    DOM.putSticky(el, PHX_STREAM_REF, el => el.setAttribute(PHX_STREAM_REF, ref))
+    // we need to set the PHX_STREAM_REF here as well as addChild is invoked only for parents
+    this.setStreamRef(el, ref)
+
+    if(!reset && !isNew){
+      // we only reorder if the element is new or it's a stream reset
+      return
+    }
 
     if(streamAt === 0){
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild)
@@ -365,6 +376,18 @@ export default class DOMPatch {
         }
       }
     }
+
+    this.maybeLimitStream(el)
+  }
+
+  maybeLimitStream(el){
+    let {limit} = this.getStreamInsert(el)
+    let children = limit !== null && Array.from(el.parentElement.children)
+    if(limit && limit < 0 && children.length > limit * -1){
+      children.slice(0, children.length + limit).forEach(child => this.removeStreamChildElement(child))
+    } else if(limit && limit >= 0 && children.length > limit){
+      children.slice(limit).forEach(child => this.removeStreamChildElement(child))
+    }
   }
 
   transitionPendingRemoves(){
@@ -382,6 +405,21 @@ export default class DOMPatch {
     }
   }
 
+  isChangedSelect(fromEl, toEl){
+    if(!(fromEl instanceof HTMLSelectElement) || fromEl.multiple){ return false }
+    if(fromEl.options.length !== toEl.options.length){ return true }
+
+    let fromSelected = fromEl.selectedOptions[0]
+    let toSelected = toEl.selectedOptions[0]
+    if(fromSelected && fromSelected.hasAttribute("selected")){
+      toSelected.setAttribute("selected", fromSelected.getAttribute("selected"))
+    }
+
+    // in general we have to be very careful with using isEqualNode as it does not a reliable
+    // DOM tree equality check, but for selection attributes and options it works fine
+    return !fromEl.isEqualNode(toEl)
+  }
+
   isCIDPatch(){ return this.cidPatch }
 
   skipCIDSibling(el){

package/assets/js/phoenix_live_view/hooks.js

@@ -57,27 +57,59 @@ let Hooks = {
   }
 }
 
-let scrollTop = () => document.documentElement.scrollTop || document.body.scrollTop
-let winHeight = () => window.innerHeight || document.documentElement.clientHeight
+let findScrollContainer = (el) => {
+  if(["scroll", "auto"].indexOf(getComputedStyle(el).overflowY) >= 0) return el
+  if(document.documentElement === el) return null
+  return findScrollContainer(el.parentElement)
+}
+
+let scrollTop = (scrollContainer) => {
+  if(scrollContainer){
+    return scrollContainer.scrollTop
+  } else {
+    return document.documentElement.scrollTop || document.body.scrollTop
+  }
+}
+
+let bottom = (scrollContainer) => {
+  if(scrollContainer){
+    return scrollContainer.getBoundingClientRect().bottom
+  } else {
+    // when we have no container, the whole page scrolls,
+    // therefore the bottom coordinate is the viewport height
+    return window.innerHeight || document.documentElement.clientHeight
+  }
+}
 
-let isAtViewportTop = (el) => {
+let top = (scrollContainer) => {
+  if(scrollContainer){
+    return scrollContainer.getBoundingClientRect().top
+  } else {
+    // when we have no container the whole page scrolls,
+    // therefore the top coordinate is 0
+    return 0
+  }
+}
+
+let isAtViewportTop = (el, scrollContainer) => {
   let rect = el.getBoundingClientRect()
-  return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight()
+  return rect.top >= top(scrollContainer) && rect.left >= 0 && rect.top <= bottom(scrollContainer)
 }
 
-let isAtViewportBottom = (el) => {
+let isAtViewportBottom = (el, scrollContainer) => {
   let rect = el.getBoundingClientRect()
-  return rect.right >= 0 && rect.left >= 0 && rect.bottom <= winHeight()
+  return rect.right >= top(scrollContainer) && rect.left >= 0 && rect.bottom <= bottom(scrollContainer)
 }
 
-let isWithinViewport = (el) => {
+let isWithinViewport = (el, scrollContainer) => {
   let rect = el.getBoundingClientRect()
-  return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight()
+  return rect.top >= top(scrollContainer) && rect.left >= 0 && rect.top <= bottom(scrollContainer)
 }
 
 Hooks.InfiniteScroll = {
   mounted(){
-    let scrollBefore = scrollTop()
+    this.scrollContainer = findScrollContainer(this.el)
+    let scrollBefore = scrollTop(this.scrollContainer)
     let topOverran = false
     let throttleInterval = 500
     let pendingOp = null
@@ -93,7 +125,12 @@ Hooks.InfiniteScroll = {
       pendingOp = () => firstChild.scrollIntoView({block: "start"})
       this.liveSocket.execJSHookPush(this.el, topEvent, {id: firstChild.id}, () => {
         pendingOp = null
-        if(!isWithinViewport(firstChild)){ firstChild.scrollIntoView({block: "start"}) }
+        // make sure that the DOM is patched by waiting for the next tick
+        window.requestAnimationFrame(() => {
+          if(!isWithinViewport(firstChild, this.scrollContainer)){
+            firstChild.scrollIntoView({block: "start"})
+          }
+        })
       })
     })
 
@@ -101,12 +138,17 @@ Hooks.InfiniteScroll = {
       pendingOp = () => lastChild.scrollIntoView({block: "end"})
       this.liveSocket.execJSHookPush(this.el, bottomEvent, {id: lastChild.id}, () => {
         pendingOp = null
-        if(!isWithinViewport(lastChild)){ lastChild.scrollIntoView({block: "end"}) }
+        // make sure that the DOM is patched by waiting for the next tick
+        window.requestAnimationFrame(() => {
+          if(!isWithinViewport(lastChild, this.scrollContainer)){
+            lastChild.scrollIntoView({block: "end"})
+          }
+        })
       })
     })
 
-    this.onScroll = (e) => {
-      let scrollNow = scrollTop()
+    this.onScroll = (_e) => {
+      let scrollNow = scrollTop(this.scrollContainer)
 
       if(pendingOp){
         scrollBefore = scrollNow
@@ -128,16 +170,28 @@ Hooks.InfiniteScroll = {
         topOverran = false
       }
 
-      if(topEvent && isScrollingUp && isAtViewportTop(firstChild)){
+      if(topEvent && isScrollingUp && isAtViewportTop(firstChild, this.scrollContainer)){
         onFirstChildAtTop(topEvent, firstChild)
-      } else if(bottomEvent && isScrollingDown && isAtViewportBottom(lastChild)){
+      } else if(bottomEvent && isScrollingDown && isAtViewportBottom(lastChild, this.scrollContainer)){
         onLastChildAtBottom(bottomEvent, lastChild)
       }
       scrollBefore = scrollNow
     }
-    window.addEventListener("scroll", this.onScroll)
+
+    if(this.scrollContainer){
+      this.scrollContainer.addEventListener("scroll", this.onScroll)
+    } else {
+      window.addEventListener("scroll", this.onScroll)
+    }
+  },
+  
+  destroyed(){
+    if(this.scrollContainer){
+      this.scrollContainer.removeEventListener("scroll", this.onScroll)
+    } else {
+      window.removeEventListener("scroll", this.onScroll)
+    }
   },
-  destroyed(){ window.removeEventListener("scroll", this.onScroll) },
 
   throttle(interval, callback){
     let lastCallAt = 0