How can I pass "inputRef" to Material UI's useAutocomplete?
I need to assign a custom ref on the input, however the getInputProps() from useAutocomplete already sets an required ref.
I have tried several things, like adding the ref. Then my other code will work, but useAutocomplete will fail to function, because it's dependent on it's own "ref" prop being set on the input.
There's also not much documentation around useAutocomplete or the proviable options, so it's difficult to debug.
We can get ref of inpuRef by getInputProps().ref.
For example, to use Hot Key ('control+q' focus and select input value),
I used below code. (I hope below helpful to anyone to use useAutocomplete)
import {useHotkeys} from 'react-hotkeys-hook';
...
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
value
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: options,
limit: 10,
freeSolo: true,
autoSelect: false,
clearOnBlur: true,
selectOnFocus: true,
filterOptions: options => options,
getOptionLabel: (option) => {
if(typeof(option) === 'object'){
return `${option.artistName} ${option.songName}`
}
return option;
}
});
const inputRef = getInputProps().ref;
useHotkeys('ctrl+q',() => {
inputRef.current.focus()
inputRef.current.select()
}, [inputRef.current]);
...
...
...
return (
<div>
<div {...getRootProps()}>
<Input
onKeyDownCapture={handleKeyDown}
onKeyPressCapture={handleKeyPressed}
onFocus={handleFocus}
placeholder="control + q"
{...getInputProps()}
/>
</div>
....