(feat) Delay display of menu item tooltips by 500ms (#567)

openmrs · Nov 10, 2022 · 0dbafc9 · 0dbafc9
1 parent 02a06eb
commit 0dbafc9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx
@@ -16,6 +16,7 @@ const ImplementerToolsButton: React.FC = () => {
         aria-label={t("implementerTools", "Implementer Tools")}
         aria-labelledby="Implementer Tools"
         className={styles.toolStyles}
+        enterDelayMs={500}
         name="ImplementerToolsIcon"
         onClick={togglePopup}
       >

diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx
@@ -66,8 +66,8 @@ const Navbar: React.FC<NavbarProps> = ({
     [navMenuItems.length, layout]
   );
 
-  const render = useCallback(() => {
-    return (
+  const render = useCallback(
+    () => (
       <>
         <OfflineBanner />
         <Header className={styles.topNavHeader} aria-label="OpenMRS">
@@ -112,6 +112,7 @@ const Navbar: React.FC<NavbarProps> = ({
                   ? styles.headerGlobalBarButton
                   : styles.activePanel
               }`}
+              enterDelayMs={500}
               name="Users"
               isActive={isActivePanel("userMenu")}
               onClick={(event) => {
@@ -127,14 +128,15 @@ const Navbar: React.FC<NavbarProps> = ({
             </HeaderGlobalAction>
             <HeaderGlobalAction
               aria-label="App Menu"
-              tooltipAlignment="end"
+              aria-labelledby="App Menu"
+              enterDelayMs={500}
               isActive={isActivePanel("appMenu")}
+              tooltipAlignment="end"
               className={`${
                 isActivePanel("appMenu")
                   ? styles.headerGlobalBarButton
                   : styles.activePanel
               }`}
-              aria-labelledby="App Menu"
               onClick={(event) => {
                 togglePanel("appMenu");
                 event.stopPropagation();
@@ -170,18 +172,19 @@ const Navbar: React.FC<NavbarProps> = ({
           />
         </Header>
       </>
-    );
-  }, [
-    showHamburger,
-    session,
-    user,
-    allowedLocales,
-    isActivePanel,
-    layout,
-    hidePanel,
-    togglePanel,
-    onLogout,
-  ]);
+    ),
+    [
+      showHamburger,
+      session,
+      user,
+      allowedLocales,
+      isActivePanel,
+      layout,
+      hidePanel,
+      togglePanel,
+      onLogout,
+    ]
+  );
 
   return <div>{session && <HeaderContainer render={render} />}</div>;
 };