diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 5412097c3..0c9ba22cc 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -53,6 +53,7 @@ export const Dropdown: FC = React.memo( showDropdown, disabled, closeOnDropdownClick = true, + closeOnOutsideClick = true, visible, onClickOutside, }) => { @@ -93,7 +94,9 @@ export const Dropdown: FC = 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 index 0f854a38c..122130027 100644 --- 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 index 31c9257cb..cbd302eb0 100644 --- 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';