fix: open trigger force scroll (#304)

* fix: not trigger scroll when init

* test: update test case

Author: zombieJ

src/DropdownMenu.tsx

@@ -1,11 +1,12 @@
-import Menu, { MenuItem, MenuRef } from '@rc-component/menu';
+import Menu, { MenuItem, type MenuRef } from '@rc-component/menu';
 import React, { useEffect, useRef } from 'react';
 import MentionsContext from './MentionsContext';
 import type { DataDrivenOptionProps } from './Mentions';
 
 export interface DropdownMenuProps {
   prefixCls?: string;
   options: DataDrivenOptionProps[];
+  opened: boolean;
 }
 
 /**
@@ -23,24 +24,25 @@ function DropdownMenu(props: DropdownMenuProps) {
     onScroll,
   } = React.useContext(MentionsContext);
 
-  const { prefixCls, options } = props;
+  const { prefixCls, options, opened } = props;
   const activeOption = options[activeIndex] || {};
   const menuRef = useRef<MenuRef>(null);
 
   // Monitor the changes in ActiveIndex and scroll to the visible area if there are any changes
   useEffect(() => {
-    if (activeIndex === -1 || !menuRef.current) {
+    if (activeIndex === -1 || !menuRef.current || !opened) {
       return;
     }
 
     const activeItem = menuRef.current?.findItem?.({ key: activeOption.key });
+
     if (activeItem) {
       activeItem.scrollIntoView({
         block: 'nearest',
         inline: 'nearest',
       });
     }
-  }, [activeIndex, activeOption.key]);
+  }, [activeIndex, activeOption.key, opened]);
 
   return (
     <Menu

src/KeywordTrigger.tsx

@@ -69,9 +69,14 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
   } = props;
 
   const dropdownPrefix = `${prefixCls}-dropdown`;
+  const [opened, setOpened] = React.useState(false);
 
   const dropdownElement = (
-    <DropdownMenu prefixCls={dropdownPrefix} options={options} />
+    <DropdownMenu
+      prefixCls={dropdownPrefix}
+      options={options}
+      opened={opened}
+    />
   );
 
   const dropdownPlacement = useMemo(() => {
@@ -95,6 +100,7 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
       getPopupContainer={getPopupContainer}
       popupClassName={popupClassName}
       popupStyle={popupStyle}
+      afterOpenChange={setOpened}
     >
       {children}
     </Trigger>

tests/DropdownMenu.spec.tsx

@@ -19,7 +19,7 @@ describe('DropdownMenu', () => {
     jest.useRealTimers();
   });
 
-  it('should scroll into view when navigating with keyboard', () => {
+  it('should scroll into view when navigating with keyboard', async () => {
     // Setup component with UnstableContext for testing dropdown behavior
     const { container } = render(
       <UnstableContext.Provider value={{ open: true }}>
@@ -32,51 +32,22 @@ describe('DropdownMenu', () => {
       .spyOn(HTMLElement.prototype, 'scrollIntoView')
       .mockImplementation(jest.fn());
 
-    const textarea = container.querySelector('textarea')!;
+    // Trigger should not scroll
+    simulateInput(container, '@');
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
 
-    act(() => {
-      // First trigger the measuring state by typing @
-      simulateInput(container, '@');
-      jest.runAllTimers();
-    });
-
-    // Verify we're in measuring state
-    expectMeasuring(container, true);
-
-    act(() => {
-      // Press ArrowDown multiple times to make options overflow the visible area
-      for (let i = 0; i < 10; i++) {
-        fireEvent.keyDown(textarea, {
-          keyCode: KeyCode.DOWN,
-          which: KeyCode.DOWN,
-        });
-      }
-      jest.runAllTimers();
-    });
+    for (let i = 0; i < 10; i++) {
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+        await Promise.resolve();
+      });
+    }
 
     // Verify if scrollIntoView was called
     expect(scrollIntoViewMock).toHaveBeenCalledWith({
       block: 'nearest',
       inline: 'nearest',
     });
-    scrollIntoViewMock.mockClear();
-
-    act(() => {
-      // Press ArrowUp to verify scrolling up
-      for (let i = 0; i < 5; i++) {
-        fireEvent.keyDown(textarea, {
-          keyCode: KeyCode.UP,
-          which: KeyCode.UP,
-        });
-      }
-      jest.runAllTimers();
-    });
-
-    // Verify if scrollIntoView was called again
-    expect(scrollIntoViewMock).toHaveBeenCalledWith({
-      block: 'nearest',
-      inline: 'nearest',
-    });
 
     scrollIntoViewMock.mockRestore();
   });