Feat: support grouped Options in Virtualized Select #2643

packages/semi-ui/select/_story/select.stories.jsx

@@ -2796,7 +2796,13 @@ const FilterDefaultOpen = () => {
         filter
         defaultOpen
       >
-        <Select.OptGroup label="Asia">
+        <Select.OptGroup label="Asia" virtualize={
+          {
+            height: 270,
+            width: '100%',
+            itemSize: 36,
+          }
+        }>
           <Select.Option value="a-1">China</Select.Option>
           <Select.Option value="a-2">Korea</Select.Option>
         </Select.OptGroup>
@@ -3709,4 +3715,71 @@ export const fix2465 = () => {
             <Button onClick={()=>{multipleSelectBox.current.close()}}>close</Button>
         </div>
     );
-}
+}
+
+export const FilterVirtualizedOptGroupSelect = () => {
+  const [value, setValue] = useState('a-1');
+
+  const asiaOptions = Array.from({ length: 50 }, (_, index) => ({
+    value: `a-${index + 1}`,
+    label: `Asia Country ${index + 1}`
+  }));
+
+  const europeOptions = Array.from({ length: 50 }, (_, index) => ({
+    value: `b-${index + 1}`,
+    label: `Europe Country ${index + 1}`
+  }));
+
+  const africaOptions = Array.from({ length: 50 }, (_, index) => ({
+    value: `c-${index + 1}`,
+    label: `Africa Country ${index + 1}`
+  }));
+
+  return (
+    <Select
+      placeholder="Select a country"
+      style={{ width: 300 }}
+      filter
+      defaultOpen
+      value={value}
+      onChange={val => setValue(val)}
+      virtualize={{
+        height: 300,
+        width: '100%',
+        itemSize: 36,
+      }}
+    >
+      <Select.OptGroup label="Asia" virtualize>
+        {asiaOptions.map(option => (
+          <Select.Option key={option.value} value={option.value}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Select.OptGroup>
+      <Select.OptGroup label="Europe" virtualize>
+        {europeOptions.map(option => (
+          <Select.Option key={option.value} value={option.value}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Select.OptGroup>
+      <Select.OptGroup label="Africa" virtualize> 
+        {africaOptions.map(option => (
+          <Select.Option key={option.value} value={option.value}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Select.OptGroup>
+    </Select>
+  );
+};
+
+FilterVirtualizedOptGroupSelect.story = {
+  name: '分组选择器虚拟化（1000个选项）',
+  parameters: {
+    info: {
+      title: '分组选择器虚拟化',
+      description: '测试OptGroup是否支持虚拟化'
+    }
+  }
+};

packages/semi-ui/select/index.tsx

@@ -182,14 +182,14 @@ export type SelectProps = {
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: PopoverProps
 } & Pick<
-TooltipProps,
-| 'spacing'
-| 'getPopupContainer'
-| 'motion'
-| 'autoAdjustOverflow'
-| 'mouseLeaveDelay'
-| 'mouseEnterDelay'
-| 'stopPropagation'
+    TooltipProps,
+    | 'spacing'
+    | 'getPopupContainer'
+    | 'motion'
+    | 'autoAdjustOverflow'
+    | 'mouseLeaveDelay'
+    | 'mouseEnterDelay'
+    | 'stopPropagation'
 > & React.RefAttributes<any>;
 
 export interface SelectState {
@@ -316,7 +316,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     };
 
     static __SemiComponentName__ = "Select";
-    
+
     static defaultProps: Partial<SelectProps> = getDefaultPropsFromGlobalConfig(Select.__SemiComponentName__, {
         stopPropagation: true,
         motion: true,
@@ -751,7 +751,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
              * When searchPosition is trigger, the keyboard events are bound to the outer trigger div, so there is no need to listen in input.
              * When searchPosition is dropdown, the popup and the outer trigger div are not parent- child relationships,
              * and bubbles cannot occur, so onKeydown needs to be listened in input.
-             *  */ 
+             *  */
             onKeyDown: (e) => this.foundation._handleKeyDown(e)
         };
 
@@ -924,15 +924,47 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         const { direction } = this.context;
         const { height, width, itemSize } = virtualize;
 
+        const content: any[] = [];
+
+        visibleOptions.forEach((option) => {
+            if (option._parentGroup && !content.some(item =>
+                item.type === OptionGroup &&
+                item.props.label === option._parentGroup.label
+            )) {
+                content.push(
+                    <OptionGroup
+                        key={`group-${option._parentGroup.label}`}
+                        {...option._parentGroup}
+                    />
+                );
+            }
+
+            content.push(option);
+        });
+
         return (
             <List
                 ref={this.virtualizeListRef}
                 height={height || numbers.LIST_HEIGHT}
                 itemCount={visibleOptions.length}
                 itemSize={itemSize}
-                itemData={{ visibleOptions, renderOption: this.renderOption }}
                 width={width || '100%'}
                 style={{ direction }}
+                itemData={{
+                    visibleOptions: content,
+                    renderOption: (option, index, style) => {
+                        if (option.type === OptionGroup) {
+                            return React.cloneElement(option, { style });
+                        }
+                        return this.renderOption(option, index, style);
+                    }
+                }}
+                itemKey={(index, data) => {
+                    const option = data.visibleOptions[index];
+                    return option.type === OptionGroup
+                        ? `group-${option.props.label}`
+                        : option.value;
+                }}
             >
                 {VirtualRow}
             </List>