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

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: {