Firefox Input type=date would trigger function after useQuery success to run again
I made a sandbox, but it tests as normal as I couldn't simulate the useQuery one on it.
However, a few console log helps me to discover some issues. Expected:
1. I set date to empty
2. after useQuery call is successful, I setDate with newly return value from response
3. then when I change the date with date picker, it should change the date to e.target.value
It's been working with Chrome, Edge, Safari, but not Firefox. The errors with Firefox is:
3. the e.target.value is changed, but setDate within the successful block of useQuery is called again, and reset the date to original, the one I got from response. So on UI I can never change anything.
However, the only fix is not to use the picker, but manually enter the date. It would then work.
Here is an example of console.log:
TEST DATE <empty string> - initial state
USE QUERY AFTER SUCCESS CALL - run query
TEST DATE <empty string>
TEST DATE 2023-03-01 - have set date to res.date as it's success
<now I am using the date picker on Firefox>
e.target.value 2023-03-04 - e.target.value shows I picked a different date
TEST DATE 2023-03-04 - first setDate is working as expected
USE QUERY AFTER SUCCESS CALL - this should NOT RUN, but it got run once again
TEST DATE 2023-03-01 - it sets date back to the res.date now, on UI it looks I can't change anything at all
<now I am trying manual enter the value, not using the picker>
e.target.value 2023-03-05 - picked a different value
TEST DATE 2023-03-05 - setDate changes it, as expected
Why would it happen like this? And how do we solve this issue?!
However, a few console log helps me to discover some issues. Expected:
1. I set date to empty
2. after useQuery call is successful, I setDate with newly return value from response
3. then when I change the date with date picker, it should change the date to e.target.value
It's been working with Chrome, Edge, Safari, but not Firefox. The errors with Firefox is:
3. the e.target.value is changed, but setDate within the successful block of useQuery is called again, and reset the date to original, the one I got from response. So on UI I can never change anything.
However, the only fix is not to use the picker, but manually enter the date. It would then work.
Here is an example of console.log:
TEST DATE <empty string> - initial state
USE QUERY AFTER SUCCESS CALL - run query
TEST DATE <empty string>
TEST DATE 2023-03-01 - have set date to res.date as it's success
<now I am using the date picker on Firefox>
e.target.value 2023-03-04 - e.target.value shows I picked a different date
TEST DATE 2023-03-04 - first setDate is working as expected
USE QUERY AFTER SUCCESS CALL - this should NOT RUN, but it got run once again
TEST DATE 2023-03-01 - it sets date back to the res.date now, on UI it looks I can't change anything at all
<now I am trying manual enter the value, not using the picker>
e.target.value 2023-03-05 - picked a different value
TEST DATE 2023-03-05 - setDate changes it, as expected
Why would it happen like this? And how do we solve this issue?!
