From b617dc05118fac7205ef970288ded3a1ecef5a98 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Sat, 29 Jan 2022 17:29:52 +0800
Subject: [PATCH 1/2] feat: support ref

---
 src/Menu.tsx                  | 10 ++++++----
 src/hooks/useAccessibility.ts |  2 +-
 tests/Menu.spec.js            | 12 ++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Menu.tsx b/src/Menu.tsx
index a2eb9270..365c080c 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -27,6 +27,7 @@ import { PathRegisterContext, PathUserContext } from './context/PathContext';
 import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
 import { IdContext } from './context/IdContext';
 import PrivateContext from './context/PrivateContext';
+import { composeRef } from 'rc-util/lib/ref';
 
 /**
  * Menu modify after refactor:
@@ -136,7 +137,7 @@ interface LegacyMenuProps extends MenuProps {
   openAnimation?: string;
 }
 
-const Menu: React.FC<MenuProps> = props => {
+const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
   const {
     prefixCls = 'rc-menu',
     style,
@@ -214,6 +215,7 @@ const Menu: React.FC<MenuProps> = props => {
   const [mounted, setMounted] = React.useState(false);
 
   const containerRef = React.useRef<HTMLUListElement>();
+  const mergedRef = composeRef(containerRef, ref);
 
   const uuid = useUUID(id);
 
@@ -434,7 +436,7 @@ const Menu: React.FC<MenuProps> = props => {
     isRtl,
     uuid,
 
-    containerRef,
+    mergedRef,
     getKeys,
     getKeyPath,
 
@@ -479,7 +481,7 @@ const Menu: React.FC<MenuProps> = props => {
   const container = (
     <Overflow
       id={id}
-      ref={containerRef as any}
+      ref={mergedRef as any}
       prefixCls={`${prefixCls}-overflow`}
       component="ul"
       itemComponent={MenuItem}
@@ -582,6 +584,6 @@ const Menu: React.FC<MenuProps> = props => {
       </IdContext.Provider>
     </PrivateContext.Provider>
   );
-};
+});
 
 export default Menu;
diff --git a/src/hooks/useAccessibility.ts b/src/hooks/useAccessibility.ts
index b60b27bf..8ac5e366 100644
--- a/src/hooks/useAccessibility.ts
+++ b/src/hooks/useAccessibility.ts
@@ -187,7 +187,7 @@ export default function useAccessibility<T extends HTMLElement>(
   isRtl: boolean,
   id: string,
 
-  containerRef: React.RefObject<HTMLUListElement>,
+  containerRef: React.Ref<HTMLUListElement>,
   getKeys: () => string[],
   getKeyPath: (key: string, includeOverflow?: boolean) => string[],
 
diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js
index a9a803f1..430fa1b7 100644
--- a/tests/Menu.spec.js
+++ b/tests/Menu.spec.js
@@ -647,5 +647,17 @@ describe('Menu', () => {
       jest.useRealTimers();
     });
   });
+
+  it('should support ref', () => {
+    const menuRef = React.createRef();
+
+    mount(
+      <Menu ref={menuRef}>
+        <MenuItem key="light">Light</MenuItem>
+      </Menu>,
+    );
+
+    expect(menuRef.current).toBeTruthy();
+  });
 });
 /* eslint-enable */

From 8417c9bd070c3709c8dc795d96c874a6f4f05c85 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Sat, 29 Jan 2022 17:42:10 +0800
Subject: [PATCH 2/2] test: fix test case

---
 src/Menu.tsx                  | 2 +-
 src/hooks/useAccessibility.ts | 2 +-
 tests/SubMenu.spec.js         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Menu.tsx b/src/Menu.tsx
index 365c080c..8e395fbb 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -436,7 +436,7 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
     isRtl,
     uuid,
 
-    mergedRef,
+    containerRef,
     getKeys,
     getKeyPath,
 
diff --git a/src/hooks/useAccessibility.ts b/src/hooks/useAccessibility.ts
index 8ac5e366..b60b27bf 100644
--- a/src/hooks/useAccessibility.ts
+++ b/src/hooks/useAccessibility.ts
@@ -187,7 +187,7 @@ export default function useAccessibility<T extends HTMLElement>(
   isRtl: boolean,
   id: string,
 
-  containerRef: React.Ref<HTMLUListElement>,
+  containerRef: React.RefObject<HTMLUListElement>,
   getKeys: () => string[],
   getKeyPath: (key: string, includeOverflow?: boolean) => string[],
 
diff --git a/tests/SubMenu.spec.js b/tests/SubMenu.spec.js
index 7c17b949..41b9bf17 100644
--- a/tests/SubMenu.spec.js
+++ b/tests/SubMenu.spec.js
@@ -366,7 +366,7 @@ describe('SubMenu', () => {
     );
 
     const wrapper = mount(<App show />);
-    expect(wrapper.find('Menu ul').prop('style')).toEqual({
+    expect(wrapper.find('.rc-menu').first().prop('style')).toEqual({
       backgroundColor: 'black',
     });
   });