[release/1.x] Close dateinput popover #2093

mud · 2018-02-06T05:44:56Z

Changes proposed in this pull request:

This PR enables the dateinput popover to be closed:

after tabbing out of the last tabbable element inside the date popover
clicking ESC key

Currently, shift tabbing out of the dateinput will close the date popover, however, tabbing through the popover elements do not close the popover after tabbing out of the last tabbable element. ESC also does not have any effect.

Reviewers should focus on:

Is there a better way to implement this feature?

Screenshot

…element

giladgray

thanks @mud! looks pretty good, reasonable approach.

docs-app preview from 031cfdf

giladgray · 2018-02-06T18:46:58Z

packages/datetime/src/dateInput.tsx

    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),


why the timeout here? leave a code comment explaining why it's necessary

also, should safeInvoke(this.props.dayPickerProps.onMonthChange) in here, or suddenly that one prop is not supported.

add why timeout is required as comment

safeInvoke(this.props.dayPickerProps.onMonthChange)

giladgray · 2018-02-06T18:47:18Z

packages/datetime/src/dateInput.tsx

@@ -198,15 +200,29 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
        };
    }

+    public componentWillUnmount() {
+        this.unregisterPopoverBlurHandler();
+        super.componentWillUnmount();


call super first

call super first

giladgray · 2018-02-06T18:49:20Z

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", () => {


Popover provides this feature, and has corresponding tests. can we leverage it instead of reimplementing/testing here?
https://github.com/palantir/blueprint/blob/develop/packages/core/test/popover/popoverTests.tsx#L565

~~use popover's close implementation, remove this test~~

As mentioned up top, we still need the functionality for hitting ESC while the input is in focus. So I still think we need this.

giladgray · 2018-02-06T18:50:29Z

packages/datetime/src/dateInput.tsx

+        const node = ReactDOM.findDOMNode(this);
+        const tabbableElements = node.querySelectorAll("[tabindex]:not([tabindex='-1'])");
+        const numOfElements = tabbableElements.length;
+        if (numOfElements) {


avoid boolean coercion. tabbableElements.length > 0

tabbableElements.length > 0

giladgray · 2018-02-06T18:53:02Z

packages/datetime/src/dateInput.tsx

+        }
+    };
+
+    private handlePopoverBlur = () => {


no need for this method with optional arg in handleClosePopover, just use handleClosePopover directly

remove and call handleClosePopover

I had to do something like: (this.handleClosePopover as any) as EventListener which doesn't look great. Is removing the extra method still more preferable?

giladgray · 2018-02-06T18:58:47Z

packages/datetime/src/dateInput.tsx

@@ -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) {


popovers have a feature to closeOnEscapeKey... can we leverage that instead?

try adding an onInteraction handler to the Popover.

~~use closeOnEscapeKey and try onInteraction on the popover~~

Looks like without additional work, pressing ESC while focus is within the popover, the popover will close.

However, when the focus is on the input we still need to handle ESC and set the popover to close.

giladgray · 2018-02-06T18:59:49Z

packages/datetime/src/dateInput.tsx

        }
        this.safeInvokeInputProp("onKeyDown", e);
    };

+    private registerPopoverBlurHandler = () => {
+        const node = ReactDOM.findDOMNode(this);


i'm not a huge fan of using findDOMNode, tend to prefer refs. but this is alright.

maybe use refs?

I just wrapped the popover content since ReactDayPicker.Props doesn't have a prop to expose ref.

giladgray · 2018-02-06T19:00:42Z

packages/datetime/src/dateInput.tsx

        }
        this.safeInvokeInputProp("onKeyDown", e);
    };

+    private registerPopoverBlurHandler = () => {
+        const node = ReactDOM.findDOMNode(this);
+        const tabbableElements = node.querySelectorAll("[tabindex]:not([tabindex='-1'])");


any sense in supporting other focusable things like <button> or are we safe cuz the calendar contents are well-defined and only use tabIndex? (hoping we're safe... this is a rabbit hole)

check to see if we can reasonably support other focusable components

Actually, we will need to if we also want to support datetime.

mud · 2018-02-06T19:03:52Z

Sweet, thanks for the CR @giladgray. Will work on your comments.

giladgray · 2018-02-06T23:19:18Z

packages/datetime/src/dateInput.tsx

+            // for the updated month to be rendered
+            onMonthChange: (month: Date) =>
+                setTimeout(() => {
+                    Utils.safeInvoke(this.props.dayPickerProps.onMonthChange, month);


but this shouldn't be in the timeout, it should be called synchronously.

move safeInvoke out of setTimeout

giladgray · 2018-02-06T23:19:29Z

packages/datetime/src/dateInput.tsx

-            onMonthChange: () => setTimeout(this.registerPopoverBlurHandler, 0),
+            // dom elements for the updated month is not available when
+            // onMonthChange is called. setTimeout is necessary to wait
+            // for the updated month to be rendered


giladgray · 2018-02-06T23:19:58Z

packages/datetime/src/dateInput.tsx

+            // onMonthChange is called. setTimeout is necessary to wait
+            // for the updated month to be rendered
+            onMonthChange: (month: Date) =>
+                setTimeout(() => {


please use this.setTimeout instead, and remove unnecessary 0 arg. see https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/abstractComponent.ts#L43

use this.setTimeout remove 0

giladgray · 2018-02-06T23:20:57Z

packages/datetime/src/dateInput.tsx

@@ -232,6 +239,7 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
                    timePickerProps={{ ...this.props.timePickerProps, precision: this.props.timePrecision }}
                />
            );
+        const wrappedPopoverContent = <div ref={this.setContentRef}>{popoverContent}</div>;


another wrapper element 😢
guess that's how it is.

acknowledge sadness 😿

😂 feeling better already

giladgray · 2018-02-06T23:21:04Z

packages/datetime/src/dateInput.tsx

-                this.unregisterPopoverBlurHandler();
-                this.lastPopoverElement = lastPopoverElement;
-                this.lastPopoverElement.addEventListener("blur", this.handlePopoverBlur);
+        if (this.contentRef) {


avoid boolean coercion. != null

this.contentRef != null

giladgray · 2018-02-06T23:24:06Z

packages/datetime/src/dateInput.tsx

            }
        }
    };

    private unregisterPopoverBlurHandler = () => {
        if (this.lastPopoverElement) {
-            this.lastPopoverElement.removeEventListener("blur", this.handlePopoverBlur);
+            this.lastPopoverElement.removeEventListener("blur", (this.handleClosePopover as any) as EventListener);


oh whoa well if the alternative is an as any then just do the handlePopoverBlur, but put it all on one line with a comment.

// blur DOM event listener (not React event) private handlePopoverBlur = () => this.handleClosePopover();

use snippet above

giladgray · 2018-02-06T23:46:09Z

packages/datetime/src/dateInput.tsx

-                }, 0),
+            onMonthChange: (month: Date) => {
+                Utils.safeInvoke(this.props.dayPickerProps.onMonthChange, month);
+                this.setTimeout(this.registerPopoverBlurHandler);


giladgray · 2018-02-06T23:46:52Z

packages/datetime/src/dateInput.tsx

@@ -232,6 +239,7 @@ export class DateInput extends AbstractComponent<IDateInputProps, IDateInputStat
                    timePickerProps={{ ...this.props.timePickerProps, precision: this.props.timePrecision }}
                />
            );
+        const wrappedPopoverContent = <div ref={this.setContentRef}>{popoverContent}</div>;


😂 feeling better already

adidahiya · 2018-02-07T00:12:27Z

one min -- taking a look now

adidahiya · 2018-02-07T00:23:30Z

packages/datetime/src/dateInput.tsx

+        if (this.contentRef != null) {
+            // Popover contents are well structured, but the selector will need
+            // to be updated if more focusable components are added in the future
+            const tabbableElements = this.contentRef.querySelectorAll("input, [tabindex]:not([tabindex='-1'])");


note to self / @giladgray: we'll need to update this for dom4 v2

this is already updated. queryAll was removed.

adidahiya · 2018-02-07T00:24:43Z

packages/datetime/src/dateInput.tsx

+            const tabbableElements = this.contentRef.querySelectorAll("input, [tabindex]:not([tabindex='-1'])");
+            const numOfElements = tabbableElements.length;
+            if (numOfElements > 0) {
+                const lastPopoverElement = tabbableElements[numOfElements - 1] as HTMLElement;


why do we need to do all this (keep track of the last popover element and juggle the event handlers)? please leave comments

at first I thought this was the last popover element on the page, but it's actually more like lastElementInPopover

Add comment on why we keep track of lastPopoverElement

rename lastPopoverElement -> lastElementInPopover

adidahiya · 2018-02-07T00:24:58Z

packages/datetime/src/dateInput.tsx

+    };
+
+    private unregisterPopoverBlurHandler = () => {
+        if (this.lastPopoverElement) {


if (this.lastPopoverElement != null)

adidahiya · 2018-02-07T00:27:06Z

packages/datetime/src/dateInput.tsx

+                if (this.lastPopoverElement !== lastPopoverElement) {
+                    this.unregisterPopoverBlurHandler();
+                    this.lastPopoverElement = lastPopoverElement;
+                    this.lastPopoverElement.addEventListener("blur", this.handlePopoverBlur);


is this right? what if you TAB to the last element and then SHIFT+TAB to go backwards?

Actually, if you SHIFT+TAB on the last element, it will close. Will fix.

Handle SHIFT+TAB and make sure it focuses previous element.

…over element.

adidahiya · 2018-02-07T01:05:12Z

sorry, I meant to hint at the more general case -- blurring the last tabbable element in the popover can happen in a number of ways, and only one of them should close the popover through this new code you're adding (TAB forward). another case we should make sure to test is focussing that lastElementInPopover and then clicking somewhere inside the popover like the month dropdown menu -- this blurs the last element, but shouldn't close the popover.

giladgray · 2018-02-07T01:22:04Z

packages/datetime/src/dateInput.tsx

+    // keyboard DOM event listener (not React event)
+    private handlePopoverBlur = (e: KeyboardEvent) => {
+        if (e.which === Keys.TAB && !e.shiftKey) {
+            e.target.dispatchEvent(new FocusEvent("blur"));


why? this is suspicious. we're not in the habit of dispatching DOM events from blueprint code (except where absolutely necessary in tests).

giladgray · 2018-02-07T01:23:19Z

packages/datetime/src/dateInput.tsx

+                // Keep track of the last focusable element in popover and add
+                // a keydown handler, so that:
+                // * popover closes when the user tabs to the next element
+                // * or focus moves to previous element if shift+tab


something is wrong with the language in this comment. it doesn't parse correctly.

i think "popover closes:" belongs after "so that", but then the second bullet sounds incorrect.

…event. Using relatedTarget in focus event to see if focus moved out of popover or not.

mud · 2018-02-15T00:26:05Z

@giladgray @adidahiya can you take a look and see if we can get this merged?

giladgray

👍 looks good! sorry @mud, we're all focused on final 2.0 work

mud · 2018-02-15T20:39:52Z

np. good luck with 2.0!

mud added 3 commits February 5, 2018 17:38

date popover close on ESC

7f20c79

Close date popover after tabbing last tabbable date

85bb3d5

Add tests for dismissing popover with ESC and blurring last tabbable …

031cfdf

…element

giladgray suggested changes Feb 6, 2018

View reviewed changes

mud added 2 commits February 6, 2018 12:12

Addressed CR. Added support to work with TimePicker.

4f49526

Fixed test and lint

e6b3f41

giladgray reviewed Feb 6, 2018

View reviewed changes

Addressing CR comments

9fd606d

giladgray reviewed Feb 6, 2018

View reviewed changes

giladgray approved these changes Feb 6, 2018

View reviewed changes

adidahiya suggested changes Feb 7, 2018

View reviewed changes

mud added 2 commits February 6, 2018 16:52

Addressed CR. Allow shift+tab on last element to move to previous pop…

76253fe

…over element.

Updated comment to reflect the use of Keyboard event instead of blur

dafca2c

giladgray suggested changes Feb 7, 2018

View reviewed changes

mud added 2 commits February 6, 2018 20:34

Revert to using blur event instead of keydown and remove dispatching …

8745263

…event. Using relatedTarget in focus event to see if focus moved out of popover or not.

Add test cases for focus moving to month and year select

69dd5ca

giladgray approved these changes Feb 15, 2018

View reviewed changes

adidahiya approved these changes Feb 15, 2018

View reviewed changes

adidahiya merged commit a687739 into palantir:release/1.x Feb 15, 2018

adidahiya changed the title ~~Close dateinput popover~~ [release/1.x] Close dateinput popover Feb 19, 2018

adidahiya mentioned this pull request Sep 8, 2020

DatePicker popover close unexpectedly in Chrome when moving to min/max month #3603

Closed

ejose19 mentioned this pull request Sep 21, 2020

[datetime] fix(DateInput): Improve blur handling to avoid unexpected popover closures #4316

Merged

[release/1.x] Close dateinput popover #2093

[release/1.x] Close dateinput popover #2093

Conversation

mud commented Feb 6, 2018

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

giladgray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud commented Feb 6, 2018

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adidahiya commented Feb 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud Feb 7, 2018 • edited Loading

Choose a reason for hiding this comment

adidahiya commented Feb 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mud commented Feb 15, 2018

giladgray left a comment

Choose a reason for hiding this comment

mud commented Feb 15, 2018

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 6, 2018 •

edited

Loading

mud Feb 7, 2018 •

edited

Loading

mud Feb 7, 2018 •

edited

Loading

mud Feb 7, 2018 •

edited

Loading