¿Cómo puedo pasar "inputRef" a useAutocomplete de Material UI ?
Necesito asignar una referencia personalizada en la entrada, sin embargo, getInputProps() de useAutocomplete ya establece una referencia requerida.
He intentado varias cosas, como agregar la ref. Entonces mi otro código funcionará, pero useAutocomplete no funcionará, porque depende de que su propio accesorio "ref" esté configurado en la entrada.
Tampoco hay mucha documentación sobre useAutocomplete o las opciones disponibles, por lo que es difícil de depurar.
Podemos obtener la referencia de inpuRef mediante getInputProps().ref .
Por ejemplo, para usar la tecla de acceso directo ('control+q' enfoque y seleccionar el valor de entrada),
Utilicé el siguiente código. (Espero que a continuación sea útil para cualquiera que use useAutocompletar)
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> ....