Merge pull request #762 from lethemanh/750-improve-date-picker-on-mobile

#750 auto close date picker after select a date on mobile

__test__/components/DatePickerMobile.test.tsx

@@ -30,6 +30,7 @@ jest.mock('@linagora/twake-mui', () => {
 })
 
 const scrollIntoViewMock = jest.fn()
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const originalScrollIntoView = window.HTMLElement.prototype.scrollIntoView
 
 beforeAll(() => {
@@ -63,20 +64,27 @@ describe('DatePickerMobile', () => {
   const setup = async (
     initialDate: Date
   ): Promise<
-    RenderResult & { calendarApi: CalendarApi; onDateChange: jest.Mock }
+    RenderResult & {
+      calendarApi: CalendarApi
+      onDateChange: jest.Mock
+      onCloseDatePicker: jest.Mock
+    }
   > => {
     const calendarApi = makeCalendarApi(initialDate)
     const onDateChange = jest.fn()
+    const onCloseDatePicker = jest.fn()
+
     const renderResult = await act(() =>
       render(
         <DatePickerMobile
           calendarRef={{ current: calendarApi }}
           currentDate={initialDate}
           onDateChange={onDateChange}
+          onCloseDatePicker={onCloseDatePicker}
         />
       )
     )
-    return { ...renderResult, calendarApi, onDateChange }
+    return { ...renderResult, calendarApi, onDateChange, onCloseDatePicker }
   }
 
   const expectNavigatedDate = (
@@ -160,6 +168,7 @@ describe('DatePickerMobile', () => {
           calendarRef={{ current: calendarApi }}
           currentDate={newDate}
           onDateChange={onDateChange}
+          onCloseDatePicker={jest.fn()} // Need to pass dummy fn for required prop
         />
       )
     })

src/components/Menubar/MobileMenuBar.tsx

@@ -36,6 +36,16 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
   const monthName = t(`months.standalone.${monthIndex}`)
   const dateLabel = `${monthName} ${year}`
 
+  const onToggleDatePicker = (): void => {
+    setOpenDatePicker(prev => {
+      const newState = !prev
+      setTimeout(() => {
+        calendarRef.current?.updateSize?.()
+      }, 0)
+      return newState
+    })
+  }
+
   return (
     <>
       <header className="menubar">
@@ -53,13 +63,13 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
             <Stack direction="row" className="current-date-time">
               <Typography
                 sx={{ lineHeight: 'unset' }}
-                onClick={() => setOpenDatePicker(prev => !prev)}
+                onClick={onToggleDatePicker}
               >
                 {dateLabel}
               </Typography>
               <IconButton
                 size="small"
-                onClick={() => setOpenDatePicker(prev => !prev)}
+                onClick={onToggleDatePicker}
                 aria-label={
                   openDatePicker
                     ? t('menubar.hideDatePicker')
@@ -89,6 +99,7 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
           calendarRef={calendarRef}
           currentDate={currentDate}
           onDateChange={onDateChange}
+          onCloseDatePicker={() => setOpenDatePicker(false)}
         />
       ) : null}
     </>

src/components/Menubar/components/DatePickerMobile.tsx

@@ -13,12 +13,14 @@ export type DatePickerMobileProps = {
   calendarRef: React.RefObject<CalendarApi | null>
   currentDate: Date
   onDateChange?: (date: Date) => void
+  onCloseDatePicker: () => void
 }
 
 export const DatePickerMobile: React.FC<DatePickerMobileProps> = ({
   calendarRef,
   currentDate,
-  onDateChange
+  onDateChange,
+  onCloseDatePicker
 }) => {
   const { t, lang } = useI18n()
   const theme = useTheme()
@@ -40,6 +42,12 @@ export const DatePickerMobile: React.FC<DatePickerMobileProps> = ({
     onChangeDate(dayjs(new Date(year, monthIndex, clampedDay)))
   }
 
+  const handlePickDate = (newDate: PickerValue): void => {
+    onChangeDate(newDate)
+    onCloseDatePicker()
+    calendarRef.current?.updateSize?.()
+  }
+
   return (
     <LocalizationProvider
       key={lang}
@@ -53,10 +61,13 @@ export const DatePickerMobile: React.FC<DatePickerMobileProps> = ({
     >
       <StaticDatePicker
         value={dayjs(currentDate)}
-        onChange={onChangeDate}
+        onChange={handlePickDate}
         showDaysOutsideCurrentMonth
         slots={{ calendarHeader: () => null, actionBar: () => null }}
-        sx={{ width: '100%', marginTop: '10px' }}
+        sx={{
+          width: '100%',
+          marginTop: '10px'
+        }}
         slotProps={{
           toolbar: { hidden: true },
           layout: {