Fix "Now" in DateTime parameter not working

[gabrieldutra]

What type of PR is this? (check all applicable)

• Bug Fix

Description

I did find the cause for this bug, but with DatePicker methods and our current needs the only way I could think as a fix was to create an "unnecessary" state. Leaving this as WIP so @ranbena and @kravets-levko can join here (also I have to extend the fix to DateTimeRangeInput as a guarantee).

Antd's DatePicker provides the following callbacks:

• onChange: Triggered whenever you change the value on the dialog
• onOk: Triggered only when you click "ok"
• onOpenChange: Triggered when you open/close the dialog

onOpenChange seemed to be the most reliable event to trigger the update for the Query, so I used it by adding a state to track the value.

The cause for the issue: when you click "Now" it invokes onChange -> onOpenChange fast enough that the component doesn't update.
The workaround in this PR: Considering that React guarantees the order for setState I added a new state to use its callback to make sure currentValue would be updated.

BTW, onOk may seem a good solution, but it's not triggered when you click on "Now".

An alternative is to add the "Apply" button for this too, so the update event could be onChange with no problems. The con is that it's not the best to have both "Ok" and "Apply" to set the parameter.

Edit:

• Updated to use useRef instead.

Related Tickets & Documents

Closes #3803

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Dashboard

Query

[kravets-levko]

@gabrieldutra I analyzed the code a little bit and I found the bug. DateTimeInput uses useState to keep selected value while user changes selection to fire onChange event only when dropdown is closed. It works when user selects value and then presses "Ok" button: onChange -> setCurrentValue -> render -> "Ok" -> onOpenChange -> onChange (uses new value of currentValue) - keep in mind that functional components will "capture" props and state values until next render. So when user uses "Now" button - sequence is a bit different: onChange -> setCurrentValue -> onOpenChange (immediately!) -> onChange (uses captured previous value). So your fix works just because you switched from functional to class component, new state variable can be removed. Also, you can try to use useRef instead of useState - I tried it, it works as well.

[gabrieldutra]

Thanks @kravets-levko 😁

So your fix works just because you switched from functional to class component, new state variable can be removed.

I'd thought so, however this was one of my tests (the values differ):

Also, you can try to use useRef instead of useState

State seemed more the "React way", but useRef will be the best here indeed. I'll move to it 🙂.

[gabrieldutra]

@kravets-levko, updated to use useRef. Seems to be working fine and code much less polluted 👌

[kravets-levko]

Very nice fix (even better than I did in my experiments 😅)! And, of course, it works (I tested on query and dashboard page).