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

score 25 · Accepted Answer · answered Apr 07 '20 at 12:48

25

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.

answered Apr 07 '20 at 12:48

Dekel

60,707
10
101
129

1

Textfield props `inputRef` was the key, nice. – keikai Apr 07 '20 at 13:12
Is there any way to populate autocomplete on click? mean i have a text field with button. I want to show autocomplete on clicking that button. Is there any way to do it? – S0haib Nasir Jan 02 '21 at 09:07
@S0haibNasir Not sure I understand what you mean by "show autocomplete on clicking that button". – Dekel Jan 05 '21 at 22:15
in auto complete, I dont want to activate it on clicking the combo box like above example. I want to type something and then clicking some button should search from the data. like My data has countries list. Now as I type U it shows option of USA, UK etc. I want it to show option after clicking some btn. Like I typed Uk it should not show any option but there should be a button to populate the option. on clicking that button it should show UK, ukraine etc. – S0haib Nasir Jan 13 '21 at 09:15
2

I switched the: `let inputRef;` to `const ref = useRef();` And passed: `inputRef={ref}` You'll need to change the onClick: `onClick={() => ref.current.focus()}` – Ido Bar Lev May 09 '22 at 09:20

sudip lahiri · Answer 2 · 2021-11-26T06:23:57.167

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!!!

react material ui autocomplete element focus onclick

2 Answers2

Linked