From 6b0625ea5df7b5aa15c1ae879b055ce1ea56bbd8 Mon Sep 17 00:00:00 2001
From: jasquat <2487833+jasquat@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:18:52 -0500
Subject: [PATCH] added debounce to rjsf date picker to avoid converting dates
 too early when typing (#909)

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
---
 .../BaseInputTemplate/BaseInputTemplate.tsx   | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/spiffworkflow-frontend/src/rjsf/carbon_theme/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/rjsf/carbon_theme/BaseInputTemplate/BaseInputTemplate.tsx
index ab6d425e..874b3b61 100644
--- a/spiffworkflow-frontend/src/rjsf/carbon_theme/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/rjsf/carbon_theme/BaseInputTemplate/BaseInputTemplate.tsx
@@ -8,6 +8,7 @@ import {
 } from '@rjsf/utils';
 
 import { useCallback } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import { DATE_FORMAT_CARBON, DATE_FORMAT_FOR_DISPLAY } from '../../../config';
 import DateAndTimeService from '../../../services/DateAndTimeService';
 import { getCommonAttributes } from '../../helpers';
@@ -55,21 +56,30 @@ export default function BaseInputTemplate<
   };
 
   const _onChange = useCallback(
-    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
-      onChange(value === '' ? options.emptyValue : value),
+    ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(target.value === '' ? options.emptyValue : target.value);
+    },
     [onChange, options]
   );
   const _onBlur = useCallback(
-    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-      onBlur(id, value),
+    ({ target }: React.FocusEvent<HTMLInputElement>) =>
+      onBlur(id, target.value),
     [onBlur, id]
   );
   const _onFocus = useCallback(
-    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-      onFocus(id, value),
+    ({ target }: React.FocusEvent<HTMLInputElement>) =>
+      onFocus(id, target.value),
     [onFocus, id]
   );
 
+  const addDebouncedOnChangeDate = useDebouncedCallback(
+    (target: React.ChangeEvent<HTMLInputElement>) => {
+      _onChange(target);
+    },
+    // delay in ms
+    1000
+  );
+
   const commonAttributes = getCommonAttributes(
     label,
     schema,
@@ -108,7 +118,7 @@ export default function BaseInputTemplate<
           value={dateValue}
           autocomplete="off"
           allowInput={false}
-          onChange={_onChange}
+          onChange={addDebouncedOnChangeDate}
           invalid={commonAttributes.invalid}
           invalidText={commonAttributes.errorMessageForField}
           autoFocus={autofocus}