ant-design / ant-design/pro-components
🐛[BUG] ProFormSelect + request 模糊搜索无法根据 value 匹配的问题
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
在使用ProFormSelect 组件配合 request 属性进行模糊搜索时,搜索功能只能根据 label 进行匹配,无法根据 value进行匹配。这导致当用户输入的是数据的实际值(value)而非显示标签(label)时,无法正确搜索到对应的选项。
### 📷 复现步骤
创建一个 ProFormSelect 组件,配置 request 属性进行异步数据加载
设置 showSearch={true} 启用搜索功能 3.返回的数据格式为 [{label: '张三', value:'zhangsan'}, {label: '李四', value: 'lisi'}]
在搜索框中输入 'zhangsan'(value值)
观察搜索结果
### 🏞 期望结果
期望:能搜索到 "张三" 这个选项
实际:无搜索结果,只有输入 "张三"(label值)才能搜索到
### 💻 复现代码
```
import { ProForm, ProFormSelect } from '@ant-design/pro-components';
const Demo = () => {
const requestOptions = async (params) => {
// 模拟异步请求
const mockData = [
{ label: '张三', value: 'zhangsan' },
{ label: '李四', value: 'lisi' },
{ label: '王五', value: 'wangwu' },
];
// 当前只能根据 label 进行过滤
const filteredData = mockData.filter(item =>
item.label.includes(params.keyWords || '')
);return {
data: filteredData,
success: true,
};
};
return (
);
};
export default Demo;
```
### © 版本信息
- ProComponents 版本: [2.8.10]
Contributor guide
Research direction
Start at the ProFormSelect entry point and trace how the request prop handles search parameters and returned options. Reproduce the example with label 张三 and value zhangsan, then verify that searching by either field returns the matching option and that existing label searches still work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100