Use capture on InputSelect click outside listener

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;

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);
 }