date picker dialog close unexpectedly when user moves focus from hour field to minutes field by pressing tab button.

[archual]

Environment

-@blueprintjs/datetime: 4.4.7

Code Sandbox

https://codesandbox.io/s/focused-booth-2zvvgb?file=/src/index.tsx

Steps to reproduce

1. Click inside dateInput
2. Click in hour field, set 10
3. Click tab

Actual behavior

Modal dialog close automaticaly

Expected behavior

focus moves to minute field, I can set minutes

Possible solution

Problem is onBlur event in hour field call onSelection event and dialog closes. If set closeOnSelection prop in true - all works, but we want to close dialog after clicking on day.

[adidahiya]

@archual your code sandbox is a bit too contrived. It doesn't set the value state in the onChange handler. Your example works fine if you do that and the user selects a date first before selecting a time (which seems like a natural UX flow to me):

https://codesandbox.io/s/fervent-roentgen-niqfu1?file=/src/index.tsx

[archual]

Hello, @adidahiya. Thank you for fast replay! Yes, my codebox is not complete (we have controlled component with some complecated logic, so I didn't realize it here and it doesn't matter in our case) and all works good, if select date first. But our customers want to set date and time and don't want open dialog twice, so they set time first, than select the date. And close dialog by tabbing between fields is not right? I will discuss UX with our customers, but for me it works bad now. Also dialog closes if we use arrow for changing time.

[adidahiya]

But our customers want to set date and time and don't want open dialog twice, so they set time first, than select the date.

In this case can you simply set a default/initial date for them? Then it should be possible to select a time first, then update the date.