diff --git a/src/index.tsx b/src/index.tsx index d9c41b260..8ea9ce071 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -515,9 +515,13 @@ export default class DatePicker extends Component< this.resetHiddenStatus(); } - if (!this.state.preventFocus && isOpenAllowed) { + if (!this.state.preventFocus) { this.props.onFocus?.(event); - if (!this.props.preventOpenOnFocus && !this.props.readOnly) { + if ( + isOpenAllowed && + !this.props.preventOpenOnFocus && + !this.props.readOnly + ) { this.setOpen(true); } } diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 08d13f2b1..c8208647f 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -119,6 +119,32 @@ describe("DatePicker", () => { expect(container.querySelector(".react-datepicker")).toBeFalsy(); }); + it("should be executed props.onFocus on input focus when the document visibility changes", () => { + const onFocusSpy = jest.fn(); + + const { container } = render(); + + const input = safeQuerySelector(container, "input"); + + fireEvent.focus(input); + expect(onFocusSpy).toHaveBeenCalled(); + + expect(container.querySelector(".react-datepicker")).toBeTruthy(); + fireEvent.keyDown(input, getKey(KeyType.Escape)); + fireEvent.blur(input); + expect(container.querySelector(".react-datepicker")).toBeFalsy(); + + hideDocument(input); + showDocument(input); + + expect(onFocusSpy).toHaveBeenCalled(); + expect(container.querySelector(".react-datepicker")).toBeFalsy(); + + fireEvent.click(input); + expect(onFocusSpy).toHaveBeenCalled(); + expect(container.querySelector(".react-datepicker")).toBeTruthy(); + }); + it("should show the calendar when focusing on the date input", () => { const { container } = render();