Skip to content

Commit f4c65cd

Browse files
zombieJclaude
andcommitted
fix: do not render value in combobox mode with custom input
Co-Authored-By: Claude Opus 4.6 <[email protected]>
1 parent ec1ee01 commit f4c65cd

File tree

2 files changed

+46
-18
lines changed

2 files changed

+46
-18
lines changed

src/SelectInput/Content/SingleContent.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { getTitle } from '../../utils/commonUtil';
1010

1111
const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
1212
({ inputProps }, ref) => {
13-
const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode } =
13+
const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode, components } =
1414
useSelectInputContext();
1515
const { triggerOpen, title: rootTitle, showSearch, classNames, styles } = useBaseProps();
1616
const selectContext = React.useContext(SelectContext);
@@ -70,25 +70,28 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
7070
String(displayValue.label).trim() !== '';
7171

7272
// Render value
73-
const renderValue = displayValue ? (
74-
hasOptionStyle ? (
75-
<div
76-
className={clsx(`${prefixCls}-content-value`, optionClassName)}
77-
style={{
78-
...(mergedSearchValue ? { visibility: 'hidden' } : {}),
79-
...optionStyle,
80-
}}
81-
title={optionTitle}
82-
>
83-
{displayValue.label}
84-
</div>
73+
// Only render value when not using custom input in combobox mode
74+
const shouldRenderValue = !(combobox && components?.input);
75+
const renderValue = shouldRenderValue ? (
76+
displayValue ? (
77+
hasOptionStyle ? (
78+
<div
79+
className={clsx(`${prefixCls}-content-value`, optionClassName)}
80+
style={{
81+
...(mergedSearchValue ? { visibility: 'hidden' } : {}),
82+
...optionStyle,
83+
}}
84+
title={optionTitle}
85+
>
86+
{displayValue.label}
87+
</div>
88+
) : (
89+
displayValue.label
90+
)
8591
) : (
86-
displayValue.label
92+
<Placeholder show={!mergedSearchValue} />
8793
)
88-
) : (
89-
<Placeholder show={!mergedSearchValue} />
90-
);
91-
94+
) : null;
9295
// Render
9396
return (
9497
<div

tests/Combobox.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,5 +646,30 @@ describe('Select.Combobox', () => {
646646
fireEvent(selectorEle, mouseDownEvent);
647647
expect(preventDefault).not.toHaveBeenCalled();
648648
});
649+
650+
// https://github.com/ant-design/ant-design/issues/56948
651+
// https://github.com/ant-design/ant-design/issues/56932
652+
it('should not render value in combobox mode with custom input', () => {
653+
const CustomInput = (props: any) => <input {...props} />;
654+
655+
const { container } = render(
656+
<Select
657+
mode="combobox"
658+
value="1"
659+
placeholder="Input value"
660+
getInputElement={() => <CustomInput />}
661+
>
662+
<Option value="1">One</Option>
663+
<Option value="2">Two</Option>
664+
</Select>,
665+
);
666+
667+
// with custom input in combobox mode, renderValue should be null
668+
// So we should only see the input element, not the rendered value div
669+
expect(container.querySelector('.rc-select-content-value')).toBeFalsy();
670+
expect(container.querySelector('.rc-select-placeholder')).toBeFalsy();
671+
expect(container.querySelector('input')).toHaveValue('1');
672+
expect(container.querySelector('input')).toHaveAttribute('placeholder', 'Input value');
673+
});
649674
});
650675
});

0 commit comments

Comments
 (0)