CODEWITHSUNDEEP
reactjsantd
Triyugi Narayan Mani
Triyugi Narayan Mani

Reputation: 3109

Show placeholder instead of selected value

I am using Ant Design <Select> component. What is happening is that when first time the component is loaded it shows placeholder but when I select some value and then again trying to change, then at the place of placeholder selected value is showing. That is correct as per default behavior. But I would like to show placeholder every time the select box is clicked.

Please check the working demo.

Upvotes: 1

Views: 3659

Answers (3)

Andrew Eyesman
Andrew Eyesman

Reputation: 38

Use an empty array for the value prop:

<Select
  value={[]}
  // ...
</Select>

I had a similar problem, this worked for me.

Upvotes: 0

Hemanthvrm
Hemanthvrm

Reputation: 2447

As you said, it is default behavior in ant design to show selected value as placeholder and there is no such option to change that behavior.

However you can achieve it making changes to css like this.

.ant-select.ant-select-open.ant-select-focused.ant-select-enabled
  .ant-select-selection.ant-select-selection--single
  .ant-select-selection__rendered
  .ant-select-selection-selected-value {
  visibility: hidden;
}

.ant-select.ant-select-open.ant-select-focused.ant-select-enabled
  .ant-select-selection.ant-select-selection--single
  .ant-select-selection__rendered
  .ant-select-selection-selected-value::before {
  visibility: visible;
  content: "Select a Person";
}

Here is working sample link https://codesandbox.io/s/stoic-hugle-49ify

Upvotes: 2

chumakoff
chumakoff

Reputation: 7044

Showing the placeholder in a select input as an option is not Ant Design style. What you really want is to be able to deselect (clear) after selecting.

In Ant Design's select component it is done using a clear button which will be shown if you pass the allowClear option.

<Select
  allowClear
  // ...
</Select>

After clearing the placeholder is shown again.

Upvotes: 1

Related Questions