feat: add onScroll event handling for Mentions dropdown (#282)

* feat: add onScroll event handling for Mentions dropdown

* docs: update MentionsProps interface documentation

* refactor: reorganize comments

* refactor: rename onDropdownScroll to onPopupScroll

* refactor: scroll handler and simplify props

docs/demo.md

@@ -40,3 +40,7 @@ Option has `key` and filter only hit by `key`
 ## Allow Clear
 
 <code src="./examples/allowClear.tsx"></code>
+
+## On Scroll
+
+<code src="./examples/onScroll.tsx"></code>

docs/examples/debug.tsx

@@ -6,6 +6,9 @@ export default () => (
   <Mentions
     rows={3}
     defaultValue="Hello @ World @"
+    onScroll={e => {
+      console.log(e);
+    }}
     open
     options={[
       {

docs/examples/onScroll.less

@@ -0,0 +1,4 @@
+.on-scroll .rc-mentions-dropdown-menu {
+  max-height: 250px;
+  overflow: auto;
+}

docs/examples/onScroll.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Mentions from 'rc-mentions';
+import '../../assets/index.less';
+import './onScroll.less';
+
+export default () => (
+  <Mentions
+    rows={3}
+    defaultValue="Hello @ World @"
+    onPopupScroll={console.log}
+    dropdownClassName="on-scroll"
+    open
+    options={Array.from({ length: 1000 }).map((_, index) => ({
+      value: `item-${index}`,
+      label: `item-${index}`,
+    }))}
+  />
+);

src/DropdownMenu.tsx

@@ -19,6 +19,7 @@ function DropdownMenu(props: DropdownMenuProps) {
     selectOption,
     onFocus,
     onBlur,
+    onScroll,
   } = React.useContext(MentionsContext);
 
   const { prefixCls, options } = props;
@@ -34,6 +35,7 @@ function DropdownMenu(props: DropdownMenuProps) {
       }}
       onFocus={onFocus}
       onBlur={onBlur}
+      onScroll={onScroll}
     >
       {options.map((option, index) => {
         const { key, disabled, className, style, label } = option;

src/Mentions.tsx

@@ -72,6 +72,7 @@ export interface MentionsProps extends BaseTextareaAttrs {
   classNames?: CommonInputProps['classNames'] & {
     mentions?: string;
   };
+  onPopupScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 }
 
 export interface MentionsRef {
@@ -130,6 +131,8 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       // https://github.com/ant-design/ant-design/blob/df933e94efc8f376003bbdc658d64b64a0e53495/components/mentions/demo/render-panel.tsx
       // @ts-expect-error
       visible,
+      onPopupScroll,
+
       // Rest
       ...restProps
     } = props;
@@ -397,7 +400,6 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
             key === 'Shift' ||
             which === KeyCode.ALT ||
             key === 'AltGraph' ||
-
             mergedMeasuring ||
             (nextMeasureText !== mergedMeasureText && matchOption)
           ) {
@@ -455,7 +457,15 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       onInternalBlur();
     };
 
+    // ============================== Scroll ===============================
+    const onInternalPopupScroll: React.UIEventHandler<
+      HTMLDivElement
+    > = event => {
+      onPopupScroll?.(event);
+    };
+
     // ============================== Render ==============================
+
     return (
       <div
         className={classNames(prefixCls, className)}
@@ -485,6 +495,7 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
                 selectOption,
                 onFocus: onDropdownFocus,
                 onBlur: onDropdownBlur,
+                onScroll: onInternalPopupScroll,
               }}
             >
               <KeywordTrigger

src/MentionsContext.ts

@@ -9,6 +9,7 @@ export interface MentionsContextProps {
   selectOption: (option: OptionProps) => void;
   onFocus: React.FocusEventHandler<HTMLElement>;
   onBlur: React.FocusEventHandler<HTMLElement>;
+  onScroll: React.UIEventHandler<HTMLElement>;
 }
 
 // We will never use default, here only to fix TypeScript warning

tests/Mentions.spec.tsx

@@ -300,6 +300,17 @@ describe('Mentions', () => {
     expect(container.firstChild).toHaveClass('rc-mentions-disabled');
   });
 
+  it('onPopupScroll should work', () => {
+    const onPopupScroll = jest.fn();
+    const { container, baseElement } = renderMentions({ onPopupScroll });
+    simulateInput(container, '@');
+    act(() => {
+      jest.runAllTimers();
+    });
+    fireEvent.scroll(baseElement.querySelector('.rc-mentions-dropdown-menu'));
+    expect(onPopupScroll).toHaveBeenCalled();
+  });
+
   describe('nativeElement', () => {
     it('work', () => {
       const ref = createRef<MentionsRef>();