fix: click outside select input in popover event bubbling

app/components/InputSelect.tsx

@@ -14,6 +14,7 @@ import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
 import { fadeAndScaleIn } from "~/styles/animations";
 import {
   Position,
@@ -76,9 +77,9 @@ const InputSelect = (props: Props) => {
     selectedValue: value,
   });
 
-  const popOver = useSelectPopover({
+  const popover = useSelectPopover({
     ...select,
-    hideOnClickOutside: true,
+    hideOnClickOutside: false,
     preventBodyScroll: true,
     disabled,
   });
@@ -107,6 +108,16 @@ const InputSelect = (props: Props) => {
     (option) => option.value === select.selectedValue
   );
 
+  // 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();
+    }
+  });
+
   React.useEffect(() => {
     previousValue.current = value;
     select.setSelectedValue(value);
@@ -156,7 +167,7 @@ const InputSelect = (props: Props) => {
             </StyledButton>
           )}
         </Select>
-        <SelectPopover {...select} {...popOver} aria-label={ariaLabel}>
+        <SelectPopover {...select} {...popover} aria-label={ariaLabel}>
           {(props: InnerProps) => {
             const topAnchor = props.style?.top === "0";
             const rightAnchor = props.placement === "bottom-end";