There is a React component with onClick . This component is not placed in the root. Between the root and the component there is a click handler with stopPropagation . As a result, onClick onClick will not work, because React listens to all events on the root element .

We go further, we try to catch the native JS and assign it to the place where it is prevented, we get the following code . As a result, all the native events work, but the reactor events do not. How to make Reakta events work?

  • And the option to call handleClick inside the handle will not work? - Michael Radionov
  • As the most emergency case, you need to be very careful when working with the DOM from under the React and clean up after yourself. About cross-browser === off generally keep quiet. The order of execution of events is also a footstep ... generally speaking, it’s sad to hang up the native handlers for each one, having a megabyte library - MiF
  • I did not find any other more or less adequate solutions, mainly crutches, up to the use of react test utils to generate an event. For a "manual" call, even if they are written like react-click-outside and react-outside-event . Strange somehow ... I just don’t really understand why the reactor listens to the document, and not for example the root element to which the application is bound? - Michael Radionov
  • Most likely, this is done for simpler handling of situations when the reactant pushes a component to another node, such as react-modal , for example. they greatly simplify their lives, avoiding heaps of leaflets and duplication of events. As for the generation of events with test utilities, it is better not to even try to use it (in this situation). Yes, it is, but as far as I remember, only in dev mode, while the dev build is 2-3 times slower than prod (recently an article about the performance of the 15th reactor skipped). - MiF

1 answer 1

A reaction listens to events with a method similar to the delegate of jQuery, and it hangs on the body . Accordingly, the event must reach the body and have an e.target somewhere inside a component that is premaught with a reaction.
As it was written in English by the stackflow , we can send the event ourselves, but the target cannot be deceived and the Reaktovsky delegate will not work. In the same article I left a more detailed answer.
The bottom line: now it is impossible to treat this bug.