Merge pull request #86 from DesignSystemLab/fix/dropdown-outsideclick

Fix/dropdown outsideclick

Author: yondo123

packages/dropdown/src/components/Dropdown.tsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 
 import type { DropdownProps } from '../types';
-import { dropdownWrapperStyle, dropdownOverlayStyle } from '../style';
-import { useState, useRef, useMemo, useEffect, MouseEvent, MouseEventHandler } from 'react';
+import { dropdownWrapperStyle } from '../style';
+import { useState, useRef } from 'react';
 import { Divider } from './DropdownDivider';
 import { Menu } from './DropdownMenu';
 import { Trigger } from './DropdownTrigger';
@@ -12,6 +12,7 @@ import { SubMenuItem } from './DropdownSubMenuItem';
 import { DropdownContext } from '../context';
 import { useOutsideClick } from '@jdesignlab/react-utils';
 import { useToggleOpen } from '../hooks/useToggleOpen';
+import { DROPDOWN_ROLE_QUERY, DROPDOWN_MENU_OPEN_CLASS_NAME } from '../constants';
 
 export const Dropdown = (props: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -32,9 +33,9 @@ export const Dropdown = (props: DropdownProps) => {
     ref: dropdownRef,
     handler: () => {
       const dropdownMenu = dropdownRef.current
-        ? (dropdownRef.current.querySelector("[role='menu']") as HTMLElement)
+        ? (dropdownRef.current.querySelector(DROPDOWN_ROLE_QUERY) as HTMLElement)
         : null;
-      if (dropdownMenu) {
+      if (dropdownMenu && dropdownMenu.classList.contains(DROPDOWN_MENU_OPEN_CLASS_NAME)) {
         useToggleOpen(dropdownMenu);
       }
     }
@@ -47,6 +48,7 @@ export const Dropdown = (props: DropdownProps) => {
     </DropdownContext.Provider>
   );
 };
+
 Dropdown.displayName = 'Dropdown';
 
 Dropdown.Trigger = Trigger;

packages/dropdown/src/components/DropdownMenuItem.tsx

@@ -5,6 +5,7 @@ import { dropdownItemStyle } from '../style';
 import type { DropdownMenuItemProps } from '../types';
 import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
 import { useSelectItem } from '../hooks/useSelectItem';
+import { NOT_DISABLED_DROPDOWN_MENU_QUERY } from '../constants';
 
 export const MenuItem = (props: DropdownMenuItemProps) => {
   const menuItemRef = useRef<HTMLLIElement>(null);
@@ -26,7 +27,7 @@ export const MenuItem = (props: DropdownMenuItemProps) => {
     useKeyboardHandler({
       event,
       parentScope: '.menu',
-      selectorOfList: '.menu_item:not([disabled])',
+      selectorOfList: NOT_DISABLED_DROPDOWN_MENU_QUERY,
       setState: setSubOpen,
       onClick
     });

packages/dropdown/src/components/DropdownSubMenuItem.tsx

@@ -4,6 +4,7 @@ import { dropdownItemStyle } from '../style';
 import type { DropdownSubMenuItemProps } from '../types';
 import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
 import { useSelectItem } from '../hooks/useSelectItem';
+import { DROPDOWN_MENU_OPEN_CLASS_NAME, NOT_DISABLED_DROPDOWN_SUB_ITEM_QUERY } from '../constants';
 
 export const SubMenuItem = (props: DropdownSubMenuItemProps) => {
   const menuItemRef = useRef<HTMLLIElement>(null);
@@ -15,8 +16,8 @@ export const SubMenuItem = (props: DropdownSubMenuItemProps) => {
 
     useKeyboardHandler({
       event,
-      parentScope: '.menu_item',
-      selectorOfList: '.sub_item:not([disabled])'
+      parentScope: DROPDOWN_MENU_OPEN_CLASS_NAME,
+      selectorOfList: NOT_DISABLED_DROPDOWN_SUB_ITEM_QUERY
     });
   };
 

packages/dropdown/src/components/DropdownTrigger.tsx

@@ -3,6 +3,7 @@ import { DropdownContext } from '../context';
 import type { DropdownTriggerProps } from '../types';
 import useOpenKeyDown from '../hooks/useOpenKeyDown';
 import { useToggleOpen } from '../hooks/useToggleOpen';
+import { DROPDOWN_ROLE_QUERY, DROPDOWN_MENU_WRAPPER_CLASS } from '../constants';
 
 export const Trigger = (props: DropdownTriggerProps) => {
   const { children, ...otherProps } = props;
@@ -19,7 +20,9 @@ export const Trigger = (props: DropdownTriggerProps) => {
 
   const onClickHandle = () => {
     if (triggerRef?.current) {
-      const dropdownMenu = triggerRef.current.closest('.menu_wrapper')?.querySelector('[role="menu"]') as HTMLElement;
+      const dropdownMenu = triggerRef.current
+        .closest(DROPDOWN_MENU_WRAPPER_CLASS)
+        ?.querySelector(DROPDOWN_ROLE_QUERY) as HTMLElement;
       useToggleOpen(dropdownMenu);
     }
   };

packages/dropdown/src/constants.ts

@@ -0,0 +1,6 @@
+/** DOM */
+export const DROPDOWN_ROLE_QUERY = "[role='menu']";
+export const NOT_DISABLED_DROPDOWN_MENU_QUERY = '.menu_item:not([disabled])';
+export const NOT_DISABLED_DROPDOWN_SUB_ITEM_QUERY = '.menu_item:not([disabled])';
+export const DROPDOWN_MENU_WRAPPER_CLASS = '.menu_wrapper';
+export const DROPDOWN_MENU_OPEN_CLASS_NAME = 'menu_open';

packages/dropdown/src/types/base.ts

@@ -0,0 +1 @@
+export type DropdownAnchor = 'top' | 'right' | 'bottom' | 'left';

packages/dropdown/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './props';

packages/dropdown/src/types.ts renamed to packages/dropdown/src/types/props.ts

@@ -1,6 +1,4 @@
-import type { ColorToken } from '@jdesignlab/theme';
-
-export type DropdownAnchor = 'top' | 'right' | 'bottom' | 'left';
+import { DropdownAnchor } from './base';
 
 export interface DropdownProps {
   children?: React.ReactNode;
@@ -13,6 +11,10 @@ export interface DropdownTriggerProps {
   children?: React.ReactNode;
 }
 
+export interface DropdownSubMenuProps {
+  children?: React.ReactNode;
+}
+
 export interface DropdownMenuProps {
   children?: React.ReactNode;
 }
@@ -24,10 +26,6 @@ export interface DropdownMenuItemProps {
   hasSub?: boolean;
 }
 
-export interface DropdownSubMenuProps {
-  children?: React.ReactNode;
-}
-
 export interface DropdownSubMenuItemProps {
   children?: React.ReactNode;
   disabled?: boolean;