Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DateInput popover closes when clicking TimePicker arrow after changing month #3474

Closed
gjvoosten opened this issue Apr 12, 2019 · 2 comments · Fixed by #4240
Closed

DateInput popover closes when clicking TimePicker arrow after changing month #3474

gjvoosten opened this issue Apr 12, 2019 · 2 comments · Fixed by #4240
Labels
help wanted P2 Package: datetime Type: bug

Comments

@gjvoosten
Copy link
Contributor

gjvoosten commented Apr 12, 2019 •
edited
Loading

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:

  1. set the Date format to YYYY-MM-DD HH:mm:ss (moment)
  2. set the Time precision to e.g. Minute
  3. click in the date input field
  4. go to the previous (or next) month
  5. 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 #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
Copy link

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

@jez321 jez321 mentioned this issue Jul 23, 2020
Merged
2 tasks
@IzaGz
Copy link

IzaGz commented Apr 2, 2021

Same problem , all latest versoins installed, please help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted P2 Package: datetime Type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[datetime] fix(DateInput): don't close when clicking time arrows jez321/blueprint
4 participants
@gjvoosten @adidahiya @maullerz @IzaGz