From 0dbafc9a0852304d691ca67e6273b703342ac73e Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 10 Nov 2022 16:55:57 +0300
Subject: [PATCH] (feat) Delay display of menu item tooltips by 500ms (#567)

---
 .../src/implementer-tools.button.tsx          |  1 +
 .../components/navbar/navbar.component.tsx    | 35 ++++++++++---------
 2 files changed, 20 insertions(+), 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
index 2d77d64a3..f3b3a37bc 100644
--- 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
index 1f5885da8..896b112b4 100644
--- 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>;
 };