DateInput popover closes when clicking TimePicker arrow after changing month

gjvoosten commented 5 years ago

Environment

Package version(s): @blueprintjs/datetime 3.19.0, @blueprintjs/datetime 3.14.0
Browser and OS versions: FF, Chrome, IE11

Steps to reproduce

Make the following change to the DateInput example:

diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
index ada2350..ffc6ddb 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
@@ -59,6 +59,7 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
                     defaultValue={new Date()}
                     onChange={this.handleDateChange}
                     popoverProps={{ position: Position.BOTTOM }}
+                    timePickerProps={this.state.timePrecision ? {showArrowButtons: true} : undefined}
                 />
                 <MomentDate date={date} />
             </Example>

then:

set the Date format to YYYY-MM-DD HH:mm:ss (moment)
set the Time precision to e.g. Minute
click in the date input field
go to the previous (or next) month
click one of the time picker arrows (up or down)

Actual behavior

The DateInput popover is closed, time in the input field is unchanged.

Expected behavior

The DateInput popover stays open, time in the input field is updated.

Possible solution

The whole thing appears to balance on how registerPopoverBlurHandler() in dateInput.tsx works: when clicking next/previous month, this registers a blur handler. When clicking on a time picker arrow (an svg), e.relatedTarget inside handlePopoverBlur(e) is null/undefined and document.activeElement is <body> (that is, since 3.9.0 i.e. my own PR https://github.com/palantir/blueprint/pull/3471 — not that it is functionally any different for 3.8.0). So the code assumes there was a click somewhere else and closes the popover.

I've looked into various approaches to tackle this, but haven't found anything that would fit. I'm willing to help make this work, let me know!

maullerz commented 4 years ago

Happens to me also. DateInput's Popover with showArrowButtons doesn't catch clicks on arrow buttons and closes.

    "@blueprintjs/core": "^3.29.0",
    "@blueprintjs/datetime": "^3.18.3",

IzaGz commented 3 years ago

Same problem , all latest versoins installed, please help!

palantir / blueprint