diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index 95809b7a1b5b4..1113694361ac6 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -2659,4 +2659,41 @@ describe('ReactDOMComponent', () => { document.body.removeChild(container); } }); + + describe('iOS Tap Highlight', () => { + it('adds onclick handler to elements with onClick prop', () => { + const container = document.createElement('div'); + + const elementRef = React.createRef(); + function Component() { + return
{}} />; + } + + ReactDOM.render(, container); + expect(typeof elementRef.current.onclick === 'function').toBeTruthy(); + }); + + it('adds onclick handler to a portal root', () => { + const container = document.createElement('div'); + const portalContainer = document.createElement('div'); + + function Component() { + return ReactDOM.createPortal(
{}} />, portalContainer); + } + + ReactDOM.render(, container); + expect(typeof portalContainer.onclick === 'function').toBeTruthy(); + }); + + it('does not add onclick handler to the React root', () => { + const container = document.createElement('div'); + + function Component() { + return
{}} />; + } + + ReactDOM.render(, container); + expect(typeof container.onclick === 'function').toBeFalsy(); + }); + }); }); diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index a9dd23f2fac3c..827bb1896fde2 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -360,7 +360,7 @@ export function appendChildToContainer( // event exists. So we wouldn't see it and dispatch it. // This is why we ensure that containers have inline onclick defined. // https://github.com/facebook/react/issues/11918 - if (parentNode.onclick === null) { + if (!container._reactRootContainer && parentNode.onclick === null) { // TODO: This cast may not be sound for SVG, MathML or custom elements. trapClickOnNonInteractiveElement(((parentNode: any): HTMLElement)); }