From 4938b556b5acdd6bafa8b229fc786001642eeacc Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Fri, 26 May 2023 10:04:49 -0400
Subject: [PATCH] Ensure private hooks are set up on join patch. #2640

---
 assets/js/phoenix_live_view/dom.js       |  6 ++++++
 assets/js/phoenix_live_view/dom_patch.js | 10 ++--------
 assets/js/phoenix_live_view/view.js      |  8 ++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/assets/js/phoenix_live_view/dom.js b/assets/js/phoenix_live_view/dom.js
index e2655b3c14..d4c8043eef 100644
--- 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
index 6631f8c86c..c6320542b5 100644
--- 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
index b3def26a44..6e636619bc 100644
--- 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)
     })