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?!
10 Replies
extended-salmonOP•3y ago
I suspect that firefox date picker triggers a re-render which is unnecessary... but I don't know for sure. Would love some advice.
ratty-blush•3y ago
does the picker in firefox maybe trigger a window focus event, so the refetchOnWindowFocus triggers?
just a guess from the title, I find the message pretty hard to parse 🙈 . A reproduction would be better 😅
extended-salmonOP•3y ago
I know...I had a code sandbox, but without an actual useQuery then it works... lol So I thought it was useless to put it here...
extended-salmonOP•3y ago
stoic-ganguly-l3ubi2
CodeSandbox is an online editor tailored for web applications.
ratty-blush•3y ago
so can you disable refetchOnWindowFocus just to check my theory?
extended-salmonOP•3y ago
on useQuery?
Wow... it works!
all I do is to add
refetchOnWindowFocus: false to this useQuery...
I will test a bit more in prod and report back hereratty-blush•3y ago
we've fixed this in v5 by not listening to this event. it's in alpha if you want to give it a try 🙂
extended-salmonOP•3y ago
Oh nice, when will it be fully released?
ratty-blush•3y ago
when its done
extended-salmonOP•3y ago
I will use this flag for now, but will update once its released. Thanks for help!