Set labelInvalue in select component, placeholder dispaly incorrect!
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.1.4
Environment
mac 10.13.5 , chrome 67.0.3396.87 , react 16.2.0
Reproduction link
https://codepen.io/littlelane/pen/eKVyRM?editors=0010
Steps to reproduce
const mipayFormOptios = [
{
label: '医保中心',
type: 'select',
placeholder: '请选择医保中心',
field: 'accountNo',
initialValue: handleType === 'update' ? {key: thisRecord.accountNo, label: thisRecord.medicalCenterName } : {key: ''},
options: { options: medicalList, label: 'medicalCenterName', value: 'medicalCenterNo' },
labelInValue: true,
rules: [{
required: true, message: '请选择医保中心',
}]
}, {
label: '医疗机构编号',
type: 'input',
placeholder: '请输入医疗机构编号',
field: 'medicalJournalNo',
initialValue: thisRecord.medicalJournalNo,
maxLength: 40,
rules: [{
required: true, message: '请输入医疗机构编号',
}, {
pattern: CODE_REG, message: '请输入长度最大为40位的包含数字、字母和下划线的编码'
}]
}
]
What is expected?
expect when set labelInvalue in select component,the select accept type of value not only {key: string | number, label: ReactNode},but also {key: string | number | undefined, label: ReactNode} ! Because the select component only set undefined, the placeholder can display correct!
What is actually happening?
the select accept value type only {key: string | number, label: ReactNode}, when select component init the placeholder can’t display correct!
Issue Analytics
- State:
- Created 5 years ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
antd design select placeholder issues - Stack Overflow
How can I solve this issue so that the placeholder appears if value is null? javascript · reactjs · redux · create-react-app ·...
Read more >Select - Ant Design
Select component to select value from options. ... The labelInValue prop can be used to get the label property of the selected item....
Read more >Select - Ant Design
Select component to select value from options. ... A dropdown menu for displaying choices - an elegant alternative to the native <select> element....
Read more >Select - Ant Design
Select component to select value from options. When To Use#. A dropdown menu for displaying choices - an elegant alternative to the native...
Read more >ProFormFields - ProComponents
We support pass-through of placeholder , so you can set placeholder directly on the component. Each form item also supports readonly , which...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
这个bug没修复就这么关了。。。。
Actually, I did get it to display the placeholder. Basically, my value prop went from this:
value={{key: filter.keyName, label: filter.labelName}}
to this:
value={filter ? { key: filter.keyName, label: filter.labelName } : undefined }
That will display the placeholder correctly, but this will definitely be confusing for other developers that look at this code in the future.