Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions src/SelectInput/Content/SingleContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
25 changes: 25 additions & 0 deletions tests/Combobox.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
Loading