feat: Supports onPopupScroll props

README.md

@@ -57,7 +57,6 @@ online example: https://tree-select-react-component.vercel.app/
 |dropdownMatchSelectWidth | whether dropdown's with is same with select. Default set `min-width` same as input | bool | true |
 |dropdownClassName | additional className applied to dropdown | String | - |
 |dropdownStyle | additional style applied to dropdown | Object | {} |
-|dropdownPopupAlign | specify alignment for dropdown (alignConfig of [dom-align](https://github.com/yiminghe/dom-align)) | Object | - |
 |onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` |
 |notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
 |showSearch | whether show search input in single mode | bool | true |
@@ -75,6 +74,7 @@ online example: https://tree-select-react-component.vercel.app/
 |onSelect | called when select treeNode | function(value, node, extra) | - |
 |onSearch | called when input changed | function | - |
 |onTreeExpand | called when tree node expand | function(expandedKeys) | - |
+|onPopupScroll | called when popup scroll | function(event) | - |
 |showCheckedStrategy | `TreeSelect.SHOW_ALL`: show all checked treeNodes (Include parent treeNode). `TreeSelect.SHOW_PARENT`: show checked treeNodes (Just show parent treeNode). Default just show child. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
 |treeIcon | show tree icon | bool | false |
 |treeLine | show tree line | bool | false |

examples/basic.tsx

@@ -212,6 +212,9 @@ class Demo extends React.Component {
             });
           }}
           onSelect={this.onSelect}
+          onPopupScroll={evt => {
+            console.log('[ onPopupScroll evt ] ===>', evt);
+          }}
         />
 
         <h2>single select (just select children)</h2>
@@ -256,10 +259,10 @@ class Demo extends React.Component {
           choiceTransitionName="rc-tree-select-selection__choice-zoom"
           style={{ width: 300 }}
           // dropdownStyle={{ height: 200, overflow: 'auto' }}
-          dropdownPopupAlign={{
-            overflow: { adjustY: 0, adjustX: 0 },
-            offset: [0, 2],
-          }}
+          // dropdownPopupAlign={{
+          //   overflow: { adjustY: 0, adjustX: 0 },
+          //   offset: [0, 2],
+          // }}
           onDropdownVisibleChange={this.onDropdownVisibleChange}
           placeholder={<i>请下拉选择</i>}
           treeLine
@@ -389,6 +392,17 @@ class Demo extends React.Component {
           treeData={gData}
           treeTitleRender={node => node.label + 'ok'}
         />
+
+        <h2 style={{ marginTop: 140 }}>onPopupScroll</h2>
+        <TreeSelect
+          open
+          style={{ width: 300 }}
+          treeData={gData}
+          treeDefaultExpandAll
+          onPopupScroll={evt => {
+            console.log('[ onPopupScroll evt ] ===>', evt);
+          }}
+        />
       </div>
     );
   }

examples/filter.tsx

@@ -64,10 +64,10 @@ class Demo extends React.Component {
           transitionName="rc-tree-select-dropdown-slide-up"
           choiceTransitionName="rc-tree-select-selection__choice-zoom"
           // dropdownStyle={{ height: 200, overflow: 'auto' }}
-          dropdownPopupAlign={{
-            overflow: { adjustY: 0, adjustX: 0 },
-            offset: [0, 2],
-          }}
+          // dropdownPopupAlign={{
+          //   overflow: { adjustY: 0, adjustX: 0 },
+          //   offset: [0, 2],
+          // }}
           placeholder={<i>请下拉选择</i>}
           treeLine
           maxTagTextLength={10}

src/OptionList.tsx

@@ -44,6 +44,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     dropdownMatchSelectWidth,
     treeExpandAction,
     treeTitleRender,
+    onPopupScroll,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -70,6 +71,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
 
   const memoTreeData = useMemo(
     () => treeData,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [open, treeData],
     (prev, next) => next[0] && prev[1] !== next[1],
   );
@@ -97,6 +99,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       treeRef.current?.scrollTo({ key: checkedKeys[0] });
       setActiveKey(checkedKeys[0]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   // ========================== Search ==========================
@@ -123,6 +126,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     if (searchValue) {
       setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValue]);
 
   const onInternalExpand = (keys: Key[]) => {
@@ -252,6 +256,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         onLoad={onTreeLoad}
         filterTreeNode={filterTreeNode}
         expandAction={treeExpandAction}
+        onScroll={onPopupScroll}
       />
     </div>
   );

src/TreeSelect.tsx

@@ -240,6 +240,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeMotion,
     treeTitleRender,
 
+    onPopupScroll,
     ...restProps
   } = props;
 
@@ -465,6 +466,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       ...item,
       label: item.label ?? item.value,
     }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     mergedFieldNames,
     mergedMultiple,
@@ -681,6 +683,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       onSelect: onOptionSelect,
       treeExpandAction,
       treeTitleRender,
+      onPopupScroll,
     }),
     [
       virtual,
@@ -693,6 +696,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       onOptionSelect,
       treeExpandAction,
       treeTitleRender,
+      onPopupScroll,
     ],
   );
 

src/TreeSelectContext.ts

@@ -13,6 +13,7 @@ export interface TreeSelectContextProps {
   onSelect: OnInternalSelect;
   treeExpandAction?: ExpandAction;
   treeTitleRender?: (node: any) => React.ReactNode;
+  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.props.spec.js

@@ -241,6 +241,21 @@ describe('TreeSelect.props', () => {
     expect(handleSearch).toHaveBeenCalledWith('Search changed');
   });
 
+  it('onPopupScroll', () => {
+    const handleScroll = jest.fn();
+    const wrapper = mount(
+      <TreeSelect open onPopupScroll={handleScroll}>
+        <SelectNode value="Value 0" title="Title 0" key="key 0">
+          <SelectNode value="Value 0-0" title="Title 0-0" key="key 0-0" />
+          <SelectNode value="Value 0-1" title="Title 0-1" key="key 0-1" />
+          <SelectNode value="Value 0-2" title="Title 0-2" key="key 0-2" />
+        </SelectNode>
+      </TreeSelect>,
+    );
+
+    expect(wrapper.find('List').props().onScroll).toBeTruthy();
+  });
+
   it('showArrow', () => {
     const wrapper = mount(createOpenSelect({ suffixIcon: null }));
     expect(wrapper.find('.rc-tree-select-arrow').length).toBeFalsy();