I'm using Material UI's Autocomplete input with react-hook-form
like this:
import React from "react";
import {Controller} from "react-hook-form";
import {Autocomplete} from "@mui/material";
export const ControlledAutocomplete = ({
options,
renderInput,
getOptionLabel,
onChange: ignored,
control,
defaultValue,
name,
renderOption,
viewOnly
}) => {
return (
<Controller
defaultValue={defaultValue}
render={({field: {onChange, ...props}, fieldState: {error}}) => (
<Autocomplete
options={options || []}
getOptionLabel={getOptionLabel}
isOptionEqualToValue={(option, value) => {
if (typeof (value) === 'object') {
return option.id === value.id
} else {
return option.id === value
}
}}
renderOption={renderOption}
disabled={viewOnly}
autoComplete={true}
renderInput={renderInput}
onChange={(e, data) => onChange(data)}
{...props}
/>
)}
control={control}
name={name}
/>
);
}
This works great, but I want to get the user input if no suggestion is available. Basically if there is no suggestion from the autocomplete list, I want to get the raw input from user. Is it somehow possible with Autocomplete or with any other input field in MUI?
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment