Determine event target in Shadow DOM correctly

Author: marionebl

fixtures/dom/src/components/Header.js

@@ -64,6 +64,7 @@ class Header extends React.Component {
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
+                <option value="/shadow-dom">Shadow DOM</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/index.js

@@ -11,6 +11,7 @@ import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
+import ShadowDom from './shadow-dom';
 
 const React = window.React;
 
@@ -46,6 +47,8 @@ function FixturesPage() {
       return <CustomElementFixtures />;
     case '/media-events':
       return <MediaEventsFixtures />;
+    case '/shadow-dom':
+      return <ShadowDom />;
     default:
       return <p>Please select a test fixture.</p>;
   }

fixtures/dom/src/components/fixtures/shadow-dom/index.js

@@ -0,0 +1,61 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const SUPPORTS_SHADOW_DOM = HTMLElement.prototype.hasOwnProperty('attachShadow');
+
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class SelectFixture extends React.Component {
+  render() {
+    if (!SUPPORTS_SHADOW_DOM) {
+      return <div>Browser does not support Shadow DOM, no tests to execute.</div>;
+    }
+
+    return (
+      <FixtureSet title="Shadow DOM" description="">
+        <TestCase title="Event listeners in shadow-dom" relatedIssues="4963">
+          <TestCase.Steps>
+            <li>Click on the orange box</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The box should turn green
+          </TestCase.ExpectedResult>
+          <Shadow>
+            <Box/>
+          </Shadow>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+}
+
+class Shadow extends React.Component {
+  componentDidMount() {
+    this.ref.attachShadow({mode: 'open'});
+    const el = document.createElement('div');
+    this.ref.shadowRoot.appendChild(el);
+    ReactDOM.render(this.props.children, el);
+  }
+
+  render() {
+    return <div ref={ref => this.ref = ref}/>;
+  }
+}
+
+class Box extends React.Component {
+  state = {active: false};
+
+  render() {
+    const style = {
+      height: 100,
+      background: this.state.active ? 'green' : 'orange',
+      color: 'white',
+      marginBottom: 20
+    };
+    return <div onClick={() => this.setState({active: !this.state.active})} style={style}/>
+  }
+}
+
+
+export default SelectFixture;

packages/react-dom/src/events/__tests__/getEventTarget-test.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2016-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+
+describe('getEventTarget', () => {
+  let container;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  describe('event on HTMLElement', () => {
+      it('has expected target', () => {
+        let actual;
+
+        class Comp extends React.Component {
+          render() {
+            return <div onClick={e => actual = e.target}><span /></div>;
+          }
+        }
+
+        ReactDOM.render(<Comp />, container);
+
+        const div = container.firstChild;
+        const span = div.firstChild;
+
+        div.dispatchEvent(new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        }));
+
+        expect(actual).toBe(div);
+
+        span.dispatchEvent(new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+        }));
+
+        expect(actual).toBe(span);
+      });
+  });
+});

packages/react-dom/src/events/getEventTarget.js

@@ -17,6 +17,12 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
 function getEventTarget(nativeEvent) {
   let target = nativeEvent.target || window;
 
+  // If composed / inside open shadow-dom use first item of composed path #9242
+  if (nativeEvent.composed) {
+    const path = nativeEvent.composedPath();
+    target = path[0];
+  }
+
   // Normalize SVG <use> element events #4963
   if (target.correspondingUseElement) {
     target = target.correspondingUseElement;