diff --git a/src/index.tsx b/src/index.tsx index 8ea9ce0719..9b56474093 100644 --- a/src/index.tsx +++ b/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 }); }; diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 7b8e54a0b1..6d75a1b1c8 100644 --- a/src/test/datepicker_test.test.tsx +++ b/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(new Date()); + return ; + }; + + return render(); + }; + + 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); + }); + }); });