From 4d935ade805fb0442a14dc0321b4be8882e3055e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 31 Jan 2024 23:53:16 -0500
Subject: [PATCH] Use capture on InputSelect click outside listener

---
 app/components/InputSelect.tsx | 18 +++++++++++-------
 app/hooks/useOnClickOutside.ts |  7 ++++---
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx
index c8ad61d1a..da2933876 100644
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -110,13 +110,17 @@ const InputSelect = (props: Props) => {
 
   // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
   // prevent event bubbling.
-  useOnClickOutside(contentRef, (event) => {
-    if (select.visible) {
-      event.stopPropagation();
-      event.preventDefault();
-      select.hide();
-    }
-  });
+  useOnClickOutside(
+    contentRef,
+    (event) => {
+      if (select.visible) {
+        event.stopPropagation();
+        event.preventDefault();
+        select.hide();
+      }
+    },
+    { capture: true }
+  );
 
   React.useEffect(() => {
     previousValue.current = value;
diff --git a/app/hooks/useOnClickOutside.ts b/app/hooks/useOnClickOutside.ts
index fedca647a..6a23447bf 100644
--- a/app/hooks/useOnClickOutside.ts
+++ b/app/hooks/useOnClickOutside.ts
@@ -9,7 +9,8 @@ import useEventListener from "./useEventListener";
  */
 export default function useOnClickOutside(
   ref: React.RefObject<HTMLElement | null>,
-  callback?: (event: MouseEvent | TouchEvent) => void
+  callback?: (event: MouseEvent | TouchEvent) => void,
+  options: AddEventListenerOptions = {}
 ) {
   const listener = React.useCallback(
     (event: MouseEvent | TouchEvent) => {
@@ -22,6 +23,6 @@ export default function useOnClickOutside(
     [ref, callback]
   );
 
-  useEventListener("mousedown", listener, window);
-  useEventListener("touchstart", listener, window);
+  useEventListener("mousedown", listener, window, options);
+  useEventListener("touchstart", listener, window, options);
 }