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();