Antd select element: como posso desativar a digitação? - html, reactjs, antd

Estou tentando usar um elemento select com mode = "multiple". Eu gostaria que a entrada fosse desabilitada, o que significa que um usuário só pode escolher entre opções existentes, não inserir texto. Como eu faço isso?

Meu elemento:

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>

Respostas:

Infelizmente, na v3.3 não há como esconder a entrada de pesquisa de Selecionar em multiple modo.

Podemos definir a entrada maxlength para zero e obter o resultado desejado.

A solução de oferta é uma espécie de hack e euNão goste pessoalmente, mas não encontrei nenhuma solução melhor. Eu tentei esconder a entrada usando css, mas que impede de fechar a lista de queda, porque a entrada é usada como um gatilho para fechar a lista no evento perdido de foco.

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")
)

A demonstração de trabalho que você pode verificar Aqui.