fix: change onClickOutside to be called correctly & allow menu to clo…

…se on click (#404) close: #372
zakodium-oss · Nov 28, 2022 · 5a075c3 · 5a075c3
1 parent 8a6099b
commit 5a075c3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/src/components/dropdown-menu/DropdownMenu.tsx b/src/components/dropdown-menu/DropdownMenu.tsx
@@ -55,7 +55,7 @@ const HandleMenuContextDiv = styled.div`
 `;
 
 function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
-  const { children, ...otherProps } = props;
+  const { children, onSelect, ...otherProps } = props;
 
   const {
     isPopperElementOpen,
@@ -79,7 +79,14 @@ function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
             {...attributes.popper}
           >
             <Menu>
-              <MenuItems itemsStatic {...otherProps} />
+              <MenuItems
+                itemsStatic
+                onSelect={(selected) => {
+                  closePopperElement();
+                  onSelect(selected);
+                }}
+                {...otherProps}
+              />
             </Menu>
           </div>
         </div>
@@ -93,33 +100,37 @@ function DropdownContextMenu<T>(props: Omit<DropdownMenuProps<T>, 'trigger'>) {
 function DropdownClickMenu<T>(
   props: Omit<DropdownMenuProps<T>, 'trigger'> & { children: ReactNode },
 ) {
-  const { placement = 'bottom-start', ...otherProps } = props;
+  const { placement = 'bottom-start', onSelect, ...otherProps } = props;
 
   const [isOpened, , closeItems, toggle] = useOnOff(false);
 
   const ref = useRef<HTMLDivElement>(null);
+  useOnClickOutside(ref, closeItems);
 
   const { setReferenceElement, setPopperElement, popperProps } =
     useModifiedPopper<HTMLButtonElement>({ placement, offset: 6 });
 
-  useOnClickOutside(ref, () => {
-    closeItems();
-  });
-
   return (
-    <div ref={ref}>
-      <Menu>
-        <Menu.Button ref={setReferenceElement} onClick={toggle}>
-          {props.children}
-        </Menu.Button>
-        {isOpened && (
-          <Portal>
+    <Menu>
+      <Menu.Button ref={setReferenceElement} onClick={toggle}>
+        {props.children}
+      </Menu.Button>
+      {isOpened && (
+        <Portal>
+          <div ref={ref}>
             <div ref={setPopperElement} {...popperProps}>
-              <MenuItems itemsStatic {...otherProps} />
+              <MenuItems
+                itemsStatic
+                onSelect={(selected) => {
+                  closeItems();
+                  onSelect(selected);
+                }}
+                {...otherProps}
+              />
             </div>
-          </Portal>
-        )}
-      </Menu>
-    </div>
+          </div>
+        </Portal>
+      )}
+    </Menu>
   );
 }
diff --git a/src/components/dropdown-menu/MenuItems.tsx b/src/components/dropdown-menu/MenuItems.tsx
@@ -126,7 +126,9 @@ function Item<T>(props: ItemProps<T>) {
     <Menu.Item disabled={option.disabled}>
       {({ active }) => (
         <ItemDiv
-          onClick={() => onSelect(option)}
+          onClick={() => {
+            onSelect(option);
+          }}
           active={active}
           disabled={option.disabled || false}
         >