antd design select placeholder issues

Question

I am using antd design in my React app.

Here's a code snippet where I am facing the issues :

<Select
     showSearch
     optionFilterProp = "children"
     placeholder = "Select Company"
     value = "{this.state.company}"
     name = "company"
     onSelect = "{this.handleCompanyChange}"
    >

Now it shows the correct value selected if this.state.company is not null. But if this.state.company is empty or null, placeholder doesn't shows up.

How can I solve this issue so that the placeholder appears if value is null?

Solution 1

set this.state.company to be undefined instead of null.

Solution 2

you should update as below:

<Select
     showSearch
     optionFilterProp = "children"
     placeholder = "Select Company"
     value = {this.state.company || undefined} ---- update this line
     name = "company"
     onSelect = "{this.handleCompanyChange}"
    >

Solution 3

It should be set to undefined instead of null or "" empty string.

this.props.form.setFieldsValue({
    myFieldName: undefined
})

Solution 4

I have faced the the same issue, heres the solution: Code snippet for ant design select

<Select key="1" value={this.getStateValue()} showSearch allowClear placeholder='Select Weight' onChange={onWeightChange}>
  {options}
</Select>

where getStateValue will be this:

getStateValue = () => {
    const { value } = this.state;
    if (value) {
      return value;
    }
  }

View more solutions

Comments

[FE_Addict]

Do you mean like this : this.state.company=undefined ?

[NSjonas]

value = {this.state.company?this.state.company:undefined}

[0xh8h]

You can also simplify the above statement with value={this.state.company || undefined}

[devuxer]

@afc163, Can you guys fix this? It should show the placeholder for null too.

[blueseal]

shortcut value = { this.state.company || undefined }

[Jyoti Duhan]

hi, It's is not working for me: <Select showSearch placeholder="Select category" value={undefined}>

[Kelwin Tantono]

you should put something to the value instead of just undefined @JyotiDuhan, but can you explain why should it be undefined?