I am currently working with Material UI Autocomplete and react-hook-form to create a modal, but I am facing an issue where I cannot display a value and change it simultaneously.
If I pass the default value to InputValue, it appears on the screen but cannot be edited via input. However, if I place it in value, it does allow me to change values through input and select, but the value itself doesn't show up on the screen.
This is the component being rendered:
<Autocomplete
id={name}
options={options}
getOptionLabel={(option) => (option.descricao ? option.descricao : "")}
filterOptions={filterOptions}
onChange={(e, options) =>
// console.log(options)
setValue(name, options?.descricao)
}
// onInputChange={(e, v) => setValue(name, v)}
value={cnae ? cnae : ""}
inputValue={cnae ? cnae : ""}
renderOption={(props, options) => (
<Box component="li" {...props}>
{options.id +
"/" +
options.grupo.divisao.id +
", " +
options.descricao}
</Box>
)}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
{...other}
label={label}
error={Boolean(errors[name])}
helperText={errors[name] ? errors[name].message : ""}
/>
)}
/>
These are the props being passed:
<ACCnae
name="cnae"
label="Ramo"
fullWidth
errors={errors}
options={context.cnae}
setValue={setValue}
cnae={getValues("cnae")}
required
/>
Despite typing here, only clearing and selecting seem to work. https://i.stack.imgur.com/DfvtV.gif