fix: duplicated selected menu item when selectedKeys is string

src/DOMWrap.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import SubMenu from './SubMenu';
 import { getWidth, setStyle, menuAllProps } from './util';
-import { MenuMode } from './interface';
+import type { MenuMode } from './interface';
 
 const MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed';
 const FLOAT_PRECISION_ADJUST = 0.5;
@@ -60,7 +60,7 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
       if (!menuUl) {
         return;
       }
-      this.resizeObserver = new ResizeObserver(entries => {
+      this.resizeObserver = new ResizeObserver((entries) => {
         entries.forEach(() => {
           const { cancelFrameId } = this;
           cancelAnimationFrame(cancelFrameId);
@@ -166,7 +166,7 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
 
     const popupClassName = theme ? `${prefixCls}-${theme}` : '';
     const props = {};
-    menuAllProps.forEach(k => {
+    menuAllProps.forEach((k) => {
       if (rest[k] !== undefined) {
         props[k] = rest[k];
       }
@@ -218,16 +218,16 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
     // and then reset to original state after width calculation
 
     const overflowedItems = menuItemNodes.filter(
-      c => c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0,
+      (c) => c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0,
     );
 
-    overflowedItems.forEach(c => {
+    overflowedItems.forEach((c) => {
       setStyle(c, 'display', 'inline-block');
     });
 
-    this.menuItemSizes = menuItemNodes.map(c => getWidth(c, true));
+    this.menuItemSizes = menuItemNodes.map((c) => getWidth(c, true));
 
-    overflowedItems.forEach(c => {
+    overflowedItems.forEach((c) => {
       setStyle(c, 'display', 'none');
     });
     this.overflowedIndicatorWidth = getWidth(
@@ -266,7 +266,7 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
     if (this.originalTotalWidth > width + FLOAT_PRECISION_ADJUST) {
       lastVisibleIndex = -1;
 
-      this.menuItemSizes.forEach(liWidth => {
+      this.menuItemSizes.forEach((liWidth) => {
         currentSumWidth += liWidth;
         if (currentSumWidth + this.overflowedIndicatorWidth <= width) {
           lastVisibleIndex += 1;
@@ -314,7 +314,7 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
             if (index === lastVisibleIndex + 1) {
               this.overflowedItems = children
                 .slice(lastVisibleIndex + 1)
-                .map(c =>
+                .map((c) =>
                   React.cloneElement(
                     c,
                     // children[index].key will become '.$key' in clone by default,

src/Menu.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Provider, create } from 'mini-store';
 import omit from 'rc-util/lib/omit';
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 import SubPopupMenu, { getActiveKey } from './SubPopupMenu';
 import { noop } from './util';
-import {
+import type {
   RenderIconType,
   SelectInfo,
   SelectEventHandler,
@@ -69,7 +69,7 @@ export interface MenuProps
 export interface MenuState {
   switchingModeFromInline: boolean;
   prevProps: MenuProps;
-  inlineOpenKeys: Array<string>;
+  inlineOpenKeys: string[];
   store: MiniStore;
 }
 
@@ -235,7 +235,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
     }
   };
 
-  onClick: MenuClickEventHandler = e => {
+  onClick: MenuClickEventHandler = (e) => {
     const mode = this.getRealMenuMode();
     const {
       store,
@@ -259,11 +259,11 @@ class Menu extends React.Component<MenuProps, MenuState> {
     this.innerMenu.getWrappedInstance().onKeyDown(e, callback);
   };
 
-  onOpenChange = event => {
+  onOpenChange = (event) => {
     const { props } = this;
     const openKeys = this.store.getState().openKeys.concat();
     let changed = false;
-    const processSingle = e => {
+    const processSingle = (e) => {
       let oneChanged = false;
       if (e.open) {
         oneChanged = openKeys.indexOf(e.key) === -1;
@@ -379,7 +379,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
     }
   }
 
-  setInnerMenu = node => {
+  setInnerMenu = (node) => {
     this.innerMenu = node;
   };
 
@@ -427,7 +427,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
 
     return (
       <Provider store={this.store}>
-        <SubPopupMenu {...props as any} ref={this.setInnerMenu}>
+        <SubPopupMenu {...(props as any)} ref={this.setInnerMenu}>
           {this.props.children}
         </SubPopupMenu>
       </Provider>

src/MenuItem.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import { connect } from 'mini-store';
 import { noop, menuAllProps } from './util';
-import {
+import type {
   SelectEventHandler,
   HoverEventHandler,
   DestroyEventHandler,
@@ -91,7 +91,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
     return undefined;
   };
 
-  onMouseLeave: React.MouseEventHandler<HTMLElement> = e => {
+  onMouseLeave: React.MouseEventHandler<HTMLElement> = (e) => {
     const { eventKey, onItemHover, onMouseLeave } = this.props;
     onItemHover({
       key: eventKey,
@@ -103,7 +103,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
     });
   };
 
-  onMouseEnter: React.MouseEventHandler<HTMLElement> = e => {
+  onMouseEnter: React.MouseEventHandler<HTMLElement> = (e) => {
     const { eventKey, onItemHover, onMouseEnter } = this.props;
     onItemHover({
       key: eventKey,
@@ -115,7 +115,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
     });
   };
 
-  onClick: React.MouseEventHandler<HTMLElement> = e => {
+  onClick: React.MouseEventHandler<HTMLElement> = (e) => {
     const {
       eventKey,
       multiple,
@@ -221,7 +221,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         style.paddingLeft = props.inlineIndent * props.level;
       }
     }
-    menuAllProps.forEach(key => delete props[key]);
+    menuAllProps.forEach((key) => delete props[key]);
     delete props.direction;
     let icon = this.props.itemIcon;
     if (typeof this.props.itemIcon === 'function') {
@@ -251,7 +251,11 @@ export class MenuItem extends React.Component<MenuItemProps> {
 const connected = connect<any, any, any>(
   ({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
     active: activeKey[subMenuKey] === eventKey,
-    isSelected: selectedKeys.indexOf(eventKey) !== -1,
+    // selectedKeys should be array in any circumstance
+    // when it is not, we have fallback logic for https://github.com/ant-design/ant-design/issues/29430
+    isSelected: Array.isArray(selectedKeys)
+      ? selectedKeys.indexOf(eventKey) !== -1
+      : selectedKeys === eventKey,
   }),
 )(MenuItem);
 

src/MenuItemGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { menuAllProps } from './util';
-import { MenuClickEventHandler } from './interface';
+import type { MenuClickEventHandler } from './interface';
 
 export interface MenuItemGroupProps {
   disabled?: boolean;
@@ -36,7 +36,7 @@ class MenuItemGroup extends React.Component<MenuItemGroupProps> {
     const titleClassName = `${rootPrefixCls}-item-group-title`;
     const listClassName = `${rootPrefixCls}-item-group-list`;
     const { title, children } = props;
-    menuAllProps.forEach(key => delete props[key]);
+    menuAllProps.forEach((key) => delete props[key]);
 
     // Set onClick to null, to ignore propagated onClick event
     delete props.onClick;

src/SubMenu.tsx

@@ -3,18 +3,20 @@ import * as ReactDOM from 'react-dom';
 import Trigger from 'rc-trigger';
 import raf from 'rc-util/lib/raf';
 import KeyCode from 'rc-util/lib/KeyCode';
-import CSSMotion, { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 import { connect } from 'mini-store';
-import SubPopupMenu, { SubPopupMenuProps } from './SubPopupMenu';
+import type { SubPopupMenuProps } from './SubPopupMenu';
+import SubPopupMenu from './SubPopupMenu';
 import { placements, placementsRtl } from './placements';
 import {
   noop,
   loopMenuItemRecursively,
   getMenuIdFromSubMenuEventKey,
   menuAllProps,
 } from './util';
-import {
+import type {
   MiniStore,
   RenderIconType,
   LegacyFunctionRef,
@@ -29,7 +31,7 @@ import {
   TriggerSubMenuAction,
   HoverEventHandler,
 } from './interface';
-import { MenuItem } from './MenuItem';
+import type { MenuItem } from './MenuItem';
 
 let guid = 0;
 
@@ -232,7 +234,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
    *  This legacy code that `onKeyDown` is called by parent instead of dom self.
    *  which need return code to check if this event is handled
    */
-  onKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {
+  onKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
     const { keyCode } = e;
     const menu = this.menuInstance;
     const { store } = this.props;
@@ -275,15 +277,15 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     return undefined;
   };
 
-  onOpenChange: OpenEventHandler = e => {
+  onOpenChange: OpenEventHandler = (e) => {
     this.props.onOpenChange(e);
   };
 
   onPopupVisibleChange = (visible: boolean) => {
     this.triggerOpenChange(visible, visible ? 'mouseenter' : 'mouseleave');
   };
 
-  onMouseEnter: React.MouseEventHandler<HTMLElement> = e => {
+  onMouseEnter: React.MouseEventHandler<HTMLElement> = (e) => {
     const { eventKey: key, onMouseEnter, store } = this.props;
     updateDefaultActiveFirst(store, this.props.eventKey, false);
     onMouseEnter({
@@ -292,7 +294,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     });
   };
 
-  onMouseLeave: React.MouseEventHandler<HTMLElement> = e => {
+  onMouseLeave: React.MouseEventHandler<HTMLElement> = (e) => {
     const { parentMenu, eventKey, onMouseLeave } = this.props;
     parentMenu.subMenuInstance = this;
     onMouseLeave({
@@ -301,7 +303,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     });
   };
 
-  onTitleMouseEnter: React.MouseEventHandler<HTMLElement> = domEvent => {
+  onTitleMouseEnter: React.MouseEventHandler<HTMLElement> = (domEvent) => {
     const { eventKey: key, onItemHover, onTitleMouseEnter } = this.props;
     onItemHover({
       key,
@@ -313,7 +315,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     });
   };
 
-  onTitleMouseLeave: React.MouseEventHandler<HTMLElement> = e => {
+  onTitleMouseLeave: React.MouseEventHandler<HTMLElement> = (e) => {
     const { parentMenu, eventKey, onItemHover, onTitleMouseLeave } = this.props;
     parentMenu.subMenuInstance = this;
     onItemHover({
@@ -349,11 +351,11 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     }
   };
 
-  onSelect: SelectEventHandler = info => {
+  onSelect: SelectEventHandler = (info) => {
     this.props.onSelect(info);
   };
 
-  onDeselect: SelectEventHandler = info => {
+  onDeselect: SelectEventHandler = (info) => {
     this.props.onDeselect(info);
   };
 
@@ -649,12 +651,12 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       subMenuCloseDelay,
       builtinPlacements,
     } = props;
-    menuAllProps.forEach(key => delete props[key]);
+    menuAllProps.forEach((key) => delete props[key]);
     // Set onClick to null, to ignore propagated onClick event
     delete props.onClick;
     const placement = isRTL
-      ? Object.assign({}, placementsRtl, builtinPlacements)
-      : Object.assign({}, placements, builtinPlacements);
+      ? { ...placementsRtl, ...builtinPlacements }
+      : { ...placements, ...builtinPlacements };
     delete props.direction;
 
     // [Legacy] It's a fast fix,