From 59e1a2e40bfc9564f0f161c3c1f1f7638221eb90 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:38:37 +0200
Subject: [PATCH] add focus and blur handle to the toolbar

---
 .../toolbox/components/web/Toolbox.tsx        | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx
index d5adec8bdb7..bcc44874525 100644
--- a/react/features/toolbox/components/web/Toolbox.tsx
+++ b/react/features/toolbox/components/web/Toolbox.tsx
@@ -12,7 +12,7 @@ import {
     setHangupMenuVisible,
     setOverflowMenuVisible,
     setToolbarHovered,
-    showToolbox
+    setToolboxVisible
 } from '../../actions.web';
 import {
     getJwtDisabledButtons,
@@ -193,15 +193,22 @@ export default function Toolbox({
     }, [ dispatch ]);
 
     /**
-     * Toggle the toolbar visibility when tabbing into it.
+     * Handle focus on the toolbar.
      *
      * @returns {void}
      */
-    const onTabIn = useCallback(() => {
-        if (!toolbarVisible) {
-            dispatch(showToolbox());
-        }
-    }, [ toolbarVisible, dispatch ]);
+    const handleFocus = useCallback(() => {
+        dispatch(setToolboxVisible(true));
+    }, [ dispatch ]);
+
+    /**
+     * Handle blur the toolbar..
+     *
+     * @returns {void}
+     */
+    const handleBlur = useCallback(() => {
+        dispatch(setToolboxVisible(false));
+    }, [ dispatch ]);
 
     if (iAmRecorder || iAmSipGateway) {
         return null;
@@ -238,7 +245,8 @@ export default function Toolbox({
             <div className = { containerClassName }>
                 <div
                     className = 'toolbox-content-wrapper'
-                    onFocus = { onTabIn }
+                    onBlur = { handleBlur }
+                    onFocus = { handleFocus }
                     { ...(isMobile ? {} : {
                         onMouseOut,
                         onMouseOver