Fix #5274: 🐛 Auto refresh the input value with the previously entered valid value if any invalid value is entered (when the open state is closed)

src/index.tsx

@@ -564,6 +564,10 @@ export default class DatePicker extends Component<
       this.props.onBlur?.(event);
     }
 
+    if (this.state.open && this.props.open === false) {
+      this.setOpen(false);
+    }
+
     this.setState({ focused: false });
   };
 

src/test/datepicker_test.test.tsx

@@ -1,7 +1,7 @@
 import { render, act, waitFor, fireEvent } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { enUS, enGB } from "date-fns/locale";
-import React from "react";
+import React, { useState } from "react";
 
 import {
   KeyType,
@@ -4243,4 +4243,44 @@ describe("DatePicker", () => {
       });
     });
   });
+
+  describe("input reset", () => {
+    const renderDatePickerInput = () => {
+      const WrapperComponent = () => {
+        const [date, setDate] = useState<Date | null>(new Date());
+        return <DatePicker open={false} selected={date} onChange={setDate} />;
+      };
+
+      return render(<WrapperComponent />);
+    };
+
+    it("should reset the date input element with the previously entered value element on blur even when the calendar open is false", () => {
+      const { container } = renderDatePickerInput();
+      const input = safeQuerySelector(container, "input") as HTMLInputElement;
+
+      if (!input) {
+        throw new Error("Input element not found");
+      }
+
+      fireEvent.click(input);
+      const DATE_VALUE = "02/22/2025";
+      fireEvent.change(input, {
+        target: {
+          value: DATE_VALUE,
+        },
+      });
+      fireEvent.blur(input);
+      expect(input.value).toBe(DATE_VALUE);
+
+      fireEvent.click(input);
+      const INVALID_DATE_VALUE = "2025-02-45";
+      fireEvent.change(input, {
+        target: {
+          value: INVALID_DATE_VALUE,
+        },
+      });
+      fireEvent.blur(input);
+      expect(input.value).toBe(DATE_VALUE);
+    });
+  });
 });