Keep channel zap popover refs alive until mounted

js/channelProfile.js

@@ -309,7 +309,21 @@ function getChannelMenuElement() {
 }
 
 function getZapControlsContainer() {
-  if (cachedZapControls && cachedZapControls.isConnected) {
+  if (cachedZapControls) {
+    if (cachedZapControls.isConnected) {
+      return cachedZapControls;
+    }
+
+    const doc = typeof document !== "undefined" ? document : null;
+    const HTMLElementCtor =
+      doc?.defaultView?.HTMLElement ||
+      (typeof HTMLElement !== "undefined" ? HTMLElement : null);
+    const existing = doc?.getElementById("zapControls") || null;
+    if (existing && (!HTMLElementCtor || existing instanceof HTMLElementCtor)) {
+      cachedZapControls = existing;
+      return cachedZapControls;
+    }
+
     return cachedZapControls;
   }
 
@@ -318,7 +332,7 @@ function getZapControlsContainer() {
   const HTMLElementCtor =
     doc?.defaultView?.HTMLElement ||
     (typeof HTMLElement !== "undefined" ? HTMLElement : null);
-  if (HTMLElementCtor && existing instanceof HTMLElementCtor) {
+  if (existing && (!HTMLElementCtor || existing instanceof HTMLElementCtor)) {
     cachedZapControls = existing;
   } else {
     cachedZapControls = null;
@@ -327,81 +341,198 @@ function getZapControlsContainer() {
 }
 
 function getZapFormElement() {
-  if (cachedZapForm && cachedZapForm.isConnected) {
+  if (cachedZapForm) {
+    if (cachedZapForm.isConnected) {
+      return cachedZapForm;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapForm");
+      if (existing) {
+        cachedZapForm = existing;
+      }
+    }
+
     return cachedZapForm;
   }
+
   const container = getZapControlsContainer();
   cachedZapForm = container?.querySelector("#zapForm") || null;
   return cachedZapForm;
 }
 
 function getZapAmountInput() {
-  if (cachedZapAmountInput && cachedZapAmountInput.isConnected) {
+  if (cachedZapAmountInput) {
+    if (cachedZapAmountInput.isConnected) {
+      return cachedZapAmountInput;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapAmountInput");
+      if (existing) {
+        cachedZapAmountInput = existing;
+      }
+    }
+
     return cachedZapAmountInput;
   }
+
   const container = getZapControlsContainer();
   cachedZapAmountInput = container?.querySelector("#zapAmountInput") || null;
   return cachedZapAmountInput;
 }
 
 function getZapSplitSummaryElement() {
-  if (cachedZapSplitSummary && cachedZapSplitSummary.isConnected) {
+  if (cachedZapSplitSummary) {
+    if (cachedZapSplitSummary.isConnected) {
+      return cachedZapSplitSummary;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapSplitSummary");
+      if (existing) {
+        cachedZapSplitSummary = existing;
+      }
+    }
+
     return cachedZapSplitSummary;
   }
+
   const container = getZapControlsContainer();
   cachedZapSplitSummary = container?.querySelector("#zapSplitSummary") || null;
   return cachedZapSplitSummary;
 }
 
 function getZapStatusElement() {
-  if (cachedZapStatus && cachedZapStatus.isConnected) {
+  if (cachedZapStatus) {
+    if (cachedZapStatus.isConnected) {
+      return cachedZapStatus;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapStatus");
+      if (existing) {
+        cachedZapStatus = existing;
+      }
+    }
+
     return cachedZapStatus;
   }
+
   const container = getZapControlsContainer();
   cachedZapStatus = container?.querySelector("#zapStatus") || null;
   return cachedZapStatus;
 }
 
 function getZapReceiptsList() {
-  if (cachedZapReceipts && cachedZapReceipts.isConnected) {
+  if (cachedZapReceipts) {
+    if (cachedZapReceipts.isConnected) {
+      return cachedZapReceipts;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapReceipts");
+      if (existing) {
+        cachedZapReceipts = existing;
+      }
+    }
+
     return cachedZapReceipts;
   }
+
   const container = getZapControlsContainer();
   cachedZapReceipts = container?.querySelector("#zapReceipts") || null;
   return cachedZapReceipts;
 }
 
 function getZapSendButton() {
-  if (cachedZapSendBtn && cachedZapSendBtn.isConnected) {
+  if (cachedZapSendBtn) {
+    if (cachedZapSendBtn.isConnected) {
+      return cachedZapSendBtn;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapSendBtn");
+      if (existing) {
+        cachedZapSendBtn = existing;
+      }
+    }
+
     return cachedZapSendBtn;
   }
+
   const container = getZapControlsContainer();
   cachedZapSendBtn = container?.querySelector("#zapSendBtn") || null;
   return cachedZapSendBtn;
 }
 
 function getZapWalletPrompt() {
-  if (cachedZapWalletPrompt && cachedZapWalletPrompt.isConnected) {
+  if (cachedZapWalletPrompt) {
+    if (cachedZapWalletPrompt.isConnected) {
+      return cachedZapWalletPrompt;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapWalletPrompt");
+      if (existing) {
+        cachedZapWalletPrompt = existing;
+      }
+    }
+
     return cachedZapWalletPrompt;
   }
+
   const container = getZapControlsContainer();
   cachedZapWalletPrompt = container?.querySelector("#zapWalletPrompt") || null;
   return cachedZapWalletPrompt;
 }
 
 function getZapWalletLink() {
-  if (cachedZapWalletLink && cachedZapWalletLink.isConnected) {
+  if (cachedZapWalletLink) {
+    if (cachedZapWalletLink.isConnected) {
+      return cachedZapWalletLink;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapWalletLink");
+      if (existing) {
+        cachedZapWalletLink = existing;
+      }
+    }
+
     return cachedZapWalletLink;
   }
+
   const container = getZapControlsContainer();
   cachedZapWalletLink = container?.querySelector("#zapWalletLink") || null;
   return cachedZapWalletLink;
 }
 
 function getZapCloseButton() {
-  if (cachedZapCloseBtn && cachedZapCloseBtn.isConnected) {
+  if (cachedZapCloseBtn) {
+    if (cachedZapCloseBtn.isConnected) {
+      return cachedZapCloseBtn;
+    }
+
+    const container = getZapControlsContainer();
+    if (container) {
+      const existing = container.querySelector("#zapCloseBtn");
+      if (existing) {
+        cachedZapCloseBtn = existing;
+      }
+    }
+
     return cachedZapCloseBtn;
   }
+
   const container = getZapControlsContainer();
   cachedZapCloseBtn = container?.querySelector("#zapCloseBtn") || null;
   return cachedZapCloseBtn;