refactor(time-input): simplify isInvalid logic

heroui-inc · Jul 7, 2024 · 7cea350 · 7cea350
1 parent f2d04ef
commit 7cea350
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/packages/components/date-input/__tests__/time-input.test.tsx b/packages/components/date-input/__tests__/time-input.test.tsx
@@ -180,6 +180,32 @@ describe("TimeInput", () => {
         }
       }
     });
+
+    it("should support error message (with isInvalid)", function () {
+      const {getAllByRole, getByRole} = render(
+        <TimeInput isInvalid errorMessage="Error message" label="Time" />,
+      );
+
+      const group = getByRole("group");
+
+      expect(group).toHaveAttribute("aria-describedby");
+
+      if (group) {
+        const descById = group.getAttribute("aria-describedby");
+        const description = descById && document.getElementById(descById);
+
+        expect(description).toHaveTextContent("Error message");
+
+        const segments = getAllByRole("spinbutton");
+
+        for (const segment of segments) {
+          expect(segment).toHaveAttribute(
+            "aria-describedby",
+            group.getAttribute("aria-describedby"),
+          );
+        }
+      }
+    });
   });
 
   describe("Events", function () {

diff --git a/packages/components/date-input/src/use-time-input.ts b/packages/components/date-input/src/use-time-input.ts
@@ -87,7 +87,6 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
     endContent,
     className,
     classNames,
-    validationState,
     groupProps = {},
     labelProps: labelPropsProp,
     fieldProps: fieldPropsProp,
@@ -97,7 +96,7 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
     shouldForceLeadingZeros = true,
     minValue,
     maxValue,
-    isInvalid: isInvalidProp = validationState ? validationState === "invalid" : false,
+    isInvalid: isInvalidProp,
     errorMessage,
   } = props;
 
@@ -115,6 +114,7 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
     minValue,
     maxValue,
     validationBehavior,
+    isInvalid: isInvalidProp,
     shouldForceLeadingZeros,
   });
 
@@ -126,13 +126,11 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
     validationDetails,
     descriptionProps,
     errorMessageProps,
-    isInvalid: ariaIsInvalid,
+    isInvalid,
   } = useAriaTimeField({...originalProps, label, validationBehavior, inputRef}, state, domRef);
 
   const baseStyles = clsx(classNames?.base, className);
 
-  const isInvalid = isInvalidProp || ariaIsInvalid;
-
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
     if (
       (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&