New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: setState in onFocus breaks onChange event in Concurrent Mode #19385
Comments
This sounds a bit like an oversimplification. Concurrent Mode has several differences in behavior (some of them would still change before the release) so it's not expected that 100% of the code would work. Otherwise it wouldn't be a mode. That said, if you can reduce this to a small repro case that doesn't involve third-party libraries, we can take a close look. I don't think it's going to be scalable for us to look at every single issue from every single third-party library. So far, there hasn't been conclusive evidence that there is a bug in React based on what you wrote. |
So the best way to diagnose this is to copy and paste Checkbox code into your sandbox, and then start removing things until you find the minimal possible repro. |
That makes sense -- I will try to isolate and find a repro that proves it's a React issue, will close for now. |
Ok, I think I have a pretty minimal reproduction that shows the same issue when using plain ole React here: https://stackblitz.com/edit/react-concurrent-checkbox?file=src%2FCheckbox.js The same My understanding of the internals of the React event system is limited, but I know that it is trying to dispatch the click event, but I get kind of lost trying to follow the stack of where that dispatch goes in Legacy mode that it doesn't in Concurrent. Would love some assistance debugging. |
I took a brief look, and the issue seems to stem from |
Just wanted to follow up that we have some related changes planned in this area in the next months to simplify the model, so we'll be looking at this bug after those changes. |
I wanted to note that if you do onFocus = e => {
ReactDOM.flushSync(() => {
this.setState({ isFocused: true });
this.props.onFocus(e);
});
}; this fixes the problem as a temporary workaround. |
👋 any update on this bug? I know it's prerelease software and it would be unreasonable to have any expectations, but, I have hacked in the |
Closing in favor of #18591 which describes the same issue. Current workaround is explained in #18591 (comment). Test for this bug can be found in #19617. |
This appears to be fixed with some flags we're planning to enable. Here's the sandbox demonstrating it (note it's built from #20792 rather than https://codesandbox.io/s/samc-focus-demo-forked-7mbkl?file=/src/App.js CM version looks fixed. There's still an issue with the Blocking Mode version, but we'll be addressing it separately in a different way. |
Here's the reduced sandbox, also fixed when the same flags are enabled. https://codesandbox.io/s/samc-focus-demo-forked-8znoo?file=/src/App.js |
The latest Also, Blocking Mode was deleted altogether so that part is solved too. |
Using concurrent mode on
0.0.0-experimental-7f28234f8
makes<Checkbox/>
from Baseweb stop firingonChange
events.Baseweb is a popular set of React components that reflects real world usage patterns such that maybe it should work right off the bat with Concurrent mode. Feel free to close if you're confident this is a userland problem and not a framework problem, but I think this may indicate an incompatibility between Concurrent Mode and Legacy mode that isn't documented or warned about it if so, because
<Checkbox/>
isn't doing anything too fancy and doesn't use deprecated APIs or warn when rendered in Strict mode or Concurrent mode. I feel like that means it's supposed to just work, right?React version:
0.0.0-experimental-7f28234f8
Steps To Reproduce
<Checkbox/>
rendered using Legacy mode and note that it checks<Checkbox/>
rendered using Concurrent mode and note that it does not checkSee issue here: https://baseweb-react-concurrent-checkbox.stackblitz.io (edit here: https://stackblitz.com/edit/baseweb-react-concurrent-checkbox?file=src/index.js)
I've been trying to debug and haven't found any smoking guns yet, but there are some interesting tidbits I can share that might allude to if this is a React bug or a Baseweb bug:
onFocus
andonBlur
handlers fire just fine on both modes<Checkbox/>
doesn't usefindDOMNode
or other deprecated APIs in Concurrent mode as best I can tell. No warnings are fired when rendering it in Strict mode or Concurrent + Strict modeCheckbox
by tabbing and pressing space checks and fires theonChange
handler on both Legacy and Concurrent modeSee https://github.com/uber/baseweb/issues/3476 for the
baseweb
issue.The text was updated successfully, but these errors were encountered: