Close calendar on keyboard nav to othe menus as well

plausible · Jan 30, 2025 · 2633518 · 2633518
1 parent 68afaeb
commit 2633518
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 37 deletions.
diff --git a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { clearedComparisonSearch } from '../../query'
 import classNames from 'classnames'
 import { useQueryContext } from '../../query-context'
@@ -20,22 +20,26 @@ import { popover } from '../../components/popover'
 import {
   datemenuButtonClassName,
   DateMenuChevron,
+  DropdownItemsProps,
   linkClassName,
-  MenuSeparator
+  MenuSeparator,
+  useCloseCalendarOnDropdownOpen
 } from './shared-menu-items'
 
 export const ComparisonPeriodMenuItems = ({
+  dropdownIsOpen,
   closeDropdown,
-  toggleCalendar
-}: {
-  closeDropdown: () => void
-  toggleCalendar: () => void
-}) => {
+  openCalendar,
+  closeCalendar,
+  calendarIsOpen
+}: DropdownItemsProps) => {
   const { query } = useQueryContext()
 
-  useEffect(() => {
-    closeDropdown()
-  }, [closeDropdown, query])
+  useCloseCalendarOnDropdownOpen({
+    dropdownIsOpen,
+    calendarIsOpen,
+    closeCalendar
+  })
 
   if (!isComparisonEnabled(query.comparison)) {
     return null
@@ -79,7 +83,7 @@ export const ComparisonPeriodMenuItems = ({
               // custom handler is needed to prevent
               // the calendar from immediately closing
               // due to Menu.Button grabbing focus
-              toggleCalendar()
+              openCalendar()
               closeDropdown()
             }}
           >

diff --git a/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx
@@ -31,8 +31,10 @@ import { popover } from '../../components/popover'
 import {
   datemenuButtonClassName,
   DateMenuChevron,
+  DropdownItemsProps,
   linkClassName,
-  MenuSeparator
+  MenuSeparator,
+  useCloseCalendarOnDropdownOpen
 } from './shared-menu-items'
 
 function QueryPeriodMenuItems({ groups }: { groups: LinkItem[][] }) {
@@ -139,14 +141,20 @@ export const QueryPeriodMenuButton = () => {
 
 export const QueryPeriodMenu = ({
   closeDropdown,
-  toggleCalendar
-}: {
-  closeDropdown: () => void
-  toggleCalendar: () => void
-}) => {
+  openCalendar,
+  closeCalendar,
+  dropdownIsOpen,
+  calendarIsOpen
+}: DropdownItemsProps) => {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
+  useCloseCalendarOnDropdownOpen({
+    dropdownIsOpen,
+    calendarIsOpen,
+    closeCalendar
+  })
+
   const groups = useMemo(() => {
     const compareLink = getCompareLinkItem({ site, query })
     return getDatePeriodGroups({
@@ -159,8 +167,12 @@ export const QueryPeriodMenu = ({
             search: (s) => s,
             isActive: ({ query }) => query.period === QueryPeriod.custom,
             onEvent: () => {
-              toggleCalendar()
-              closeDropdown()
+              if (calendarIsOpen) {
+                closeCalendar()
+              } else {
+                openCalendar()
+                closeDropdown()
+              }
             }
           }
         ]
@@ -169,7 +181,7 @@ export const QueryPeriodMenu = ({
         ? []
         : [[compareLink]]
     })
-  }, [site, query, toggleCalendar, closeDropdown])
+  }, [site, query, calendarIsOpen, closeCalendar, openCalendar, closeDropdown])
 
   return (
     <>

diff --git a/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx b/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx
@@ -58,18 +58,15 @@ export function QueryPeriodsPicker({ className }: { className?: string }) {
     <div className={classNames('flex shrink-0', className)}>
       <MovePeriodArrows className={isComparing ? 'hidden md:flex' : ''} />
       <Popover className="min-w-36 md:relative lg:w-48">
-        {({ close }) => (
+        {({ close, open }) => (
           <>
             <QueryPeriodMenuButton />
             <QueryPeriodMenu
+              dropdownIsOpen={open}
+              calendarIsOpen={!!calendar}
               closeDropdown={close}
-              toggleCalendar={() => {
-                if (calendar === 'main') {
-                  setCalendar(null)
-                } else {
-                  setCalendar('main')
-                }
-              }}
+              openCalendar={() => setCalendar('main')}
+              closeCalendar={() => setCalendar(null)}
             />
           </>
         )}
@@ -103,18 +100,15 @@ export function QueryPeriodsPicker({ className }: { className?: string }) {
             <span className="hidden md:inline px-1">vs.</span>
           </div>
           <Popover className="min-w-36 md:relative lg:w-48">
-            {({ close }) => (
+            {({ close, open }) => (
               <>
                 <ComparisonPeriodMenuButton />
                 <ComparisonPeriodMenuItems
+                  dropdownIsOpen={open}
+                  calendarIsOpen={!!calendar}
                   closeDropdown={close}
-                  toggleCalendar={() => {
-                    if (calendar === 'compare') {
-                      setCalendar(null)
-                    } else {
-                      setCalendar('compare')
-                    }
-                  }}
+                  openCalendar={() => setCalendar('compare')}
+                  closeCalendar={() => setCalendar(null)}
                 />
               </>
             )}

diff --git a/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx b/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import classNames from 'classnames'
 import { popover } from '../../components/popover'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
@@ -25,3 +25,26 @@ export const DateMenuChevron = () => (
 export const MenuSeparator = () => (
   <div className="my-1 border-gray-200 dark:border-gray-500 border-b" />
 )
+
+export interface DropdownItemsProps {
+  dropdownIsOpen: boolean
+  calendarIsOpen: boolean
+  closeDropdown: () => void
+  openCalendar: () => void
+  closeCalendar: () => void
+}
+
+export const useCloseCalendarOnDropdownOpen = ({
+  dropdownIsOpen,
+  calendarIsOpen,
+  closeCalendar
+}: Pick<
+  DropdownItemsProps,
+  'dropdownIsOpen' | 'calendarIsOpen' | 'closeCalendar'
+>) => {
+  useEffect(() => {
+    if (dropdownIsOpen && calendarIsOpen) {
+      closeCalendar()
+    }
+  }, [dropdownIsOpen, calendarIsOpen, closeCalendar])
+}