fix: Add support for custom document in useClickOutside (WPB-14862) (#…

…18431)
wireapp · Dec 5, 2024 · fd590d3 · fd590d3
1 parent 1c8fef5
commit fd590d3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -160,8 +160,6 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const emojiBarRef = useRef(null);
   const emojiBarToggleButtonRef = useRef(null);
 
-  useClickOutside(emojiBarRef, () => setShowEmojisBar(false), emojiBarToggleButtonRef);
-
   const {blurredVideoStream} = useKoSubscribableChildren(selfParticipant, ['blurredVideoStream']);
   const hasBlurredBackground = !!blurredVideoStream;
 
@@ -206,11 +204,12 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   ]);
 
   const {selfUser, roles} = useKoSubscribableChildren(conversation, ['selfUser', 'roles']);
-  const {emojis, viewMode, isScreenSharingSourceFromDetachedWindow} = useKoSubscribableChildren(callState, [
-    'emojis',
-    'viewMode',
-    'isScreenSharingSourceFromDetachedWindow',
-  ]);
+  const {emojis, viewMode, detachedWindow, isScreenSharingSourceFromDetachedWindow} = useKoSubscribableChildren(
+    callState,
+    ['emojis', 'viewMode', 'detachedWindow', 'isScreenSharingSourceFromDetachedWindow'],
+  );
+
+  useClickOutside(emojiBarRef, () => setShowEmojisBar(false), emojiBarToggleButtonRef, detachedWindow?.document);
 
   const [audioOptionsOpen, setAudioOptionsOpen] = useState(false);
   const [videoOptionsOpen, setVideoOptionsOpen] = useState(false);

diff --git a/src/script/hooks/useClickOutside.tsx b/src/script/hooks/useClickOutside.tsx
@@ -23,6 +23,7 @@ export const useClickOutside = (
   ref: RefObject<Element>,
   onClick: (e: MouseEvent) => void,
   exclude?: RefObject<Element>,
+  windowDocument = window.document,
 ) => {
   useEffect(() => {
     const handleClick = (event: MouseEvent) => {
@@ -34,8 +35,8 @@ export const useClickOutside = (
         }
       }
     };
-    document.addEventListener('click', handleClick);
+    windowDocument.addEventListener('click', handleClick);
 
-    return () => document.removeEventListener('click', handleClick);
-  }, [onClick]);
+    return () => windowDocument.removeEventListener('click', handleClick);
+  }, [exclude, onClick, ref, windowDocument]);
 };