Issue
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>
Solution
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.
Answered By - sultan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.