Merge pull request #5179 from qburst/issue-5084/fix/firefox-tab-issue

🐛 Fix #5084: Fixfox Tab switch issue

Author: martijnrusschen

src/index.tsx

@@ -452,17 +452,24 @@ export default class DatePicker extends Component<
     }
   };
 
+  safeFocus = () => {
+    setTimeout(() => {
+      this.input?.focus?.({ preventScroll: true });
+    }, 0);
+  };
+
+  safeBlur = () => {
+    setTimeout(() => {
+      this.input?.blur?.();
+    }, 0);
+  };
+
   setFocus = () => {
-    if (this.input && this.input.focus) {
-      this.input.focus({ preventScroll: true });
-    }
+    this.safeFocus();
   };
 
   setBlur = () => {
-    if (this.input && this.input.blur) {
-      this.input.blur();
-    }
-
+    this.safeBlur();
     this.cancelFocusInput();
   };
 

src/test/datepicker_test.test.tsx

@@ -580,7 +580,24 @@ describe("DatePicker", () => {
     });
   });
 
-  it("should hide the calendar when the pressing Shift + Tab in the date input", () => {
+  it("should auto-close the datepicker and lose focus when Tab key is pressed when the date input is focused", async () => {
+    const { container } = render(<DatePicker />);
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
+
+    let reactCalendar = container.querySelector("div.react-datepicker");
+    expect(reactCalendar).not.toBeNull();
+
+    fireEvent.keyDown(input, getKey(KeyType.Tab));
+
+    reactCalendar = container.querySelector("div.react-datepicker");
+    expect(reactCalendar).toBeNull();
+    await waitFor(() => {
+      expect(document.activeElement).not.toBe(input);
+    });
+  });
+
+  it("should hide the calendar when the pressing Shift + Tab in the date input", async () => {
     // eslint-disable-next-line prefer-const
     let onBlurSpy: ReturnType<typeof jest.spyOn>;
     const onBlur: React.FocusEventHandler<HTMLElement> = (
@@ -594,7 +611,9 @@ describe("DatePicker", () => {
     fireEvent.focus(input);
     fireEvent.keyDown(input, getKey(KeyType.Tab, true));
     expect(container.querySelector(".react-datepicker")).toBeNull();
-    expect(onBlurSpy).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(onBlurSpy).toHaveBeenCalled();
+    });
   });
 
   it("should not apply the react-datepicker-ignore-onclickoutside class to the date input when closed", () => {
@@ -1964,7 +1983,7 @@ describe("DatePicker", () => {
     });
     expect(div.querySelector("input")).toBe(document.activeElement);
   });
-  it("should autoFocus the input when calling the setFocus method", () => {
+  it("should autoFocus the input when calling the setFocus method", async () => {
     const div = document.createElement("div");
     document.body.appendChild(div);
     let instance: DatePicker | null = null;
@@ -1982,7 +2001,9 @@ describe("DatePicker", () => {
     act(() => {
       instance!.setFocus();
     });
-    expect(div.querySelector("input")).toBe(document.activeElement);
+    await waitFor(() => {
+      expect(div.querySelector("input")).toBe(document.activeElement);
+    });
   });
   it("should clear preventFocus timeout id when component is unmounted", () => {
     const div = document.createElement("div");