refactor(CDropdown): optimize menu visibility toggling

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -214,19 +214,6 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     const allowPopperUse = popper && typeof alignment !== 'object'
     const Component = variant === 'nav-item' ? 'li' : as
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      popper: allowPopperUse,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
-
     const computedPopperConfig: Partial<Options> = useMemo(() => {
       const defaultPopperConfig = {
         modifiers: [
@@ -247,14 +234,28 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
       const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
+
+    const handleShow = () => {
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+
+      if (toggleElement && menuElement) {
+        setVisible(true)
 
-      if (_visible && toggleElement && menuElement) {
         if (allowPopperUse) {
           initPopper(toggleElement, menuElement, computedPopperConfig)
         }
@@ -268,21 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
 
         onShow?.()
       }
+    }
 
-      return () => {
-        if (allowPopperUse) {
-          destroyPopper()
-        }
-
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
+    const handleHide = () => {
+      setVisible(false)
 
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
 
-        onHide?.()
+      if (allowPopperUse) {
+        destroyPopper()
       }
-    }, [dropdownToggleElement, _visible])
+
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+
+      onHide?.()
+    }
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -305,7 +311,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       if (event.key === 'Escape') {
-        setVisible(false)
+        handleHide()
       }
     }
 
@@ -323,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
         (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
       ) {
-        setTimeout(() => setVisible(false), 1)
+        setTimeout(() => handleHide(), 1)
         return
       }
     }
 
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
         {variant === 'input-group' ? (

packages/coreui-react/src/components/dropdown/CDropdownContext.ts

@@ -7,7 +7,8 @@ export interface CDropdownContextProps {
   dark?: boolean
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
   dropdownToggleRef: (node: HTMLElement | null) => void
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  handleHide?: () => void
+  handleShow?: () => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -45,18 +45,24 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
   }