Antd select element: how can I disable typing?

All we need is an easy explanation of the problem, so here it is.

I’m trying to use a select element with mode=”multiple”. I’d like for input to be disabled, meaning that a user can only choose between existing options, not enter text. How do I do this?

My element:

import { Select } from 'antd';
import 'antd/dist/antd.css';
const { Option, OptGroup } = Select;

<Select
                        defaultValue={['current', 'grower', 'variety', 'varietyP90']}
                        size={'large'}
                        style={{ width: '13rem' }}
                        onChange={value => this.setState({ yield: value })}
                        mode="multiple"
                        maxTagCount={0}
                        maxTagPlaceholder="Yield metrics">
                        <Option value="current">Current Yield</Option>
                        <Option value="grower">Grower Average</Option>
                        <Option value="variety">Variety Potential</Option>
                        <Option value="varietyP90">All growers' average</Option>
                    </Select>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Unfortunately in v3.3 there is no way to hide the search input of Select in multiple mode.

We can set the input maxlength to zero and get the wanted result.

The offering solution is kind of a hack and I don’t like it personally but I couldn’t find any better solution. I tried to hide the input using css but that prevents to close the drop-list because the input is used as a trigger for closing the list on focus lost event.

class TagSelect extends Select {
  disableInput() {
    const selects = document.getElementsByClassName(`ant-select-search__field`)
    for (let el of selects) {
      el.setAttribute(`maxlength`, 0)
    }
  }
  componentDidMount() {
    this.disableInput()
  }
}

ReactDOM.render(
  <TagSelect
    defaultValue={['current']}
    size={'large'}
    style={{width: '100%'}}
    mode="multiple"
    placeholder="Yield metrics"
  >
    <Option value="current">Current Yield</Option>
    <Option value="grower">Grower Average</Option>
    <Option value="variety">Variety Potential</Option>
    <Option value="varietyP90">All growers' average</Option>
  </TagSelect>,
  document.getElementById("container")
)

The working demo you can check here.

Method 2

This is a kind of hack in ant selection component. (using css)

Ant Version: 3.26.6

<Select className="my_select_component" />

.my_select_component {
  .ant-select-search__field {
   display: none;
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply