feat: Dropdown support switch options with arrow keys (#34738)

* feat: dropdown support auto-focus

* chore: code clean

components/dropdown/style/index.less

@@ -221,7 +221,8 @@
         background-color: @dropdown-selected-bg;
       }
 
-      &:hover {
+      &:hover,
+      &&-active {
         background-color: @item-hover-bg;
       }
 

components/menu/__tests__/index.test.js

@@ -871,4 +871,16 @@ describe('Menu', () => {
     expect(wrapper.find('li.ant-menu-item-divider').length).toBe(2);
     expect(wrapper.find('li.ant-menu-item-divider-dashed').length).toBe(1);
   });
+
+  it('should support ref', async () => {
+    const ref = React.createRef();
+    const wrapper = mount(
+      <Menu ref={ref}>
+        <SubMenu key="sub1" title="Navigation One">
+          <Menu.Item key="1">Option 1</Menu.Item>
+        </SubMenu>
+      </Menu>,
+    );
+    expect(ref.current?.menu?.list).toBe(wrapper.find('ul').first().getDOMNode());
+  });
 });

components/menu/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
+import RcMenu, { ItemGroup, MenuProps as RcMenuProps, MenuRef } from 'rc-menu';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
+import { forwardRef } from 'react';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import Item, { MenuItemProps } from './MenuItem';
 import { ConfigContext } from '../config-provider';
@@ -40,7 +41,7 @@ type InternalMenuProps = MenuProps &
     collapsedWidth?: string | number;
   };
 
-function InternalMenu(props: InternalMenuProps) {
+const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
   const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
 
   const rootPrefixCls = getPrefixCls();
@@ -129,12 +130,13 @@ function InternalMenu(props: InternalMenuProps) {
         expandIcon={cloneElement(expandIcon, {
           className: `${prefixCls}-submenu-expand-icon`,
         })}
+        ref={ref}
       >
         {mergedChildren}
       </RcMenu>
     </MenuContext.Provider>
   );
-}
+});
 
 // We should keep this as ref-able
 class Menu extends React.Component<MenuProps, {}> {
@@ -146,10 +148,24 @@ class Menu extends React.Component<MenuProps, {}> {
 
   static ItemGroup = ItemGroup;
 
+  menu: MenuRef | null;
+
+  focus = (options?: FocusOptions) => {
+    this.menu?.focus(options);
+  };
+
   render() {
     return (
       <SiderContext.Consumer>
-        {(context: SiderContextProps) => <InternalMenu {...this.props} {...context} />}
+        {(context: SiderContextProps) => (
+          <InternalMenu
+            ref={node => {
+              this.menu = node;
+            }}
+            {...this.props}
+            {...context}
+          />
+        )}
       </SiderContext.Consumer>
     );
   }

package.json

@@ -126,7 +126,7 @@
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.7.0",
     "rc-drawer": "~4.4.2",
-    "rc-dropdown": "~3.3.2",
+    "rc-dropdown": "~3.4.0",
     "rc-field-form": "~1.24.0",
     "rc-image": "~5.3.0",
     "rc-input": "~0.0.1-alpha.5",