Skip to content
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: Strange onScroll behaviour when child editing #19156

Closed
vladislav-andreevich opened this issue Jun 18, 2020 · 7 comments
Closed

Bug: Strange onScroll behaviour when child editing #19156

vladislav-andreevich opened this issue Jun 18, 2020 · 7 comments
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@vladislav-andreevich
Copy link

vladislav-andreevich commented Jun 18, 2020

React version: 16.13.1
OS: Mac OS
Browser: Chrome 83.0.4103.97

Steps To Reproduce

  1. Create a div and add onScroll event to it
  2. Create input inside the created div
  3. Start typing in the input box.

The current behavior

Event onScroll is fired on the parent.

The expected behavior

Scroll event should not fire.

Link to code example:

https://codepen.io/vladislav-andreevich/pen/zYroQjN

@vladislav-andreevich vladislav-andreevich added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jun 18, 2020
@JoaoVitoGomes
Copy link

I haven't worked on React yet, I am still looking, but I did some digging. It seems like this is the intended behavior of React: #5622. I'd wait for someone else to verify.

@guy490
Copy link

guy490 commented Jun 19, 2020

I have worked on React, but I think its a bug because "onScroll" should happen when we scroll.
in this situation, we are not scrolling something, we only enter text so I think that's an issue.
@JoaoVitoGomes
It is correct that the event should be caught on the parent, but in this issue, there is no event to catch because there is no scrolling happen.

@JoaoVitoGomes
Copy link

JoaoVitoGomes commented Jun 21, 2020

It is correct that the event should be caught on the parent, but in this issue, there is no event to catch because there is no scrolling happen.

The input element fires a scroll event. I don't think this is a bug.

@guy490
Copy link

guy490 commented Jun 22, 2020

The input element fires a scroll event. I don't think this is a bug.

Yes, but as I see in Vanilla JS code it does not fire a scroll event, and at this React "feature" it fires an event :)

@illuminist
Copy link

It's weird that one of my machine still run on older version of chromium(80.0.3987.163) and scroll event doesn't fire on react component. But another machine with latest chromium(83.0.4103.61) fires the event.

@stale
Copy link

stale bot commented Oct 4, 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Oct 4, 2020
@gaearon
Copy link
Collaborator

gaearon commented Oct 4, 2020

React 17 doesn't bubble scroll events so this would be fixed.
With React 16 or lower, you can add if (e.target === e.currentTarget) condition to your handler.

@gaearon gaearon closed this as completed Oct 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

5 participants