feat: dropdown: add prop to disable closing on clicking outside

EightfoldAI · Aug 22, 2022 · b3c7d23 · b3c7d23
1 parent aa1d6ca
commit b3c7d23
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -53,6 +53,7 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         showDropdown,
         disabled,
         closeOnDropdownClick = true,
+        closeOnOutsideClick = true,
         visible,
         onClickOutside,
     }) => {
@@ -93,7 +94,9 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         useOnClickOutside(
             refs.reference,
             (e) => {
-                toggle(false)(e);
+                if (closeOnOutsideClick) {
+                    toggle(false)(e);
+                }
                 onClickOutside?.(e);
             },
             mergedVisible

diff --git a/src/components/Dropdown/Dropdown.types.ts b/src/components/Dropdown/Dropdown.types.ts
@@ -67,6 +67,18 @@ export interface DropdownProps {
      * @default true
      */
     closeOnDropdownClick?: boolean;
+    /**
+     * Should close dropdown on click outside
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Manually control visibility of the dropdown
+     */
     visible?: boolean;
+    /**
+     * Callback method fired on outside click on dropdown
+     * @param event
+     */
     onClickOutside?: (event: MouseEvent) => void;
 }
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -5,12 +5,7 @@ import { MenuItem } from './MenuItem/MenuItem';
 import { MenuItemType } from './MenuItem/MenuItem.types';
 import { mergeClasses } from '../../shared/utilities';
 import { Stack } from '../Stack';
-import {
-    ButtonShape,
-    ButtonSize,
-    NeutralButton,
-    PrimaryButton,
-} from '../Button';
+import { ButtonSize, NeutralButton, PrimaryButton } from '../Button';
 
 import styles from './menu.module.scss';