refactor(odyssey-react-mui): remove debounce error handling

okta · Jul 30, 2024 · 631367f · 631367f
1 parent 2aa6d24
commit 631367f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 57 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/DateField.tsx b/packages/odyssey-react-mui/src/labs/DateField.tsx
@@ -31,8 +31,6 @@ import { useTranslation } from "react-i18next";
 import { Field, RenderFieldComponentProps } from "../Field";
 import { TextFieldProps } from "../TextField";
 
-const VALIDATION_DELAY = 5000;
-
 export type DateFieldProps = {
   onChange?: (value: string) => void;
 } & Pick<
@@ -91,7 +89,6 @@ const DateField = ({
   const [displayedErrorMessage, setDisplayedErrorMessage] =
     useState(errorMessage);
 
-  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const internalValidationError = useRef<string | undefined>();
   const localInputRef = useRef<HTMLInputElement>(null);
 
@@ -107,12 +104,6 @@ const DateField = ({
     [],
   );
 
-  useEffect(() => {
-    return () => {
-      clearTimeout(debounceTimeoutRef?.current);
-    };
-  }, []);
-
   const checkMinMaxValidity = useCallback(
     (value: DateTime) => {
       const hasMinError = minDate && value.toUTC() < minDate.toUTC();
@@ -148,19 +139,7 @@ const DateField = ({
   const clearErrorMessages = useCallback(() => {
     setDisplayedErrorMessage(undefined);
     internalValidationError.current = undefined;
-    clearTimeout(debounceTimeoutRef.current);
-  }, [debounceTimeoutRef, internalValidationError, setDisplayedErrorMessage]);
-
-  const debounceErrorHandling = useCallback<(validationError: string) => void>(
-    (validationError) => {
-      const timeoutId = setTimeout(() => {
-        setDisplayedErrorMessage(validationError);
-      }, VALIDATION_DELAY);
-      clearTimeout(debounceTimeoutRef.current);
-      debounceTimeoutRef.current = timeoutId;
-    },
-    [],
-  );
+  }, [internalValidationError, setDisplayedErrorMessage]);
 
   const validateAndCallOnChange = useCallback<
     NonNullable<MuiDateFieldProps<DateTime>["onChange"]>
@@ -174,7 +153,6 @@ const DateField = ({
 
         if (odysseyValidationError) {
           internalValidationError.current = odysseyValidationError;
-          debounceErrorHandling(odysseyValidationError);
         }
       }
 
@@ -186,13 +164,7 @@ const DateField = ({
         }
       }
     },
-    [
-      checkMinMaxValidity,
-      clearErrorMessages,
-      debounceErrorHandling,
-      errorMap,
-      onChange,
-    ],
+    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],
   );
 
   const checkFieldValidityAndSetError = useCallback<
@@ -202,17 +174,13 @@ const DateField = ({
       if (internalValidationError?.current && !displayedErrorMessage) {
         setDisplayedErrorMessage(internalValidationError.current);
       }
-      clearTimeout(debounceTimeoutRef.current);
       onBlur?.(event);
     },
-    [
-      debounceTimeoutRef,
-      displayedErrorMessage,
-      internalValidationError,
-      onBlur,
-    ],
+    [displayedErrorMessage, internalValidationError, onBlur],
   );
 
+  const hasVisibleAdornment = !isReadOnly && !isDisabled;
+
   const renderFieldComponent = useCallback(
     ({
       ariaDescribedBy,
@@ -234,7 +202,11 @@ const DateField = ({
         InputProps={{
           error: Boolean(displayedErrorMessage || errorMessage),
           endAdornment: (
-            <InputAdornment position="end">{endAdornment}</InputAdornment>
+            <>
+              {hasVisibleAdornment && (
+                <InputAdornment position="end">{endAdornment}</InputAdornment>
+              )}
+            </>
           ),
         }}
         inputRef={localInputRef}
@@ -257,6 +229,7 @@ const DateField = ({
       endAdornment,
       errorMessage,
       hasInitialFocus,
+      hasVisibleAdornment,
       isDisabled,
       localInputRef,
       minDate,

diff --git a/packages/odyssey-react-mui/src/labs/DatePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePicker.tsx
@@ -31,7 +31,6 @@ import {
 } from "@mui/x-date-pickers";
 import { DateTime } from "luxon";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
-import { InputAdornment } from "@mui/material";
 import styled from "@emotion/styled";
 
 import { Button } from "../Button";
@@ -185,7 +184,6 @@ const DatePicker = ({
 
   const {
     defaultedLanguageCode,
-    // displayedErrorMessage,
     formatDateTimeToUtcIsoDateString,
     inputValues,
     internalTimeZone,
@@ -254,26 +252,18 @@ const DatePicker = ({
 
   const renderDateField = useCallback(
     ({ defaultValue, inputRef, value }: RenderDateFieldProps) => {
-      const hasVisibleAdornment = !isReadOnly && !isDisabled;
-
       return (
         <DateField
           defaultValue={defaultValue}
           endAdornment={
-            <>
-              {hasVisibleAdornment && (
-                <InputAdornment position="end">
-                  <Button
-                    ariaLabel={t("picker.labels.date.choose")}
-                    label=""
-                    size="small"
-                    startIcon={<CalendarIcon />}
-                    variant="floating"
-                    onClick={toggleCalendarVisibility}
-                  />
-                </InputAdornment>
-              )}
-            </>
+            <Button
+              ariaLabel={t("picker.labels.date.choose")}
+              label=""
+              onClick={toggleCalendarVisibility}
+              size="small"
+              startIcon={<CalendarIcon />}
+              variant="floating"
+            />
           }
           errorMessage={errorMessage}
           hint={hint}
@@ -291,7 +281,6 @@ const DatePicker = ({
       );
     },
     [
-      // displayedErrorMessage,
       errorMessage,
       hint,
       internalTimeZone,