From 64135e0d0d108c9d26ee32e157c7ef5e84f161a4 Mon Sep 17 00:00:00 2001
From: Austin Turner <paustint@gmail.com>
Date: Thu, 19 Dec 2024 21:07:20 -0700
Subject: [PATCH] Fix inline editor date picker

The date picker would close when the user entered a valid date, prior to entering the entire date. This was resolved by not emitting the change until the element is blurred and the date was modified and is valid

resolves #1117
---
 .../src/lib/data-table/DataTableEditors.tsx   |  1 +
 libs/ui/src/lib/form/date/DatePicker.tsx      | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/libs/ui/src/lib/data-table/DataTableEditors.tsx b/libs/ui/src/lib/data-table/DataTableEditors.tsx
index 250417d5..78f4d238 100644
--- 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
index d791caaa..d0fc5712 100644
--- 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}