Prevents settings menu from closing while clicking on calendar

calendar is considered as "outside" of the settings menu
- State added for watching calendar "display" state
- Allow menu closing (on any click) when calendar is not opened
and prevents it from closing when calendar is open

src/components/layouts/SettingsMenu.tsx

@@ -146,10 +146,9 @@ const RealtimeRentMenuItem: FC = () => {
   )
 }
 
-const RealtimeRentMenuSelectDate: FC = () => {
+const RealtimeRentMenuSelectDate: FC<{ isCalendarOpen: boolean, setIsCalendarOpen: (open: boolean) => void }> = ({ isCalendarOpen, setIsCalendarOpen }) => {
   const dispatch = useDispatch()
   const rentCalculation = useSelector(selectUserRentCalculation)
-
   const { i18n, t } = useTranslation('common', { keyPrefix: 'settings' })
 
   if (rentCalculation.state !== RentCalculationState.Realtime) return null
@@ -162,28 +161,30 @@ const RealtimeRentMenuSelectDate: FC = () => {
       }),
     )
   }
+  const toggleIsCalendarOpen = () => setIsCalendarOpen(!isCalendarOpen)
 
   return (
     <>
       <Menu.Label pb={0}>{t('date')}</Menu.Label>
       <DatePickerInput
         p={5}
+        onClick={() => toggleIsCalendarOpen()}
         locale={i18n.language}
         valueFormat={t('dateFormat')}
         value={new Date(rentCalculation.date)}
-        onChange={(value) => handleDateChange(value as Date)}
+        onChange={(value) => {handleDateChange(value as Date) ; toggleIsCalendarOpen()}}
         defaultDate={new Date()}
       />
       <Menu.Divider />
     </>
   )
 }
 
-const RealtimeRentMenu = () => {
+const RealtimeRentMenu: FC<{ isCalendarOpen: boolean, setIsCalendarOpen: (open: boolean) => void }> = ({ isCalendarOpen, setIsCalendarOpen }) => {
   return (
     <>
       <RealtimeRentMenuItem />
-      <RealtimeRentMenuSelectDate />
+      <RealtimeRentMenuSelectDate isCalendarOpen={isCalendarOpen} setIsCalendarOpen={setIsCalendarOpen} />
       <Menu.Divider />
     </>
   )
@@ -341,10 +342,13 @@ const RefreshDataButton: FC = () => {
 export const SettingsMenu: FC = () => {
   const [isOpen, handlers] = useDisclosure(false)
   const version = useSelector(selectVersion)
+  // Prevent menu from closing when the calendar is open
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
 
   return (
     <Menu
       closeOnItemClick={false}
+      closeOnClickOutside={!isCalendarOpen}
       opened={isOpen}
       onOpen={handlers.open}
       onClose={handlers.close}
@@ -359,7 +363,7 @@ export const SettingsMenu: FC = () => {
         <Menu.Divider />
         <CurrencySelect />
         <Menu.Divider />
-        <RealtimeRentMenu />
+        <RealtimeRentMenu isCalendarOpen={isCalendarOpen} setIsCalendarOpen={setIsCalendarOpen} />
         <ColorSchemeMenuItem />
         <Menu.Divider />
         <FetchDataSettings />