From 098be75415753caa4bc609abde50f1ce93a1211a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 22 Nov 2022 19:01:50 +0000
Subject: [PATCH 1/3] 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 16b7f05..175f459 100644
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -73,6 +73,19 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
     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<HTMLElement>);
+  };
+
   return (
     <li
       {...optionProps}

From 40a0958e0d37c26cfe3ebbd4e5c8586dc3998240 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Wed, 23 Nov 2022 10:06:14 +0000
Subject: [PATCH 2/3] Use useCallback

Co-authored-by: Robin <robin@robin.town>
---
 src/ListBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ListBox.tsx b/src/ListBox.tsx
index 175f459..f8de4bb 100644
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -82,9 +82,9 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
   // https://github.com/vector-im/element-call/issues/762
   const origPointerUp = optionProps.onPointerUp;
   delete optionProps.onPointerUp;
-  optionProps.onClick = (e) => {
+  optionProps.onClick = useCallback((e) => {
     origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
-  };
+  }, [origPointerUp]);
 
   return (
     <li

From 9c08a6922660e18f1623c040489393772b2bd3cd Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 23 Nov 2022 10:11:55 +0000
Subject: [PATCH 3/3] Add import

And also Prettier says hi apparently
---
 src/ListBox.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ListBox.tsx b/src/ListBox.tsx
index f8de4bb..121f367 100644
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
 import { ListState } from "@react-stately/list";
 import { Node } from "@react-types/shared";
@@ -82,9 +82,12 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
   // https://github.com/vector-im/element-call/issues/762
   const origPointerUp = optionProps.onPointerUp;
   delete optionProps.onPointerUp;
-  optionProps.onClick = useCallback((e) => {
-    origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
-  }, [origPointerUp]);
+  optionProps.onClick = useCallback(
+    (e) => {
+      origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
+    },
+    [origPointerUp]
+  );
 
   return (
     <li