fix: do not render value in combobox mode with custom input (#1213)

Co-authored-by: Claude Opus 4.6 <[email protected]>

Author: zombieJ

src/SelectInput/Content/SingleContent.tsx

@@ -10,7 +10,7 @@ import { getTitle } from '../../utils/commonUtil';
 
 const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
   ({ inputProps }, ref) => {
-    const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode } =
+    const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode, components } =
       useSelectInputContext();
     const { triggerOpen, title: rootTitle, showSearch, classNames, styles } = useBaseProps();
     const selectContext = React.useContext(SelectContext);
@@ -70,25 +70,28 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
       String(displayValue.label).trim() !== '';
 
     // Render value
-    const renderValue = displayValue ? (
-      hasOptionStyle ? (
-        <div
-          className={clsx(`${prefixCls}-content-value`, optionClassName)}
-          style={{
-            ...(mergedSearchValue ? { visibility: 'hidden' } : {}),
-            ...optionStyle,
-          }}
-          title={optionTitle}
-        >
-          {displayValue.label}
-        </div>
+    // Only render value when not using custom input in combobox mode
+    const shouldRenderValue = !(combobox && components?.input);
+    const renderValue = shouldRenderValue ? (
+      displayValue ? (
+        hasOptionStyle ? (
+          <div
+            className={clsx(`${prefixCls}-content-value`, optionClassName)}
+            style={{
+              ...(mergedSearchValue ? { visibility: 'hidden' } : {}),
+              ...optionStyle,
+            }}
+            title={optionTitle}
+          >
+            {displayValue.label}
+          </div>
+        ) : (
+          displayValue.label
+        )
       ) : (
-        displayValue.label
+        <Placeholder show={!mergedSearchValue} />
       )
-    ) : (
-      <Placeholder show={!mergedSearchValue} />
-    );
-
+    ) : null;
     // Render
     return (
       <div

tests/Combobox.test.tsx

@@ -646,5 +646,30 @@ describe('Select.Combobox', () => {
       fireEvent(selectorEle, mouseDownEvent);
       expect(preventDefault).not.toHaveBeenCalled();
     });
+
+    // https://github.com/ant-design/ant-design/issues/56948
+    // https://github.com/ant-design/ant-design/issues/56932
+    it('should not render value in combobox mode with custom input', () => {
+      const CustomInput = (props: any) => <input {...props} />;
+
+      const { container } = render(
+        <Select
+          mode="combobox"
+          value="1"
+          placeholder="Input value"
+          getInputElement={() => <CustomInput />}
+        >
+          <Option value="1">One</Option>
+          <Option value="2">Two</Option>
+        </Select>,
+      );
+
+      // with custom input in combobox mode, renderValue should be null
+      // So we should only see the input element, not the rendered value div
+      expect(container.querySelector('.rc-select-content-value')).toBeFalsy();
+      expect(container.querySelector('.rc-select-placeholder')).toBeFalsy();
+      expect(container.querySelector('input')).toHaveValue('1');
+      expect(container.querySelector('input')).toHaveAttribute('placeholder', 'Input value');
+    });
   });
 });