date-range-fix (#1673)

* add debounce to date input fields in date range picker to properly format dates w/ burnettk

* use descriptive ruff ids for pre-commit w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

.pre-commit-config.yaml

@@ -25,7 +25,7 @@ repos:
         language: system
         types: [text]
         stages: [commit, push, manual]
-      - id: ruff
+      - id: ruff-check
         args: [check, --fix]
         files: ^spiffworkflow-backend/
         name: ruff
@@ -36,7 +36,7 @@ repos:
         # this is also specified in spiffworkflow-backend/pyproject.toml but we run pre-commit
         # with all-files which ignores that
         exclude: "/migrations/"
-      - id: ruff
+      - id: ruff-format
         args: [format]
         files: ^spiffworkflow-backend/
         name: ruff

spiffworkflow-frontend/src/config.tsx

@@ -98,7 +98,7 @@ const supportedDateFormatTypes = {
   dd: '01',
 };
 const unsupportedFormatTypes = splitDateFormat.filter(
-  (x) => !Object.keys(supportedDateFormatTypes).includes(x)
+  (x) => !Object.keys(supportedDateFormatTypes).includes(x),
 );
 const formattedSupportedDateTypes: string[] = [];
 Object.entries(supportedDateFormatTypes).forEach(([key, value]) => {
@@ -107,8 +107,8 @@ Object.entries(supportedDateFormatTypes).forEach(([key, value]) => {
 if (unsupportedFormatTypes.length > 0) {
   throw new Error(
     `Given SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_DATE_FORMAT is not supported. Given: ${generalDateFormat} with invalid options: ${unsupportedFormatTypes.join(
-      ', '
-    )}. Valid options are: ${formattedSupportedDateTypes.join(', ')}`
+      ', ',
+    )}. Valid options are: ${formattedSupportedDateTypes.join(', ')}`,
   );
 }
 const carbonDateFormat = generalDateFormat

spiffworkflow-frontend/src/rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../../config';
 import { getCommonAttributes } from '../../helpers';
 import DateAndTimeService from '../../../services/DateAndTimeService';
+import { useDebouncedCallback } from 'use-debounce';
 
 interface widgetArgs {
   id: string;
@@ -42,20 +43,20 @@ export default function DateRangePickerWidget({
     label,
     schema,
     uiSchema,
-    rawErrors
+    rawErrors,
   );
 
   const onChangeLocal = useCallback(
     (dateRange: Date[]) => {
       let dateRangeString;
       const startDate = DateAndTimeService.convertDateObjectToFormattedString(
-        dateRange[0]
+        dateRange[0],
       );
       if (startDate) {
         const startDateYMD =
           DateAndTimeService.dateStringToYMDFormat(startDate);
         const endDate = DateAndTimeService.convertDateObjectToFormattedString(
-          dateRange[1]
+          dateRange[1],
         );
         dateRangeString = startDateYMD;
         if (endDate) {
@@ -65,7 +66,7 @@ export default function DateRangePickerWidget({
       }
       onChange(dateRangeString);
     },
-    [onChange]
+    [onChange],
   );
 
   let dateValue: (Date | null)[] | null = value;
@@ -85,6 +86,17 @@ export default function DateRangePickerWidget({
     dateValue = [startDate, endDate];
   }
 
+  const addDebouncedOnChangeDate = useDebouncedCallback(
+    (fullObject: React.ChangeEvent<HTMLInputElement>) => {
+      fullObject.target.value =
+        DateAndTimeService.attemptToConvertUnknownDateStringFormatToKnownFormat(
+          fullObject.target.value,
+        );
+    },
+    // delay in ms
+    100,
+  );
+
   return (
     <DatePicker
       className="date-input"
@@ -97,6 +109,7 @@ export default function DateRangePickerWidget({
         id={`${id}-start`}
         placeholder={DATE_FORMAT_FOR_DISPLAY}
         helperText={commonAttributes.helperText}
+        labelText=""
         type="text"
         size="md"
         autocomplete="off"
@@ -105,10 +118,12 @@ export default function DateRangePickerWidget({
         invalidText={commonAttributes.errorMessageForField}
         autoFocus={autofocus}
         pattern={null}
+        onChange={addDebouncedOnChangeDate}
       />
       <DatePickerInput
         id={`${id}-end`}
         placeholder={DATE_FORMAT_FOR_DISPLAY}
+        labelText=""
         type="text"
         size="md"
         autocomplete="off"
@@ -116,6 +131,7 @@ export default function DateRangePickerWidget({
         invalid={commonAttributes.invalid}
         autoFocus={autofocus}
         pattern={null}
+        onChange={addDebouncedOnChangeDate}
       />
     </DatePicker>
   );