feat: Remove menuItem scroll-into-view feature (#318)

* feat: Remove menuItem scroll-into-view feature

* test: add MemuItem onDestroy prop test spec

Co-authored-by: Zeng Kun <[email protected]>

Author: oustn

package.json

@@ -51,7 +51,6 @@
     "rc-trigger": "^4.0.0",
     "rc-util": "^4.13.0",
     "resize-observer-polyfill": "^1.5.0",
-    "scroll-into-view-if-needed": "^2.2.20",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {

src/MenuItem.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import { connect } from 'mini-store';
 import { noop, menuAllProps } from './util';
 import {
@@ -66,27 +64,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
     this.callRef();
   }
 
-  componentDidUpdate(prevProps: MenuItemProps) {
-    const { active, parentMenu, eventKey } = this.props;
-    // 在 parentMenu 上层保存滚动状态，避免重复的 MenuItem key 导致滚动跳动
-    // https://github.com/ant-design/ant-design/issues/16181
-    if (
-      !prevProps.active &&
-      active &&
-      (!parentMenu || !parentMenu[`scrolled-${eventKey}`])
-    ) {
-      if (this.node) {
-        scrollIntoView(this.node, {
-          scrollMode: 'if-needed',
-          // eslint-disable-next-line react/no-find-dom-node
-          boundary: ReactDOM.findDOMNode(parentMenu) as Element,
-          block: 'nearest',
-        });
-        parentMenu[`scrolled-${eventKey}`] = true;
-      }
-    } else if (parentMenu && parentMenu[`scrolled-${eventKey}`]) {
-      delete parentMenu[`scrolled-${eventKey}`];
-    }
+  componentDidUpdate() {
     this.callRef();
   }
 

tests/MenuItem.spec.js

@@ -209,5 +209,21 @@ describe('MenuItem', () => {
 
       expect(wrapper.render()).toMatchSnapshot();
     });
+
+    it('should call onDestroy before unmount', () => {
+      const callback = jest.fn();
+
+      const wrapper = mount(
+        <Menu>
+          <MenuItem role="option" key="item" onDestroy={callback}>
+            <span>Item content</span>
+          </MenuItem>
+        </Menu>,
+      );
+
+      wrapper.unmount();
+
+      expect(callback).toHaveBeenCalled();
+    });
   });
 });