diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx index 8993216..3cc7ded 100644 --- a/src/DropdownMenu.tsx +++ b/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 ( ( onFocus: onDropdownFocus, onBlur: onDropdownBlur, onScroll: onInternalPopupScroll, + textareaRef, }} > ; onBlur: React.FocusEventHandler; onScroll: React.UIEventHandler; + textareaRef: React.MutableRefObject; } // We will never use default, here only to fix TypeScript warning diff --git a/tests/DropdownMenu.spec.tsx b/tests/DropdownMenu.spec.tsx index 2ab3ca5..89ec8ef 100644 --- a/tests/DropdownMenu.spec.tsx +++ b/tests/DropdownMenu.spec.tsx @@ -22,7 +22,7 @@ describe('DropdownMenu', () => { // Setup component with UnstableContext for testing dropdown behavior const { container } = render( - + , ); @@ -50,4 +50,29 @@ describe('DropdownMenu', () => { scrollIntoViewMock.mockRestore(); }); + + it('should NOT scroll into view when navigating without focus', async () => { + const { container } = render( + + + , + ); + + 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(); + }); });