Show placeholder instead of selected value

Question

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.

score 2 · Accepted Answer · answered Sep 18 '19 at 20:13

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

Thanks. This is working. The only problem is when I have many fields then I have to write one class of each field. — Triyugi Narayan Mani, Sep 19 '19 at 05:27

chumakoff · Answer 2 · 2019-09-18T12:04:11.333

1

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.

edited Sep 18 '19 at 12:04

answered Sep 18 '19 at 11:57

chumakoff

6,807
2
23
45

Thanks for your answer. Yes, by clicking on clear I can do that but I am looking for automatic process. Like when I click on select automatically clear. – Triyugi Narayan Mani Sep 18 '19 at 12:20
Are you talking about this? https://stackoverflow.com/questions/47415280/how-to-clear-antd-select-items-programmatically – chumakoff Sep 18 '19 at 12:30
NO. I do not want to remove selected values. I just want to show placeholder every time select box is clicked. – Triyugi Narayan Mani Sep 18 '19 at 12:33
Why do you need that? – chumakoff Sep 18 '19 at 12:34
1

Tell the client that it is not how it is done in Ant Design ) – chumakoff Sep 18 '19 at 12:36

score 0 · Answer 3 · edited Feb 23 '21 at 20:29

0

Use an empty array for the value prop:

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

I had a similar problem, this worked for me.

edited Feb 23 '21 at 20:29

Dharman

30,962
25
85
135

answered Feb 23 '21 at 20:24

Andrew Eyesman

28
7

Show placeholder instead of selected value

3 Answers3