From 3548c984a97a5de7b81b94b8fa1d3e091e0d3270 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 16 Feb 2021 13:03:51 +1000
Subject: [PATCH] Dropdown: fix event propagation

Fixes urbit/landscape#427
---
 pkg/interface/src/views/components/Dropdown.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/components/Dropdown.tsx b/pkg/interface/src/views/components/Dropdown.tsx
index 7e2a1fb2c..deb3ac96d 100644
--- a/pkg/interface/src/views/components/Dropdown.tsx
+++ b/pkg/interface/src/views/components/Dropdown.tsx
@@ -66,13 +66,19 @@ export function Dropdown(props: DropdownProps) {
     [setOpen, updatePos]
   );
 
-  useEffect(() => {
+  const close = useCallback(() => {
     setOpen(false);
+  },[]);
+
+  useEffect(() => {
+    close();
   }, [pathname]);
 
-  useOutsideClick(dropdownRef, () => {
-    setOpen(false);
-  });
+  useOutsideClick(dropdownRef, close);
+
+  const onOptionsClick = useCallback((e: any) => {
+    e.stopPropagation();
+  }, []);
 
   return (
     <Box flexShrink={props?.flexShrink ? props.flexShrink : 1} position={open ? "relative" : "static"} minWidth='0' width={props?.width ? props.width : 'auto'}>
@@ -85,6 +91,7 @@ export function Dropdown(props: DropdownProps) {
             width={props?.dropWidth || "max-content"}
             {...coords}
             ref={dropdownRef}
+            onClick={onOptionsClick}
           >
             {options}
           </DropdownOptions>