<p dir="auto">We need to host a standalone React component (DraftJS editor) inside a HTML5 application which will run on other JS framework, or even plain JS or jQuery.<br>
The code of the application is beyond our control, we are just a vendor of a component which adds some content, part of which is this React-based editor.</p>
<p dir="auto">Anyway, the most important part is that we need to add the component with the following code to an existing DIV.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const editor = ReactDOM.render(
    React.createElement(
      EditorComponent,
      props
    ),
    divElem
  );"><pre class="notranslate"><code class="notranslate">const editor = ReactDOM.render(
    React.createElement(
      EditorComponent,
      props
    ),
    divElem
  );
</code></pre></div>
<p dir="auto">EditorComponent is a regular React component with some onClick events attached to its content (primarily toolbar buttons for the editor).</p>
<p dir="auto">I learned that React event model and its bubbling executes independently after the event bubbles all the way up to the document, and that if ev.stopPropagation() is called on native event, React events won't execute at all.<br>
That is understandable for situations where document contains only the React app / component at its root and no other content, meaning you have control over all events on the page from React code.</p>
<p dir="auto">However, when React component is just a small fraction of the entire page, it may be severely influenced by the rest of the page.<br>
The problem is that any event handling code above the component which calls ev.stopPropagation() cuts of the events of that smaller fraction, even that the event originated from the React component scope.<br>
That influencing code could very well be just some jQuery plugin, so even author of the page may not be able to rewrite their code for some special event handling.</p>
<p dir="auto">Here is a fiddle to demonstrate that: <a href="https://jsfiddle.net/martinh_kentico/kept9anh/3/" rel="nofollow">https://jsfiddle.net/martinh_kentico/kept9anh/3/</a></p>
<p dir="auto">I believe that the point where the event chain breaks, allowing React to execute its events, should be the root element of React component, rather than the whole document.<br>
This way, React root element could be considered an isolation edge of the React application / component.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/11004903/21673497/7d6a11b8-d329-11e6-9642-9d7427331fb1.png"><img src="https://cloud.githubusercontent.com/assets/11004903/21673497/7d6a11b8-d329-11e6-9642-9d7427331fb1.png" alt="reactevents" style="max-width: 100%;"></a></p>
<p dir="auto">I tracked the React event registration down to function ReactDOMComponent.ensureListeningTo(...) where I found the following code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
  listenTo(registrationName, doc);"><pre class="notranslate"><code class="notranslate">  var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
  listenTo(registrationName, doc);
</code></pre></div>
<p dir="auto">I tried to change <code class="notranslate">containerInfo._ownerDocument</code> to <code class="notranslate">containerInfo._node</code> to register the React event chain to the root of the React container, and tried it for several basic events (onClick, onMouseDown/Up) and it seems working for us as expected.<br>
React events are not influenced by stopping propagation at the native events outside of React component root, so the two differently implemented parts of the application can coexist in peace.</p>
<p dir="auto">I am not sure why _ownerDocument was chosen over _node in the implementation and if changing it to _node could break something important.</p>
<p dir="auto">Please advise if the proposed solution seems viable (in that case consider a change to that), or for what reasons you wouldn't recommend it.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nathansobo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nathansobo">@nathansobo</a> will that help your event perf issues a bit? I'm not familiar with atom's plugin infrastructure, But this'll help if you have <code class="notranslate">&lt;Editor/&gt;&lt;Plugin1/&gt;</code> (two <code class="notranslate">renderComponent</code>s). Doesn't help if you have <code class="notranslate">&lt;Editor&gt;&lt;Plugin1/&gt;&lt;/Editor&gt;</code> though, but I have some ideas to optimize events a bit more.</p>
<p dir="auto">This is nonetheless an ok idea, I think.<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/spicyj/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/spicyj">@spicyj</a></p>