calendar UX improvements

Author: RafaelGB

src/components/cellTypes/CalendarCell.tsx

@@ -51,7 +51,6 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings()
     );
-    setShowDatePicker(false);
   }
 
   const CalendarContainer = (containerProps: any) => {
@@ -60,8 +59,11 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
     );
   };
 
-  const onClickOutside = () => {
-    setShowDatePicker(false);
+  const closeEditCalendarCell = () => {
+    // We need a delay to allow the click event of clearing the date to propagate
+    setTimeout(() => {
+      setShowDatePicker(false);
+    }, 100);
   };
 
   return showDatePicker ? (
@@ -74,7 +76,8 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       }
       onChange={handleCalendarChange}
       popperContainer={CalendarContainer}
-      onClickOutside={onClickOutside}
+      onClickOutside={closeEditCalendarCell}
+      onCalendarClose={closeEditCalendarCell}
       autoFocus
       isClearable
       ariaLabelClose="Clear"

src/components/cellTypes/CalendarTimeCell.tsx

@@ -52,7 +52,6 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings()
     );
-    setShowDatePicker(false);
   }
 
   const CalendarContainer = (containerProps: any) => {
@@ -61,6 +60,13 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
     );
   };
 
+  const closeEditCalendarTimeCell = () => {
+    // We need a delay to allow the click event of clearing the date to propagate
+    setTimeout(() => {
+      setShowDatePicker(false);
+    }, 100);
+  };
+
   return showDatePicker &&
     (tableColumn.isMetadata === undefined || !tableColumn.isMetadata) ? (
     <DatePicker
@@ -72,7 +78,8 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       }
       onChange={handleCalendarChange}
       popperContainer={CalendarContainer}
-      onClickOutside={() => setShowDatePicker(false)}
+      onClickOutside={closeEditCalendarTimeCell}
+      onCalendarClose={closeEditCalendarTimeCell}
       timeFormat="HH:mm"
       timeCaption="time"
       showTimeSelect