Ensure private hooks are set up on join patch. #2640

phoenixframework · May 26, 2023 · 4938b55 · 4938b55
1 parent 91c7e8a
commit 4938b55
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/assets/js/phoenix_live_view/dom.js b/assets/js/phoenix_live_view/dom.js
@@ -264,6 +264,12 @@ let DOM = {
     return currentCycle
   },
 
+  maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom){
+    if(el.hasAttribute && (el.hasAttribute(phxViewportTop) || el.hasAttribute(phxViewportBottom))){
+      el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll")
+    }
+  },
+
   maybeHideFeedback(container, input, phxFeedbackFor){
     if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
       let feedbacks = [input.name]

diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js
@@ -150,7 +150,7 @@ export default class DOMPatch {
           }
         },
         onBeforeNodeAdded: (el) => {
-          this.maybePrivateHooks(el, phxViewportTop, phxViewportBottom)
+          DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
           this.trackBefore("added", el)
           return el
         },
@@ -243,7 +243,7 @@ export default class DOMPatch {
               appendPrependUpdates.push(new DOMPostMorphRestorer(fromEl, toEl, toEl.getAttribute(phxUpdate)))
             }
 
-            this.maybePrivateHooks(toEl, phxViewportTop, phxViewportBottom)
+            DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
             DOM.syncAttrsToProps(toEl)
             DOM.applyStickyOperations(toEl)
             if(toEl.getAttribute("name")){
@@ -288,12 +288,6 @@ export default class DOMPatch {
     this.trackAfter("discarded", el)
   }
 
-  maybePrivateHooks(el, phxViewportTop, phxViewportBottom){
-    if(el.hasAttribute && (el.hasAttribute(phxViewportTop) || el.hasAttribute(phxViewportBottom))){
-      el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll")
-    }
-  }
-
   maybePendingRemove(node){
     if(node.getAttribute && node.getAttribute(this.phxRemove) !== null){
       this.pendingRemoves.push(node)

diff --git a/assets/js/phoenix_live_view/view.js b/assets/js/phoenix_live_view/view.js
@@ -33,6 +33,8 @@ import {
   PHX_MAIN,
   PHX_MOUNTED,
   PUSH_TIMEOUT,
+  PHX_VIEWPORT_TOP,
+  PHX_VIEWPORT_BOTTOM,
 } from "./constants"
 
 import {
@@ -322,6 +324,12 @@ export default class View {
   }
 
   execNewMounted(){
+    let phxViewportTop = this.binding(PHX_VIEWPORT_TOP)
+    let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM)
+    DOM.all(this.el, `[${phxViewportTop}], [${phxViewportBottom}]`, hookEl => {
+      DOM.maybeAddPrivateHooks(hookEl, phxViewportTop, phxViewportBottom)
+      this.maybeAddNewHook(hookEl)
+    })
     DOM.all(this.el, `[${this.binding(PHX_HOOK)}], [data-phx-${PHX_HOOK}]`, hookEl => {
       this.maybeAddNewHook(hookEl)
     })