-
Notifications
You must be signed in to change notification settings - Fork 560
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
onScroll event propagation #175
Comments
If you'd like to file an RFC, please send a pull request. |
@O4epegb Yes this is indeed weird behavior. React also bubbles Something a few of us (not the core team) have been working on is a new ReactDOM event API that's independent of the existing event props. This allows us to have a fresh start and undo some of these decisions. In the meantime, I think your mitigation strategy (or calling stopPropagation) is a suitable work-around. |
There's also media events that all have the same problem. |
I would not call it a problem. |
It seems like that behaviour gonna be fixed in v 17. |
So, since React bubbles all its events, even the ones that the browser doesn't bubble by default, there is some weird behaviour with onScroll event.
Example: https://codesandbox.io/s/httpsgithubcomreactjsrfcsissues175-viizc
onScroll
callback onParent
element is fired whenChildren
element is scrolled.Why this is weird and might lead to unexpected bugs? Imagine following situation:
A
where you are doing something when onScroll firesB
as a children of your componentB
is scrolled youronScroll
handler on componentA
is also fired.e.target === e.currentTarget
Basically it means that you need to add this check every time you add
onScroll
to any element because you can not be sure that nothing scrollable will be introduced down the tree later.I think there are more events like this, for example
onSubmit
, but at least you can't put<form>
inside another<form>
.It might be worth to reconsider event bubbling in the future.
Issue discussion facebook/react#15723
The text was updated successfully, but these errors were encountered: