реагировать материал интерфейс автозаполнения

Question

У меня есть элемент автозаполнения Material-UI

<Autocomplete
  id="combo-box-demo"
  autoHighlight
  openOnFocus
  autoComplete
  options={this.state.products}
  getOptionLabel={option => option.productName}
  style={{ width: 300 }}
  onChange={this.selectProduct}
  renderInput={params => (
    <TextField {...params} label="Select Product Name" variant="outlined" />
  )}
/>;

Я хочу, чтобы этот элемент получал фокус при нажатии кнопки.

Я пытался использовать ссылки, описанные здесь как программно реагировать на фокус ввода

Работало для других элементов, но не для автозаполнения

помогите пожалуйста

Answer 1

Вы должны сохранить ссылку на компонент TextField и использовать эту ссылку для фокусировки при щелчке другого элемента (после запуска какого-либо события).

let inputRef;

<Autocomplete
  ...
  renderInput={params => (
    <TextField
      inputRef={input => {
        inputRef = input;
      }}
    />
  )}
/>
<button
  onClick={() => {
    inputRef.focus();
  }}

Вот ссылка на рабочий пример: https://codesandbox.io/s/young-shadow-8typb

Вы можете поиграть со свойством openOnFocus автозаполнения, чтобы решить, хотите ли вы просто сфокусироваться на вводе или хотите выпадающий список автозаполнения открыть.