react-block-ui
react-block-ui copied to clipboard
Availity
Warning: unstable_flushDiscreteUpdates
For react deps:
"react": "^16.9.0",
"react-block-ui": "^1.3.1",
"react-color": "^2.17.3",
"react-dom": "^16.9.0",
There is now this warning showing up
Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
in BlockUi
Looks like it has something to do with the focus calls based on this code comment: https://github.com/facebook/react/blob/c80678c7606b1895573c23182bfb9a418e2ad31e/packages/react-reconciler/src/ReactFiberWorkLoop.js#L605-L607
I'm not sure how to address this.
What is happening with this issue guys ?
No one has picked up this issue if you want to take it. Just a warning so not a top concern.
Looks like it has something to do with the focus calls based on this code comment: https://github.com/facebook/react/blob/c80678c7606b1895573c23182bfb9a418e2ad31e/packages/react-reconciler/src/ReactFiberWorkLoop.js#L605-L607
I'm not sure how to address this.
In my private fork I have replaced
if (typeof this.focused.focus === 'function') { this.focused.focus(); }
with
if (typeof this.focused.focus === 'function') { const focusedControl = this.focused; window.setInterval(() => { focusedControl.focus(); }, 100); }
A hack, no doubt, but seems to be working so far,,,
@vitaly-redkin Can you please make a pull request for that ? :) Thank you
@vitaly-redkin Can you please make a pull request for that ? :) Thank you
I probably can but what is the point? The PR to use UNSAFE_ methods for componentWillXXX (https://github.com/Availity/react-block-ui/pull/46) is not merged - and probably will not.
My local version has both UNSAFE_ and "wrap this.focusedControl.focus() into setTimeout()" changes so it will break the same tests as the previous PR did. So it will not be merged, etc.
Personally I made my change to serve as a temporary solution and waiting for the hooks rewrite...
Yes i understand . How about you pull reuqest only the wrap this.focusedControl.focus() into setTimeout() , i am having that annoying errors in production code .
@vitaly-redkin No prob fill free to drop a pull request when you have time :)
😂 😂 😂 😂 😂 😂 😂 😂 😂
I am making bug fixes right now bro for an app.
On Wed, 25 Dec 2019, 19:05 Kyle Gray, [email protected] wrote:
No it’s Christmas 🎄
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Availity/react-block-ui/issues/40?email_source=notifications&email_token=AE3OFQCUN2I4N4KSMW6TF3LQ2OHFTA5CNFSM4IODXYEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHUPUJY#issuecomment-568916519, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE3OFQBYLGRVE5UP3S3EXP3Q2OHFTANCNFSM4IODXYEA .
I use BlockUi with redux-saga to block screen when fetching data from back-end. I thought this warning happens when the fetching time is too short. So I delayed some time after data is fetched but the result was same even with delaying time more than 1 or 3 seconds. On the other hand, stating BlockUi with button, no warning happens even though I click the buttons twice as quick as possible. I don't understand why it actually happens.
@Joe-Cristop it's happening because the dom (in this case x.focus()) is being manipulated outside of react before react has time to finish its rendering process. Adding a slight delay is why the timeout works in most cases.
I had a similar issue on unrelated code but google lead me here. I was able to fix a similar issue in my code using the useEffect hook with the proper dependencies. However, this looks to be a class so calling the focus in the appropriate render stage (didmount/updated/ etc) with the appropriate condition check should eliminate the error.
my og code with the error
if(!open && ref.current){ ref.current.focus(); }
updated code without error
useEffect(()=>{ if(!open && ref.current){ ref.current.focus(); } }, [open]);
I don't use this library and Idk what is calling your update but maybe this helps y'all out.
I found why it is happening; in my case below; When I remove value={name} ;It works well. But when I re-render this element, I want to use in the state value. Is there any other way to use state value when I render this element again? Because currently, it is getting ustable_flushDiscreteUpdates.
My so simple example;
<TextField id="name" onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setName(e.target.value)} value={name}> </TextField>
Did anyone find the solution to this issue? I am using "react-block-ui": "^1.3.3"
I don't have a repro - but based on the above example the issue may be that you're calling focus inside of render, instead of an effect.
