- add focus trap to the under menu

- fix ResizeObserver loop issue
jitsi · Aug 27, 2024 · fa0439a · fa0439a
1 parent ec22c1f
commit fa0439a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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) {