fix: preserve DatePickerInput invalid state (#22005)

adamalston · web-flow · commit 34a9b3ebb92a · 2026-04-23T11:24:30.000Z
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -451,6 +451,26 @@ describe('DatePicker', () => {
         document.querySelector(`.${prefix}--date-picker__icon--warn`)
       ).not.toBeInTheDocument();
     });
+
+    it('should preserve invalid state from DatePickerInput when DatePicker is not invalid', () => {
+      render(
+        <DatePicker datePickerType="single">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            invalid
+            invalidText="Invalid date"
+          />
+        </DatePicker>
+      );
+
+      expect(screen.getByText('Invalid date')).toBeInTheDocument();
+      expect(screen.getByLabelText('Date Picker label')).toHaveAttribute(
+        'data-invalid',
+        'true'
+      );
+    });
   });
 });
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -440,7 +440,6 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
 
   const savedOnOpen = useSavedCallback(onOpen);
 
-  const effectiveWarn = warn && !invalid;
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -460,38 +459,43 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
   const childrenWithProps = React.Children.toArray(children as any).map(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     (child: any, index) => {
+      const childInvalid = child.props?.invalid;
+      const childWarn = child.props?.warn;
+      const mergedInvalid = invalid ?? childInvalid;
+      const mergedWarn = mergedInvalid ? false : (warn ?? childWarn);
+
       if (index === 0 && isComponentElement(child, DatePickerInput)) {
         return React.cloneElement(child, {
           datePickerType,
           ref: startInputField,
           readOnly,
-          invalid,
-          warn: effectiveWarn,
+          invalid: mergedInvalid,
+          warn: mergedWarn,
         });
       }
       if (index === 1 && isComponentElement(child, DatePickerInput)) {
         return React.cloneElement(child, {
           datePickerType,
           ref: endInputField,
           readOnly,
-          invalid,
-          warn: effectiveWarn,
+          invalid: mergedInvalid,
+          warn: mergedWarn,
         });
       }
       if (index === 0) {
         return React.cloneElement(child, {
           ref: startInputField,
           readOnly,
-          invalid,
-          warn: effectiveWarn,
+          invalid: mergedInvalid,
+          warn: mergedWarn,
         });
       }
       if (index === 1) {
         return React.cloneElement(child, {
           ref: endInputField,
           readOnly,
-          invalid,
-          warn: effectiveWarn,
+          invalid: mergedInvalid,
+          warn: mergedWarn,
         });
       }
     }
