From fa0439ab3d0590d4d5eb597776011a6da70f6d1f Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Tue, 27 Aug 2024 09:57:55 +0200
Subject: [PATCH] - add focus trap to the under menu - fix ResizeObserver loop
 issue

---
 .../web/audio/AudioSettingsContent.tsx        |  1 +
 .../web/video/VideoSettingsContent.tsx        |  1 +
 .../toolbox/components/web/DialogPortal.ts    | 28 ++++++++++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.tsx b/react/features/settings/components/web/audio/AudioSettingsContent.tsx
index e29f260a0e2..d9661903982 100644
--- a/react/features/settings/components/web/audio/AudioSettingsContent.tsx
+++ b/react/features/settings/components/web/audio/AudioSettingsContent.tsx
@@ -281,6 +281,7 @@ const AudioSettingsContent = ({
 
     return (
         <ContextMenu
+            activateFocusTrap = { true }
             aria-labelledby = 'audio-settings-button'
             className = { classes.contextMenu }
             hidden = { false }
diff --git a/react/features/settings/components/web/video/VideoSettingsContent.tsx b/react/features/settings/components/web/video/VideoSettingsContent.tsx
index b69d0be161a..d3847cf2779 100644
--- a/react/features/settings/components/web/video/VideoSettingsContent.tsx
+++ b/react/features/settings/components/web/video/VideoSettingsContent.tsx
@@ -295,6 +295,7 @@ const VideoSettingsContent = ({
 
     return (
         <ContextMenu
+            activateFocusTrap = { true }
             aria-labelledby = 'video-settings-button'
             className = { classes.container }
             hidden = { false }
diff --git a/react/features/toolbox/components/web/DialogPortal.ts b/react/features/toolbox/components/web/DialogPortal.ts
index 21cad3f0ce3..9d5175e0d9f 100644
--- a/react/features/toolbox/components/web/DialogPortal.ts
+++ b/react/features/toolbox/components/web/DialogPortal.ts
@@ -8,8 +8,8 @@ import { ZINDEX_DIALOG_PORTAL } from '../../constants';
 interface IProps {
 
     /**
-     * The component(s) to be displayed within the drawer portal.
-     */
+    * The component(s) to be displayed within the drawer portal.
+    */
     children: ReactNode;
 
     /**
@@ -44,6 +44,24 @@ interface IProps {
     targetSelector?: string;
 }
 
+/**
+ * Utility function to debounce the execution of a callback function.
+ *
+ * @param {Function} callback - The callback to debounce.
+ * @param {number} delay - The debounce delay in milliseconds.
+ * @returns {Function} - A debounced function that delays the execution of the callback.
+ */
+const debounce = (callback: (...args: any[]) => void, delay: number) => {
+    let timerId: any;
+
+    return (...args: any[]) => {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => callback(...args), delay);
+    };
+};
+
 /**
  * Component meant to render a drawer at the bottom of the screen,
  * by creating a portal containing the component's children.
@@ -86,7 +104,7 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
             width: 1,
             height: 1
         };
-        const observer = new ResizeObserver(entries => {
+        const debouncedResizeCallback = debounce((entries: ResizeObserverEntry[]) => {
             const { contentRect } = entries[0];
 
             if (contentRect.width !== size.width || contentRect.height !== size.height) {
@@ -97,8 +115,10 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
                     onVisible?.();
                 }, 100);
             }
-        });
+        }, 20); // 20ms delay
 
+        // Create and observe ResizeObserver
+        const observer = new ResizeObserver(debouncedResizeCallback);
         const target = targetSelector ? portalTarget.querySelector(targetSelector) : portalTarget;
 
         if (document.body) {