From 098be75415753caa4bc609abde50f1ce93a1211a Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 22 Nov 2022 19:01:50 +0000 Subject: [PATCH] Fix click leaking through to DOM element underneath See comment, although this is quite hack - I'm torn on whether this is worth it for the bugfix. Upgrading react-aria doesn't fix it either (and also breaks everything in React strict mode). Fixes https://github.com/vector-im/element-call/issues/762 --- src/ListBox.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/ListBox.tsx b/src/ListBox.tsx index 16b7f05a..175f459d 100644 --- a/src/ListBox.tsx +++ b/src/ListBox.tsx @@ -73,6 +73,19 @@ function Option({ item, state, className }: OptionProps) { ref ); + // Hack: remove the onPointerUp event handler and re-wire it to + // onClick. Chrome Android triggers a click event after the onpointerup + // event which leaks through to elements underneath the z-indexed select + // popover. preventDefault / stopPropagation don't have any effect, even + // adding just a dummy onClick handler still doesn't work, but it's fine + // if we handle just onClick. + // https://github.com/vector-im/element-call/issues/762 + const origPointerUp = optionProps.onPointerUp; + delete optionProps.onPointerUp; + optionProps.onClick = (e) => { + origPointerUp(e as unknown as React.PointerEvent); + }; + return (