-
Notifications
You must be signed in to change notification settings - Fork 566
Description
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 on Parent
element is fired when Children
element is scrolled.
Why this is weird and might lead to unexpected bugs? Imagine following situation:
- You have some scrollable component
A
where you are doing something when onScroll fires - Then somebody introduces another scrollable component
B
as a children of your component - When
B
is scrolled youronScroll
handler on componentA
is also fired. - To mitigate this you need to add some checks like this one:
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