From 47046314c2fe6674fc59509f7dd099ee8dedf190 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Mon, 26 Jun 2023 19:40:23 -0500
Subject: [PATCH] fix(Popup): Invalid reference.

---
 react/features/base/popover/components/Popover.web.tsx | 8 +++++---
 react/features/toolbox/components/web/DialogPortal.ts  | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/react/features/base/popover/components/Popover.web.tsx b/react/features/base/popover/components/Popover.web.tsx
index c51abd89607f8..03b660dcaa1fe 100644
--- a/react/features/base/popover/components/Popover.web.tsx
+++ b/react/features/base/popover/components/Popover.web.tsx
@@ -282,7 +282,7 @@ class Popover extends Component<IProps, IState> {
                             // Use the `enabled` prop instead of conditionally rendering ReactFocusOn
                             // to prevent UI stutter on dialog appearance. It seems the focus guards generated annoy
                             // our DialogPortal positioning calculations.
-                            enabled = { this.state.enableFocusLock }
+                            enabled = { Boolean(this._contextMenuRef) && this.state.enableFocusLock }
                             returnFocus = {
 
                                 // If we return the focus to an element outside the viewport the page will scroll to
@@ -294,7 +294,7 @@ class Popover extends Component<IProps, IState> {
                                 // large video.
                                 isElementInTheViewport
                             }
-                            shards = { [ this._contextMenuRef ] }>
+                            shards = { this._contextMenuRef && [ this._contextMenuRef ] }>
                             {this._renderContent()}
                         </FocusOn>
                     </DialogPortal>
@@ -325,7 +325,9 @@ class Popover extends Component<IProps, IState> {
      * @returns {void}
      */
     _setContextMenuRef(elem: HTMLElement) {
-        this._contextMenuRef = elem;
+        if (!elem || document.body.contains(elem)) {
+            this._contextMenuRef = elem;
+        }
     }
 
     /**
diff --git a/react/features/toolbox/components/web/DialogPortal.ts b/react/features/toolbox/components/web/DialogPortal.ts
index ba4ff31832ab4..21cad3f0ce3fa 100644
--- a/react/features/toolbox/components/web/DialogPortal.ts
+++ b/react/features/toolbox/components/web/DialogPortal.ts
@@ -79,7 +79,7 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
             getRef(portalTarget);
             portalTarget.style.zIndex = `${ZINDEX_DIALOG_PORTAL}`;
         }
-    }, [ portalTarget ]);
+    }, [ portalTarget, getRef ]);
 
     useEffect(() => {
         const size = {