Merge pull request #1119 from jetstreamapp/bug/1117-query-editor-date…

…-picker Fix inline editor date picker
jetstreamapp · Dec 20, 2024 · 611034c · 611034c
2 parents 0d9011b + 64135e0
commit 611034c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/libs/ui/src/lib/data-table/DataTableEditors.tsx b/libs/ui/src/lib/data-table/DataTableEditors.tsx
@@ -253,6 +253,7 @@ export function DataTableEditorDate<TRow extends { _idx: number }, TSummaryRow>(
         initialSelectedDate={currDate}
         openOnInit
         inputProps={{ autoFocus: true }}
+        trigger="onBlur"
         onChange={(value) => {
           /** setTimeout is used to avoid a React error about flushSync being called during a render */
           setTimeout(() => {

diff --git a/libs/ui/src/lib/form/date/DatePicker.tsx b/libs/ui/src/lib/form/date/DatePicker.tsx
@@ -10,6 +10,7 @@ import { isSameDay } from 'date-fns/isSameDay';
 import { isValid as isValidDate } from 'date-fns/isValid';
 import { parseISO } from 'date-fns/parseISO';
 import { startOfDay } from 'date-fns/startOfDay';
+import contains from 'document.contains';
 import { ChangeEvent, FunctionComponent, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import PopoverContainer from '../../popover/PopoverContainer';
 import OutsideClickHandler from '../../utils/OutsideClickHandler';
@@ -40,6 +41,7 @@ export interface DatePickerProps {
   inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
   usePortal?: boolean;
   openOnInit?: boolean;
+  trigger?: 'onChange' | 'onBlur';
   onChange: (date: Date | null) => void;
 }
 
@@ -65,6 +67,7 @@ export const DatePicker: FunctionComponent<DatePickerProps> = ({
   inputProps,
   openOnInit = false,
   usePortal = false,
+  trigger = 'onChange',
   onChange,
 }) => {
   initialSelectedDate = isValidDate(initialSelectedDate) ? initialSelectedDate : undefined;
@@ -115,13 +118,26 @@ export const DatePicker: FunctionComponent<DatePickerProps> = ({
     setValue(value);
     try {
       const currDate = parseISO(value);
-      if (isValidDate(currDate)) {
+      if (isValidDate(currDate) && trigger === 'onChange') {
         setSelectedDate(currDate);
       } // else invalid date
     } catch (ex) {
       // invalid date
     }
-    if (value === '') {
+    if (value === '' && trigger === 'onChange') {
+      onChange(null);
+    }
+  }
+
+  function handleBlur(event: ChangeEvent<HTMLInputElement>) {
+    if (trigger !== 'onBlur' || contains(popoverRef, event.target)) {
+      return;
+    }
+    const currDate = parseISO(value);
+    if (isValidDate(currDate) && selectedDate && !isSameDay(currDate, selectedDate)) {
+      setSelectedDate(currDate);
+    }
+    if (value === '' && selectedDate) {
       onChange(null);
     }
   }
@@ -183,6 +199,7 @@ export const DatePicker: FunctionComponent<DatePickerProps> = ({
             className="slds-input"
             value={value}
             onChange={onValueChange}
+            onBlur={handleBlur}
             readOnly={readOnly}
             onClick={() => {
               if (!isOpen) {
@@ -206,7 +223,7 @@ export const DatePicker: FunctionComponent<DatePickerProps> = ({
             {!readOnly && <Icon type="utility" icon="event" className="slds-button__icon" omitContainer description="Select a date" />}
           </button>
         </div>
-        <div className="slds-form-element__help">mm/dd/yyyy</div>
+        <div className="slds-assistive-text slds-form-element__help">yyyy-mm-dd</div>
         <PopoverContainer
           ref={setPopoverRef}
           isOpen={isOpen}