[sync] fix(sdk): restore filter dropdown wheel scrolling T2325 (#1515) (#2822)

Synced from teableio/teable-ee@44552eb

Co-authored-by: nichenqin <nichenqin@hotmail.com>

Author: tea-artist

packages/sdk/src/components/filter/view-filter/component/base/BaseMultipleSelect.tsx

@@ -14,9 +14,10 @@ import {
 
 import { debounce } from 'lodash';
 import { Check, ChevronDown } from 'lucide-react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from '../../../../../context/app/i18n';
 import type { IOption, IBaseMultipleSelect } from './types';
+import { scrollListByWheel } from './wheel-scroll-list';
 
 function BaseMultipleSelect<V extends string, O extends IOption<V> = IOption<V>>(
   props: IBaseMultipleSelect<V, O>
@@ -37,6 +38,7 @@ function BaseMultipleSelect<V extends string, O extends IOption<V> = IOption<V>>
     modal,
   } = props;
   const [open, setOpen] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
   const [searchValue, setSearchValue] = useState('');
   const [isComposing, setIsComposing] = useState(false);
 
@@ -128,13 +130,17 @@ function BaseMultipleSelect<V extends string, O extends IOption<V> = IOption<V>>
           />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" className={cn('p-1', popoverClassName)}>
+      <PopoverContent
+        align="start"
+        className={cn('p-1', popoverClassName)}
+        onWheelCapture={(event) => scrollListByWheel(event, listRef.current)}
+      >
         <Command
           className="rounded-sm"
           filter={onSearch ? undefined : commandFilter}
           shouldFilter={!onSearch}
         >
-          <CommandList className="mt-1">
+          <CommandList ref={listRef} className="mt-1">
             <CommandInput
               placeholder={t('common.search.placeholder')}
               className="placeholder:text-[13px]"

packages/sdk/src/components/filter/view-filter/component/base/BaseSingleSelect.tsx

@@ -13,9 +13,10 @@ import {
 } from '@teable/ui-lib';
 import { debounce } from 'lodash';
 import { Check, ChevronDown } from 'lucide-react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from '../../../../../context/app/i18n';
 import type { IOption, IBaseSelect } from './types';
+import { scrollListByWheel } from './wheel-scroll-list';
 
 function BaseSingleSelect<V extends string, O extends IOption<V> = IOption<V>>(
   props: IBaseSelect<V, O>
@@ -44,6 +45,7 @@ function BaseSingleSelect<V extends string, O extends IOption<V> = IOption<V>>(
     groupHeading,
   } = props;
   const [open, setOpen] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
 
   const label = useMemo(() => {
     return options.find((option) => option.value === value)?.label || defaultLabel;
@@ -139,7 +141,11 @@ function BaseSingleSelect<V extends string, O extends IOption<V> = IOption<V>>(
           />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" className={cn('p-1', popoverClassName)}>
+      <PopoverContent
+        align="start"
+        className={cn('p-1', popoverClassName)}
+        onWheelCapture={(event) => scrollListByWheel(event, listRef.current)}
+      >
         <Command filter={onSearch ? undefined : commandFilter} shouldFilter={!onSearch}>
           {search ? (
             <CommandInput
@@ -151,7 +157,7 @@ function BaseSingleSelect<V extends string, O extends IOption<V> = IOption<V>>(
             />
           ) : null}
           <CommandEmpty>{notFoundText}</CommandEmpty>
-          <CommandList className="mt-1">
+          <CommandList ref={listRef} className="mt-1">
             {groupHeading ? (
               <CommandGroup heading={groupHeading}>{renderOptions()}</CommandGroup>
             ) : (

packages/sdk/src/components/filter/view-filter/component/base/__tests__/BaseMultipleSelect.test.tsx

@@ -64,4 +64,27 @@ describe('BaseMultipleSelect', () => {
     fireEvent.click(screen.getAllByRole('option')[1]);
     expect(selectHandler).toHaveBeenCalledTimes(2);
   });
+
+  it('should scroll the option list when wheeling over the popover container', async () => {
+    const longOptions = Array.from({ length: 20 }, (_, index) => ({
+      label: `label-${index}`,
+      value: `value-${index}`,
+    }));
+
+    render(<BaseMultipleSelect options={longOptions} onSelect={onSelect} value={null} />, {
+      wrapper: createAppContext(),
+    });
+    toggleOpen();
+
+    const dialog = screen.getByRole('dialog');
+    const list = screen.getByRole('listbox') as HTMLDivElement;
+
+    Object.defineProperty(list, 'clientHeight', { configurable: true, value: 272 });
+    Object.defineProperty(list, 'scrollHeight', { configurable: true, value: 1200 });
+    Object.defineProperty(list, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    fireEvent.wheel(dialog, { deltaY: 120 });
+
+    expect(list.scrollTop).toBe(120);
+  });
 });

packages/sdk/src/components/filter/view-filter/component/base/__tests__/BaseSingleSelect.test.tsx

@@ -90,4 +90,27 @@ describe('BaseSingleSelect', () => {
     expect(option).toHaveLength(1);
     expect(option[0]).toHaveTextContent('label-1');
   });
+
+  it('should scroll the option list when wheeling over the popover container', async () => {
+    const longOptions = Array.from({ length: 20 }, (_, index) => ({
+      label: `label-${index}`,
+      value: `value-${index}`,
+    }));
+
+    render(<BaseSingleSelect options={longOptions} onSelect={onSelect} value={null} />, {
+      wrapper: createAppContext(),
+    });
+    toggleOpen();
+
+    const dialog = screen.getByRole('dialog');
+    const list = screen.getByRole('listbox') as HTMLDivElement;
+
+    Object.defineProperty(list, 'clientHeight', { configurable: true, value: 272 });
+    Object.defineProperty(list, 'scrollHeight', { configurable: true, value: 1200 });
+    Object.defineProperty(list, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    fireEvent.wheel(dialog, { deltaY: 120 });
+
+    expect(list.scrollTop).toBe(120);
+  });
 });

packages/sdk/src/components/filter/view-filter/component/base/wheel-scroll-list.ts

@@ -0,0 +1,11 @@
+import type { WheelEvent } from 'react';
+
+export const scrollListByWheel = (event: WheelEvent<HTMLElement>, list: HTMLElement | null) => {
+  if (!list || event.deltaY === 0 || list.scrollHeight <= list.clientHeight) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  list.scrollTop += event.deltaY;
+};