fix(menu): prevent duplicate visible menus

jwplayer · Jun 1, 2023 · e4b9267 · e4b9267
1 parent f4eb4e5
commit e4b9267
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 38 deletions.
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
@@ -25,12 +25,14 @@ describe('<Header />', () => {
         onCloseSearchButtonClick={vi.fn()}
         onLoginButtonClick={vi.fn()}
         userMenuOpen={false}
-        toggleUserMenu={vi.fn()}
+        openUserMenu={vi.fn()}
+        closeUserMenu={vi.fn()}
+        openLanguageMenu={vi.fn()}
+        closeLanguageMenu={vi.fn()}
         isLoggedIn={false}
         canLogin={true}
         showPaymentsMenuItem={true}
         supportedLanguages={[]}
-        toggleLanguageMenu={vi.fn()}
         currentLanguage={undefined}
         languageMenuOpen={false}
         onLanguageClick={vi.fn()}

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -34,8 +34,10 @@ type Props = {
   onCloseSearchButtonClick?: () => void;
   onLoginButtonClick?: () => void;
   onSignUpButtonClick?: () => void;
-  toggleUserMenu: (value: boolean) => void;
-  toggleLanguageMenu: (value: boolean) => void;
+  openUserMenu: () => void;
+  closeUserMenu: () => void;
+  openLanguageMenu: () => void;
+  closeLanguageMenu: () => void;
   children?: ReactFragment;
   isLoggedIn: boolean;
   userMenuOpen: boolean;
@@ -62,8 +64,10 @@ const Header: React.FC<Props> = ({
   isLoggedIn,
   userMenuOpen,
   languageMenuOpen,
-  toggleUserMenu,
-  toggleLanguageMenu,
+  openUserMenu,
+  closeUserMenu,
+  openLanguageMenu,
+  closeLanguageMenu,
   canLogin = false,
   showPaymentsMenuItem,
   supportedLanguages,
@@ -117,19 +121,12 @@ const Header: React.FC<Props> = ({
 
     return isLoggedIn ? (
       <React.Fragment>
-        <IconButton
-          className={classNames(styles.iconButton, styles.actionButton)}
-          aria-label={t('open_user_menu')}
-          onClick={() => {
-            toggleLanguageMenu(false);
-            toggleUserMenu(!userMenuOpen);
-          }}
-        >
+        <IconButton className={classNames(styles.iconButton, styles.actionButton)} aria-label={t('open_user_menu')} onClick={openUserMenu}>
           <AccountCircle />
         </IconButton>
-        <Popover isOpen={userMenuOpen} onClose={() => toggleUserMenu(false)}>
+        <Popover isOpen={userMenuOpen} onClose={closeUserMenu}>
           <Panel>
-            <UserMenu onClick={() => toggleUserMenu(false)} showPaymentsItem={showPaymentsMenuItem} small />
+            <UserMenu onClick={closeUserMenu} showPaymentsItem={showPaymentsMenuItem} small />
           </Panel>
         </Popover>
       </React.Fragment>
@@ -146,22 +143,15 @@ const Header: React.FC<Props> = ({
 
     return (
       <React.Fragment>
-        <IconButton
-          className={classNames(styles.iconButton, styles.actionButton)}
-          aria-label={t('select_language')}
-          onClick={() => {
-            toggleUserMenu(false);
-            toggleLanguageMenu(!languageMenuOpen);
-          }}
-        >
+        <IconButton className={classNames(styles.iconButton, styles.actionButton)} aria-label={t('select_language')} onClick={openLanguageMenu}>
           <Language />
         </IconButton>
-        <Popover isOpen={languageMenuOpen} onClose={() => toggleLanguageMenu(false)}>
+        <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
           <Panel>
             <LanguageMenu
               onClick={(code) => {
                 onLanguageClick(code);
-                toggleLanguageMenu(false);
+                closeLanguageMenu();
               }}
               languages={supportedLanguages}
               currentLanguage={currentLanguage}

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation, useNavigate } from 'react-router';
@@ -82,15 +82,11 @@ const Layout = () => {
     await i18n.changeLanguage(code);
   };
 
-  const toggleUserMenu = (value: boolean) =>
-    useUIStore.setState({
-      userMenuOpen: value,
-    });
-
-  const toggleLanguageMenu = (value: boolean) =>
-    useUIStore.setState({
-      languageMenuOpen: value,
-    });
+  // useCallbacks are used here to fix a bug in the Popover when using a Reactive onClose callback
+  const openUserMenu = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
+  const closeUserMenu = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
+  const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
+  const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
 
   const renderUserActions = () => {
     if (!clientId) return null;
@@ -137,8 +133,10 @@ const Layout = () => {
           isLoggedIn={isLoggedIn}
           userMenuOpen={userMenuOpen}
           languageMenuOpen={languageMenuOpen}
-          toggleUserMenu={toggleUserMenu}
-          toggleLanguageMenu={toggleLanguageMenu}
+          openUserMenu={openUserMenu}
+          closeUserMenu={closeUserMenu}
+          openLanguageMenu={openLanguageMenu}
+          closeLanguageMenu={closeLanguageMenu}
           canLogin={!!clientId}
           showPaymentsMenuItem={accessModel !== 'AVOD'}
         >