fix(CDropdown): incorrect menu positioning when the toggler is re-rendered

Author: mrholek

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

@@ -207,8 +207,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const dropdownToggleRef = useRef<any>(null)
+    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
     const [_visible, setVisible] = useState(visible)
@@ -256,28 +255,45 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     }, [visible])
 
     useEffect(() => {
-      if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
-        dropdownToggleRef.current.focus()
-        popper &&
-          initPopper(dropdownToggleRef.current, dropdownMenuRef.current, computedPopperConfig)
+      const toggleElement = dropdownToggleRef.current
+      const menuElement = dropdownMenuRef.current
+
+      if (_visible && toggleElement && menuElement) {
+        if (popper) {
+          initPopper(toggleElement, menuElement, computedPopperConfig)
+        }
+
+        toggleElement.focus()
+        toggleElement.addEventListener('keydown', handleKeydown)
+        menuElement.addEventListener('keydown', handleKeydown)
+
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current.addEventListener('keydown', handleKeydown)
-        onShow && onShow()
+
+        onShow?.()
       }
 
       return () => {
-        popper && destroyPopper()
+        if (popper) {
+          destroyPopper()
+        }
+
+        toggleElement?.removeEventListener('keydown', handleKeydown)
+        menuElement?.removeEventListener('keydown', handleKeydown)
+
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current &&
-          dropdownToggleRef.current.removeEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current &&
-          dropdownMenuRef.current.removeEventListener('keydown', handleKeydown)
-        onHide && onHide()
+
+        onHide?.()
       }
-    }, [_visible])
+    }, [
+      computedPopperConfig,
+      destroyPopper,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      initPopper,
+      _visible,
+    ])
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (

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

@@ -12,7 +12,7 @@ export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
 export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
   ({ className, ...rest }, ref) => {
     return <hr className={classNames('dropdown-divider', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CDropdownDivider.propTypes = {

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

@@ -23,7 +23,7 @@ export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownH
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CDropdownHeader.propTypes = {

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

@@ -25,7 +25,7 @@ export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CDropdownItemPlain.propTypes = {

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

@@ -38,7 +38,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
                 show: visible,
               },
               alignment && getAlignmentClassNames(alignment),
-              className,
+              className
             )}
             ref={forkedRef}
             role="menu"
@@ -57,7 +57,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
           </Component>
         </CConditionalPortal>
       )
-    },
+    }
   )
 
 CDropdownMenu.propTypes = {

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

@@ -69,7 +69,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
         'dropdown-toggle-split': split,
         show: visible,
       },
-      className,
+      className
     ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),