From 3682222395d88e6e507539518109abcdc197393e Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Sun, 20 Oct 2024 10:44:33 +0530 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Firefox=20date=20input?= =?UTF-8?q?=20refocus=20issue=20on=20Tab=20Key=20press=20by=20deferring=20?= =?UTF-8?q?the=20blur=20operation=20to=20the=20next=20event=20loop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close #5084 --- src/index.tsx | 13 +++++++++---- src/test/datepicker_test.test.tsx | 23 +++++++++++++++++++++-- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index c78256aaa..3d6869788 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -452,6 +452,14 @@ export default class DatePicker extends Component< } }; + safeBlur = () => { + setTimeout(() => { + if (this.input && this.input.blur) { + this.input.blur(); + } + }, 0); + }; + setFocus = () => { if (this.input && this.input.focus) { this.input.focus({ preventScroll: true }); @@ -459,10 +467,7 @@ export default class DatePicker extends Component< }; setBlur = () => { - if (this.input && this.input.blur) { - this.input.blur(); - } - + this.safeBlur(); this.cancelFocusInput(); }; diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 02371fe87..827e3a9b7 100644 --- a/src/test/datepicker_test.test.tsx +++ b/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(); + 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; const onBlur: React.FocusEventHandler = ( @@ -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", () => { From d07308d3860389449e069ad766b966467d328a2c Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Sun, 20 Oct 2024 10:52:19 +0530 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20Fix=20the=20Esc=20key=20inpu?= =?UTF-8?q?t=20refocus=20issue=20by=20deferring=20the=20focus=20operation?= =?UTF-8?q?=20to=20the=20next=20event=20loop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - This issue is caused due to the defer blur made in the commit 36822223 is getting executed after the focus operation for the ESC key press Close #5084 --- src/index.tsx | 12 +++++++++--- src/test/datepicker_test.test.tsx | 6 ++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 3d6869788..afa55a566 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -452,6 +452,14 @@ export default class DatePicker extends Component< } }; + safeFocus = () => { + setTimeout(() => { + if (this.input && this.input.focus) { + this.input.focus({ preventScroll: true }); + } + }, 0); + }; + safeBlur = () => { setTimeout(() => { if (this.input && this.input.blur) { @@ -461,9 +469,7 @@ export default class DatePicker extends Component< }; setFocus = () => { - if (this.input && this.input.focus) { - this.input.focus({ preventScroll: true }); - } + this.safeFocus(); }; setBlur = () => { diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 827e3a9b7..883a6d952 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -1983,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; @@ -2001,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"); From 2019c8e8ebaf8d9b837581efa07860e266a2a943 Mon Sep 17 00:00:00 2001 From: Balaji Sridharan Date: Mon, 21 Oct 2024 14:13:59 +0530 Subject: [PATCH 3/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Simplify=20the=20focus?= =?UTF-8?q?=20and=20blur=20call=20with=20modern=20ES6=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index afa55a566..1b4186971 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -454,17 +454,13 @@ export default class DatePicker extends Component< safeFocus = () => { setTimeout(() => { - if (this.input && this.input.focus) { - this.input.focus({ preventScroll: true }); - } + this.input?.focus?.({ preventScroll: true }); }, 0); }; safeBlur = () => { setTimeout(() => { - if (this.input && this.input.blur) { - this.input.blur(); - } + this.input?.blur?.(); }, 0); };