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.

Sign up for GitHub

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

Jump to bottom

Checkbox onClick and onChange fire too late #1247

Closed
thejohnfreeman opened this issue Jan 29, 2017 · 4 comments
Closed

Checkbox onClick and onChange fire too late #1247

thejohnfreeman opened this issue Jan 29, 2017 · 4 comments

Comments

@thejohnfreeman
Copy link

thejohnfreeman commented Jan 29, 2017 •
edited
Loading

Steps

  1. Inject a Semantic-UI-React (SUIR) Checkbox as a child of an element with an onclick handler. Granted, this likely isn't a problem if your entire page is built with SUIR, but I do not have that luxury in my use case.
  2. Add an onClick handler to the SUIR Checkbox that calls event.stopPropagation().

Expected Result

The parent element's onclick handler should not be called.

Actual Result

The parent element's onclick handler is called before the Checkbox's onClick.

Version

0.64.0

Testcase

https://codepen.io/anon/pen/dNZBrr
@thejohnfreeman
Copy link
Author

In further testing, I'm seeing some weird behavior with just React and simple HTML elements. React-mounted elements have their event capture and bubble after elements that start in the HTML. Is this expected? I'll take my issue over to the React project as well. Here is a new test case.

@thejohnfreeman
Copy link
Author

Mystery solved: this is due to React's choice to only support attaching listeners to the <html> element. I will have to use componentDidMount and addEventListener myself.

@levithomason
Copy link
Member

Bear in mind React is a JS implementation of the DOM, aka, the virtual DOM. The event system in React is not the event system that is in the browser. These are two different mechanisms with two different APIs firing at two different times

https://facebook.github.io/react/docs/events.html
https://facebook.github.io/react/docs/handling-events.html

A React app can be loaded on part of the page as well. However, React must own all DOM interaction including events and manipulation.

@thejohnfreeman
Copy link
Author

Fully aware of the virtual DOM, but only just learned React lets events escape and bubble through the page instead of scoping them to the virtual DOM. I would phrase it as "React assumes it owns all DOM interaction".

@levithomason levithomason mentioned this issue Jan 31, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thejohnfreeman @levithomason