react material ui autocomplete element focus onclick

Question

I have a material-ui autocomplete element

<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" />
  )}
/>;

I want this element to get focus when I click a button.

I tried using references as discribed here how react programmatically focus input

It worked for other elements but not for autocomplete

please help

Answer 1

You should save a reference to the TextField component, and use this ref to focus once another element is clicked (once some event was triggered).

let inputRef;

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

Here is a link to a working example: https://codesandbox.io/s/young-shadow-8typb

You can play with the openOnFocus property of the Autocomplete to decide if you just want focus on the input or you want the dropdown of the autocomplete to open.

Answer 2

as per material ui previous version 4 or current version 5, You can simply focus autocomplete input element using autoFocus props, if autoFocus is set to true then input element will be focused on each first mount of autocomplete component.

const [query, setQuery] = useState('');

<Autocomplete
.....
 renderInput={(params) => {
  const { InputLabelProps, InputProps, ...rest } = params;
  return <InputBase
    {...params.InputProps}
                    {...rest} 
                     name="query"
                      value={query}  
                      onChange={handleSearch}
                      autoFocus

   />

}}

/>

// it is just an example , you can handle below function as per your wish

function handleOnSearch({ currentTarget = {} }) {
    const { value } = currentTarget;
    setQuery(value);
  }

If you want to open an autocomplete input once a button is clicked :-

//button to be clicked to open autocomplete input
const clickButton=()=>{
setOpen(true)
}

const handleClose =()=>{
setOpen(false)
}

<Dialogue
close={handleClose}
open={open}

>
<DialogActions>
 <Autocomplete
    .....
     renderInput={(params) => {
      const { InputLabelProps, InputProps, ...rest } = params;
      return <InputBase
        {...params.InputProps}
                        {...rest} 
                         name="query"
                          value={query}  
                          onChange={handleSearch}
                          autoFocus
    
       />
    
    }}
    
    />

</DialogActions>

</Dialogue>

Cheers!!!