Use capture on InputSelect click outside listener

2024-01-31 23:53:16 -05:00
parent 05f4fa90b8
commit 4d935ade80
2 changed files with 15 additions and 10 deletions
--- 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;