fix: Prevent auto-scrolling when input is not focused

src/DropdownMenu.tsx

@@ -22,6 +22,7 @@ function DropdownMenu(props: DropdownMenuProps) {
     onFocus,
     onBlur,
     onScroll,
+    textareaRef,
   } = React.useContext(MentionsContext);
 
   const { prefixCls, options, opened } = props;
@@ -34,6 +35,13 @@ function DropdownMenu(props: DropdownMenuProps) {
       return;
     }
 
+    if (
+      textareaRef?.current &&
+      document.activeElement !== textareaRef.current.nativeElement
+    ) {
+      return;
+    }
+
     const activeItem = menuRef.current?.findItem?.({ key: activeOption.key });
 
     if (activeItem) {
@@ -42,7 +50,7 @@ function DropdownMenu(props: DropdownMenuProps) {
         inline: 'nearest',
       });
     }
-  }, [activeIndex, activeOption.key, opened]);
+  }, [activeIndex, activeOption.key, opened, textareaRef]);
 
   return (
     <Menu

src/Mentions.tsx

@@ -529,6 +529,7 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
                 onFocus: onDropdownFocus,
                 onBlur: onDropdownBlur,
                 onScroll: onInternalPopupScroll,
+                textareaRef,
               }}
             >
               <KeywordTrigger

src/MentionsContext.ts

@@ -1,6 +1,7 @@
 /* tslint:disable: no-object-literal-type-assertion */
 import * as React from 'react';
 import type { OptionProps } from './Option';
+import { TextAreaRef } from '@rc-component/textarea';
 
 export interface MentionsContextProps {
   notFoundContent: React.ReactNode;
@@ -10,6 +11,7 @@ export interface MentionsContextProps {
   onFocus: React.FocusEventHandler<HTMLElement>;
   onBlur: React.FocusEventHandler<HTMLElement>;
   onScroll: React.UIEventHandler<HTMLElement>;
+  textareaRef: React.MutableRefObject<TextAreaRef>;
 }
 
 // We will never use default, here only to fix TypeScript warning

tests/DropdownMenu.spec.tsx

@@ -22,7 +22,7 @@ describe('DropdownMenu', () => {
     // Setup component with UnstableContext for testing dropdown behavior
     const { container } = render(
       <UnstableContext.Provider value={{ open: true }}>
-        <Mentions defaultValue="@" options={generateOptions} />
+        <Mentions autoFocus defaultValue="@" options={generateOptions} />
       </UnstableContext.Provider>,
     );
 
@@ -50,4 +50,29 @@ describe('DropdownMenu', () => {
 
     scrollIntoViewMock.mockRestore();
   });
+
+  it('should NOT scroll into view when navigating without focus', async () => {
+    const { container } = render(
+      <UnstableContext.Provider value={{ open: true }}>
+        <Mentions defaultValue="@" options={generateOptions} />
+      </UnstableContext.Provider>,
+    );
+
+    const scrollIntoViewMock = jest
+      .spyOn(HTMLElement.prototype, 'scrollIntoView')
+      .mockImplementation(jest.fn());
+
+    simulateInput(container, '@');
+
+    for (let i = 0; i < 10; i++) {
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+        await Promise.resolve();
+      });
+    }
+
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+
+    scrollIntoViewMock.mockRestore();
+  });
 });