Trap click events for portal root (#11927)
* Trap click events for portal root * Trap click event on container in appendChildToContainer * Add a comment
Brandon Dail committed
Aug 17, 2018 at 19:10 UTC
b3a4cfea577e3333941a7cb2b01d2b957988e00b
2 files changed
+18
-3
packages/react-dom/src/client/ReactDOMFiberComponent.js
+1
-1
@@ -228,7 +228,7 @@ function getOwnerDocumentFromRootContainer(
228
229
function noop() {}
230
231
-function trapClickOnNonInteractiveElement(node: HTMLElement) {
231
+export function trapClickOnNonInteractiveElement(node: HTMLElement) {
232
// Mobile Safari does not fire properly bubble click events on
233
// non-interactive elements, which means delegated click listeners do not
234
// fire. The workaround for this bug involves attaching an empty click
packages/react-dom/src/client/ReactDOMHostConfig.js
+17
-2
@@ -16,6 +16,7 @@ import {
16
updateProperties,
17
diffHydratedProperties,
18
diffHydratedText,
19
+ trapClickOnNonInteractiveElement,
20
warnForUnmatchedText,
21
warnForDeletedHydratableElement,
22
warnForDeletedHydratableText,
@@ -343,10 +344,24 @@ export function appendChildToContainer(
344
container: Container,
345
child: Instance | TextInstance,
346
): void {
347
+ let parentNode;
348
if (container.nodeType === COMMENT_NODE) {
347
- (container.parentNode: any).insertBefore(child, container);
349
+ parentNode = (container.parentNode: any);
350
+ parentNode.insertBefore(child, container);
351
} else {
349
- container.appendChild(child);
352
+ parentNode = container;
353
+ parentNode.appendChild(child);
354
+ }
355
+ // This container might be used for a portal.
356
+ // If something inside a portal is clicked, that click should bubble
357
+ // through the React tree. However, on Mobile Safari the click would
358
+ // never bubble through the *DOM* tree unless an ancestor with onclick
359
+ // event exists. So we wouldn't see it and dispatch it.
360
+ // This is why we ensure that containers have inline onclick defined.
361
+ // https://github.com/facebook/react/issues/11918
362
+ if (parentNode.onclick === null) {
363
+ // TODO: This cast may not be sound for SVG, MathML or custom elements.
364
+ trapClickOnNonInteractiveElement(((parentNode: any): HTMLElement));
365
}
366
}
367