[release/1.x] Close dateinput popover

packages/datetime/src/dateInput.tsx

@@ -8,6 +8,7 @@ import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
 import * as ReactDayPicker from "react-day-picker";
+import * as ReactDOM from "react-dom";
 
 import {
     AbstractComponent,
@@ -184,6 +185,7 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
     public static displayName = "Blueprint.DateInput";
 
     private inputRef: HTMLElement = null;
+    private lastPopoverElement: HTMLElement = null;
 
     public constructor(props?: IDateInputProps, context?: any) {
         super(props, context);
@@ -198,15 +200,29 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
         };
     }
 
+    public componentWillUnmount() {
+        this.unregisterPopoverBlurHandler();
+        super.componentWillUnmount();
+    }
+
     public render() {
         const { value, valueString } = this.state;
         const dateString = this.state.isInputFocused ? valueString : this.getDateString(value);
         const date = this.state.isInputFocused ? this.createMoment(valueString) : value;
         const dateValue = this.isMomentValidAndInRange(value) ? fromMomentToDate(value) : null;
+        const dayPickerProps = {
+            ...this.props.dayPickerProps,
+            onMonthChange: () => setTimeout(this.registerPopoverBlurHandler, 0),
+        };
 
         const popoverContent =
             this.props.timePrecision === undefined ? (
-                <DatePicker {...this.props} onChange={this.handleDateChange} value={dateValue} />
+                <DatePicker
+                    {...this.props}
+                    dayPickerProps={dayPickerProps}
+                    onChange={this.handleDateChange}
+                    value={dateValue}
+                />
             ) : (
                 <DateTimePicker
                     canClearSelection={this.props.canClearSelection}
@@ -307,7 +323,7 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
         return isMomentInRange(value, this.props.minDate, this.props.maxDate);
     }
 
-    private handleClosePopover = (e: React.SyntheticEvent<HTMLElement>) => {
+    private handleClosePopover = (e?: React.SyntheticEvent<HTMLElement>) => {
         const { popoverProps = {} } = this.props;
         Utils.safeInvoke(popoverProps.onClose, e);
         this.setState({ isOpen: false });
@@ -434,6 +450,7 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
                 this.setState({ isInputFocused: false });
             }
         }
+        this.registerPopoverBlurHandler();
         this.safeInvokeInputProp("onBlur", e);
     };
 
@@ -447,10 +464,37 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
             // the page. tabbing forward should *not* close the popover, because
             // focus will be moving into the popover itself.
             this.setState({ isOpen: false });
+        } else if (e.which === Keys.ESCAPE) {
+            this.setState({ isOpen: false });
+            this.inputRef.blur();
         }
         this.safeInvokeInputProp("onKeyDown", e);
     };
 
+    private registerPopoverBlurHandler = () => {
+        const node = ReactDOM.findDOMNode(this);
+        const tabbableElements = node.querySelectorAll("[tabindex]:not([tabindex='-1'])");
+        const numOfElements = tabbableElements.length;
+        if (numOfElements) {
+            const lastPopoverElement = tabbableElements[numOfElements - 1] as HTMLElement;
+            if (this.lastPopoverElement !== lastPopoverElement) {
+                this.unregisterPopoverBlurHandler();
+                this.lastPopoverElement = lastPopoverElement;
+                this.lastPopoverElement.addEventListener("blur", this.handlePopoverBlur);
+            }
+        }
+    };
+
+    private unregisterPopoverBlurHandler = () => {
+        if (this.lastPopoverElement) {
+            this.lastPopoverElement.removeEventListener("blur", this.handlePopoverBlur);
+        }
+    };
+
+    private handlePopoverBlur = () => {
+        this.handleClosePopover();
+    };
+
     private setInputRef = (el: HTMLElement) => {
         this.inputRef = el;
         const { inputProps = {} } = this.props;

packages/datetime/test/dateInputTests.tsx

@@ -63,6 +63,31 @@ describe("<DateInput>", () => {
         assert.isFalse(wrapper.find(Popover).prop("isOpen"));
     });
 
+    it("Popover closes when ESC key pressed", () => {
+        const wrapper = mount(<DateInput openOnFocus={true} />);
+        const input = wrapper.find("input");
+        input.simulate("focus");
+        const popover = wrapper.find(Popover);
+        assert.isTrue(popover.prop("isOpen"));
+        input.simulate("keydown", { which: Keys.ESCAPE });
+        assert.isFalse(popover.prop("isOpen"));
+    });
+
+    it("Popover closes when last tabbable component is blurred", () => {
+        const wrapper = mount(<DateInput openOnFocus={true} />);
+        const input = wrapper.find("input");
+        input.simulate("focus");
+        const popover = wrapper.find(Popover);
+        assert.isTrue(popover.prop("isOpen"));
+        input.simulate("blur");
+        const lastTabbable = popover
+            .find(".DayPicker-Day--outside")
+            .last()
+            .getDOMNode() as HTMLElement;
+        lastTabbable.dispatchEvent(new Event("blur"));
+        assert.isFalse(popover.prop("isOpen"));
+    });
+
     it("setting timePrecision renders a TimePicker", () => {
         const wrapper = mount(<DateInput timePrecision={TimePickerPrecision.SECOND} />).setState({ isOpen: true });
         // assert TimePicker appears