fix: prevent extra props from being passed to selected item display (#1189)

Author: afc163

src/SelectInput/Content/SingleContent.tsx

@@ -31,7 +31,7 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
 
     // Extract option props, excluding label and value, and handle className/style merging
     const optionProps = React.useMemo(() => {
-      let restProps: React.HTMLAttributes<HTMLDivElement> = {
+      const restProps: React.HTMLAttributes<HTMLDivElement> = {
         className: `${prefixCls}-content-value`,
         style: {
           visibility: mergedSearchValue ? 'hidden' : 'visible',
@@ -41,15 +41,12 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
       if (displayValue && selectContext?.flattenOptions) {
         const option = selectContext.flattenOptions.find((opt) => opt.value === displayValue.value);
         if (option?.data) {
-          const { label, value, className, style, key, ...rest } = option.data;
-
-          restProps = {
-            ...restProps,
-            ...rest,
+          const { className, style } = option.data;
+          Object.assign(restProps, {
             title: getTitle(option.data),
             className: clsx(restProps.className, className),
             style: { ...restProps.style, ...style },
-          };
+          });
         }
       }
 

tests/Select.test.tsx

@@ -2853,4 +2853,32 @@ describe('Select.Basic', () => {
       expect(select).toHaveClass('rc-select-focused');
     });
   });
+
+  it('should not pass extra props to the selected item display', () => {
+    const { container } = render(
+      <Select
+        value="1"
+        open
+        options={[
+          {
+            value: '1',
+            label: 'One',
+            className: 'my-option-class',
+            style: { color: 'red' },
+            title: 'my-title',
+            ['xxx' as any]: 'should-not-be-here',
+          },
+        ]}
+      />,
+    );
+
+    const selectedItem = container.querySelector('.rc-select-content-value');
+
+    expect(selectedItem).toBeTruthy();
+    expect(selectedItem).toHaveClass('my-option-class');
+    expect(selectedItem).toHaveStyle({ color: 'red' });
+    expect(selectedItem).toHaveAttribute('title', 'my-title');
+
+    expect(selectedItem).not.toHaveAttribute('xxx');
+  });
 });