[DateRangePicker] Allow date picker popover to be closed by esc key press (#7033)

Author: ggdouglas

packages/datetime/src/components/date-range-input/dateRangeInput.tsx

@@ -630,10 +630,18 @@ export class DateRangeInput extends AbstractPureComponent<DateRangeInputProps, D
     private handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const isTabPressed = e.key === "Tab";
         const isEnterPressed = e.key === "Enter";
+        const isEscapeKeyPressed = e.key === "Escape";
         const isShiftPressed = e.shiftKey;
 
         const { selectedStart, selectedEnd } = this.state;
 
+        if (isEscapeKeyPressed) {
+            this.startInputElement?.blur();
+            this.endInputElement?.blur();
+            this.setState({ isOpen: false, isStartInputFocused: false, isEndInputFocused: false });
+            return;
+        }
+
         // order of JS events is our enemy here. when tabbing between fields,
         // this handler will fire in the middle of a focus exchange when no
         // field is currently focused. we work around this by referring to the

packages/datetime/test/components/dateRangeInputTests.tsx

@@ -602,6 +602,21 @@ describe("<DateRangeInput>", () => {
             expect(root.state("isOpen"), "popover closed at end").to.be.false;
         });
 
+        it("pressing Escape closes the popover", () => {
+            const { root } = wrap(<DateRangeInput {...DATE_FORMAT} value={[null, null]} />);
+            root.setState({ isOpen: true });
+
+            const startInput = getStartInput(root);
+            startInput.simulate("focus");
+
+            expect(root.state("isOpen")).to.be.true;
+
+            startInput.simulate("keydown", { key: "Escape" });
+
+            expect(root.state("isOpen")).to.be.false;
+            expect(isStartInputFocused(root)).to.be.false;
+        });
+
         it("Clicking a date invokes onChange with the new date range and updates the input fields", () => {
             const defaultValue = [START_DATE, null] as DateRange;
 

packages/datetime2/src/components/date-range-input3/dateRangeInput3.tsx

@@ -484,10 +484,18 @@ export class DateRangeInput3 extends DateFnsLocalizedComponent<DateRangeInput3Pr
     private handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const isTabPressed = e.key === "Tab";
         const isEnterPressed = e.key === "Enter";
+        const isEscapeKeyPressed = e.key === "Escape";
         const isShiftPressed = e.shiftKey;
 
         const { selectedStart, selectedEnd } = this.state;
 
+        if (isEscapeKeyPressed) {
+            this.startInputElement?.blur();
+            this.endInputElement?.blur();
+            this.setState({ isOpen: false, isStartInputFocused: false, isEndInputFocused: false });
+            return;
+        }
+
         // order of JS events is our enemy here. when tabbing between fields,
         // this handler will fire in the middle of a focus exchange when no
         // field is currently focused. we work around this by referring to the

packages/datetime2/test/components/dateRangeInput3Tests.tsx

@@ -2343,6 +2343,21 @@ describe("<DateRangeInput3>", () => {
             assertDateRangesEqual(onChange.args[1][0], [START_STR, null]);
         });
 
+        it("pressing Escape closes the popover", () => {
+            const { root } = wrap(<DateRangeInput3 {...DATE_FORMAT} value={[null, null]} />);
+            root.setState({ isOpen: true });
+
+            const startInput = getStartInput(root);
+            startInput.simulate("focus");
+
+            expect(root.state("isOpen")).to.be.true;
+
+            startInput.simulate("keydown", { key: "Escape" });
+
+            expect(root.state("isOpen")).to.be.false;
+            expect(isStartInputFocused(root)).to.be.false;
+        });
+
         it("Clicking a date invokes onChange with the new date range and updates the input field text", () => {
             const onChange = sinon.spy();
             const { root, getDayElement } = wrap(