Skip to content

fix(Select): keep legacy DOM structure for single select without filterable #4351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RylanBot wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

fix(Select): keep legacy DOM structure for single select without filterable #4351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aa1a5d2
fix(Select): keep legacy DOM structure for single select without filt…
RylanBot Aug 6, 2026
343c55a
chore: update code format
RylanBot Aug 6, 2026
f7966c9
fix(Select): keep legacy DOM structure for single select without filt…
RylanBot Aug 6, 2026
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
6 changes: 3 additions & 3 deletions packages/components/select-input/useSingle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,11 @@ export default function useSingle(props: SelectInputProps) {
}),
};

// allowInput=false 且 singleValueDisplay 是 React 元素，直接放进 label，不需要 absolute
// allowInput=false 时直接将选中内容放进 label，不需要 absolute
// (历史实现，避免 DOM 结构变更，保留原有逻辑，大版本可考虑彻底统一)
const isStaticCustomElement = !allowInput && React.isValidElement(singleValueDisplay);
const isStaticValueDisplay = !allowInput && Boolean(valueDisplay);

if (isStaticCustomElement) {
if (isStaticValueDisplay) {
return (
<Input
{...sharedInputProps}
Expand Down
49 changes: 42 additions & 7 deletions packages/components/select/__tests__/select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/* eslint-disable */
import React, { useState } from 'react';
import { act, fireEvent, mockTimeout, render } from '@test/utils';
import userEvent from '@testing-library/user-event';

import Popup from '../../popup';
import Space from '../../space';
import Tag from '../../tag';
import { Select, SelectProps } from '../index';
import { Select } from '../index';

import type { SelectProps } from '../index';

const { Option, OptionGroup } = Select;

Expand Down Expand Up @@ -136,6 +137,30 @@ describe('Select 组件测试', () => {
);
});

test('非过滤单选的字符串 valueDisplay 使用 prefix 展示', () => {
const { container } = render(
<Select value="china" valueDisplay="+86" options={[{ label: '中国', value: 'china' }]} />,
);
expect(container.querySelector('.t-input__prefix')).toHaveTextContent('+86');
expect(container.querySelector('.t-input__inner')).toHaveValue(' ');
});

test('非过滤单选的自定义元素 label 使用 prefix 展示', () => {
const { container } = render(
<Select
value="ai"
options={[
{
label: <span className="custom-label">人工智能</span>,
value: 'ai',
},
]}
/>,
);
expect(container.querySelector('.t-input__prefix .custom-label')).toHaveTextContent('人工智能');
expect(container.querySelector('.t-input__inner')).toHaveValue(' ');
});

test('多选测试', async () => {
const MultipleSelect = () => {
const [value, setValue] = useState([{ label: 'Apple', value: 'apple' }]);
Expand Down Expand Up @@ -327,7 +352,9 @@ describe('Select 组件测试', () => {
// expect(document.querySelector(popupSelector)).toHaveTextContent('Banana');

// 输入“an1”, input展示“an1”，popup展示“无数据”
fireEvent.change(getByPlaceholderText(testId), { target: { value: 'test' } });
fireEvent.change(getByPlaceholderText(testId), {
target: { value: 'test' },
});
expect(getByPlaceholderText(testId)).toHaveValue('test');
expect(document.querySelector(popupSelector)).toHaveTextContent('无数据');
});
Expand All @@ -341,7 +368,9 @@ describe('Select 组件测试', () => {
fireEvent.click(document.querySelector('input'));

// 输入“123”, input 展示“123”，popup 展示123_test1、123_test2、123_test3
fireEvent.change(document.querySelector('input'), { target: { value: '123' } });
fireEvent.change(document.querySelector('input'), {
target: { value: '123' },
});
expect(document.querySelector('input')).toHaveValue('123');
expect(document.querySelector(popupSelector)).toHaveStyle({
display: 'block',
Expand All @@ -352,7 +381,9 @@ describe('Select 组件测试', () => {
await mockTimeout(() => expect(document.querySelector(popupSelector)).toHaveTextContent('123_test3'), 100);

// 清空 input，popup 展示 Apple、Orange、Banana
fireEvent.change(document.querySelector('input'), { target: { value: '' } });
fireEvent.change(document.querySelector('input'), {
target: { value: '' },
});
expect(document.querySelector('input')).toHaveValue('');
expect(document.querySelector(popupSelector)).toHaveStyle({
display: 'block',
Expand All @@ -373,7 +404,9 @@ describe('Select 组件测试', () => {
expect(document.querySelector(popupSelector)).not.toBeNull();

// 输入“123”, input 展示“123”，popup 展示123_test1、123_test2、123_test3
fireEvent.change(container.querySelector('input'), { target: { value: '123' } });
fireEvent.change(container.querySelector('input'), {
target: { value: '123' },
});
expect(container.querySelector('input').value).toBe('123');

expect(document.querySelector(popupSelector)).toHaveTextContent('加载中');
Expand All @@ -383,7 +416,9 @@ describe('Select 组件测试', () => {
fireEvent.click(getByText('123_test1'));
await mockTimeout(() => expect(document.querySelector(selectSelector)).toHaveTextContent('123_test1'));

fireEvent.change(document.querySelector('input'), { target: { value: '' } });
fireEvent.change(document.querySelector('input'), {
target: { value: '' },
});
fireEvent.click(getByText('123_test2'));
// 已选的 123_test1 仍然保留
await mockTimeout(() => expect(document.querySelector(selectSelector)).toHaveTextContent('123_test1'));
Expand Down
2 changes: 1 addition & 1 deletion packages/components/select/base/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ const Select = forwardRefWithStatics(

const renderValueDisplay = useMemo(() => {
if (!valueDisplay) {
if (!multiple) return selectedLabel;
if (!multiple) return isValidElement(selectedLabel) ? selectedLabel : undefined;
return ({ value: val }) =>
val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((_, index: number) => {
const targetVal = get(selectedOptions[index], valueKey);
Expand Down
28 changes: 19 additions & 9 deletions test/snap/__snapshots__/csr.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89450,18 +89450,23 @@ exports[`csr snapshot test > csr test packages/components/select/_example/custom
<div
class="t-input__wrap"
spellcheck="false"
value="选中选项一"
value=" "
>
<div
class="t-input t-align-left t-input--suffix"
class="t-input t-align-left t-input--prefix t-input--suffix"
>
<div
class="t-input__prefix"
>
选中选项一
</div>
<input
autocomplete="off"
class="t-input__inner"
placeholder="请选择"
placeholder=""
readonly=""
type="text"
value="选中选项一"
value=" "
/>
<span
class="t-input__suffix t-input__suffix-icon"
Expand Down Expand Up @@ -150043,18 +150048,23 @@ exports[`csr snapshot test > csr test packages/components/tree-select/_example/v
<div
class="t-input__wrap"
spellcheck="false"
value="广州市(guangzhou)"
value=" "
>
<div
class="t-input t-align-left t-input--suffix"
class="t-input t-align-left t-input--prefix t-input--suffix"
>
<div
class="t-input__prefix"
>
广州市(guangzhou)
</div>
<input
autocomplete="off"
class="t-input__inner"
placeholder="请选择"
placeholder=""
readonly=""
type="text"
value="广州市(guangzhou)"
value=" "
/>
<span
class="t-input__suffix t-input__suffix-icon"
Expand Down Expand Up @@ -155002,7 +155012,7 @@ exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/p

exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/props.tsx 1`] = `"<div class="t-tree-select t-select-input" style="width:300px"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div>"`;

exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="广州市(guangzhou)" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value="广州市(guangzhou)"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix">广州市(guangzhou)</div><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=" "/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuetype.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="深圳市">深圳市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;

Expand Down
Loading
Loading