I am using material-ui in React.js. When using multiple in Autocomplete it gives me the error,
Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function at useAutocomplete,
The above error occurred in the <ForwardRef(Autocomplete)> component:
in ForwardRef(Autocomplete).
material-ui version - "#mui/material": "^5.6.0",
Code:
<Autocomplete
multiple={true}
disableCloseOnSelect
id={field.name}
name={field.name}
options={locations}
value={props.values.locationId}
size="small"
autoComplete={false}
onChange={(e, newValue) => {
props.setFieldValue(
'locationId',
newValue ? newValue : '',
true,
);
}}
onBlur={() =>
props.setFieldTouched(field.name, true)
}
getOptionLabel={(option) =>
option['name'] ? option['name'] : ''
}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</li>
)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
size="small"
placeholder={field.placeholder}
variant="outlined"
/>
)}
/>
When using multiple, value must be an array (see multiple in the docs). I found this answer helpful for using a controlled Autocomplete component in multiple mode, as you're doing here.
Related
I can type something which shows selected tags from the dropdown list but I want a user can type something and create a tag or multiple tags separated by a comma.
I used a useState hook which is an array.
const [tags, setTags] = useState([]);
I set the Autocomplete like the following code -
<Autocomplete
style={{ margin: "10px 0" }}
multiple
id="tags-outlined"
options={tags}
defaultValue={[]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField
{...params}
label="Tags"
placeholder="Tags"
value={tags}
onChange={(e) => setTags([...tags, e.target.value.split(",")])}
/>
)}
/>;
Surprisingly, I tried for an hour before questioning. But Solve it within a few moments after putting the question.
Here's the solution-
<Autocomplete
style={{ margin: "10px 0" }}
multiple
id="tags-outlined"
options={tags}
defaultValue={[...tags]}
freeSolo
autoSelect
onChange={(e) => setTags([...tags, e.target.value])}
renderInput={(params) => (
<TextField
{...params}
label="Tags"
placeholder="Tags"
value={tags}
/>
)}
/>;
the output will look like this.
user input tag
but I want to add multiple tags that didn't happen right now which can be put via giving a space or comma.
Partly relevant but I think it can be helpful for someone using React Hook Form library with MUI5.
Storing tags in the state would render them being saved in form data when submitted. Instead, you need to use their onChange function.
const Tags = ()=>{
const { control,handleSubmit } = useForm({
defaultValues: {
checkbox: true,
autocomplete:["test"]
}
});
const onSubmit = data => console.log(data);
return <>
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="autocomplete"
control={control}
render={({ field }) => {
const {value,onChange} = field
return <Autocomplete
style={{ margin: "10px 0" }}
multiple
id="tags-outlined"
options={value}
defaultValue={[...value]}
freeSolo
autoSelect
onChange={((e)=>onChange([...value,e.target.value]))}
renderInput={(params) => {
return <TextField
{...params}
label="Tags"
placeholder="Tags"
value={value}
/>
}}
></Autocomplete>
}
}
/>
<input type="submit" />
</form>
</>
}
I am using autocomplete of material UI in my react app, I want to get the value when I change the item but I am getting undefined.
Here is my code
<Controller
name="partnerId"
control={control}
defaultValue={[]}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="filter-demo"
className="mt-8 mb-16"
defaultValue={personObj}
value={value}
onChange={(newValue) => {
console.log('value...', newValue)
onChange(newValue);
}}
variant="outlined"
options={partners}
getOptionLabel={option => option.name}
filterOptions={filterOptions}
renderInput={params => <TextField {...params} label="Partners" variant="outlined" />}
/>
)}
/>
Try onchange as
onChange={(event,newValue) => {
console.log('value...', newValue)
onChange(newValue);
}}
I am using Material UI's country select (https://material-ui.com/components/autocomplete/#country-select). I have an ongoing issue that when the user clicks into the input, the browser autocomplete pop up blocks the view of country options. I've tried my best to turn autocomplete to off but with no joy. Can anyone advise a possible workaround?
Have tried the 3 commonly suggested fixes:
autoComplete="off"
autoComplete="no"
autoComplete="new-password"
return (
<Autocomplete
id="country-select"
options={options}
classes={{
option: classes.option,
}}
autoHighlight
getOptionLabel={(option) => option.label}
onChange={(e, value) => setFieldValue(field.name, value.label)}
onOpen={field.onBlur}
renderOption={(option) => (
<React.Fragment>
<span>{countryToFlag(option.code)}</span>
{option.label}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
autoComplete="off"
/>
)}
/>
);
this work for me
autoComplete="chrome-off"
AutoComplete should be on rendered Input by material-ui, not the TextField wrapper. So you should do something like that:
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
inputProps={{
autoComplete: 'new-password',
}}
/>
I am trying to use MUI's Autocomplete with react-hook-form. I have wrapped an Autocomplete component in React Hook Form's Controller. When I try to set defaultValue to AutoComplete it does not work, when I try to change the preset value the Autocomplete component breaks.
Here is the snippet from my code.
<Controller
name="combo-box-demo"
control={control}
defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
as={
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
}
/>
Sandbox link of working demo code is here.
You should add an onChange prop on the Controller and return the selected object value
Also you can then implement getOptionSelected AutoComplete
export default function ComboBox() {
const { control } = useForm({});
const [selectedFilmYear, setSelectedFilmYear] = React.useState(1994);
return (
<Controller
name="combo-box-demo"
control={control}
defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
onChange={([val, obj]) => obj}
as={
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionSelected={(obj, newval) => obj.name === newval.name}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
}
/>
);
}
I have a form created with material-ui, I have a textfield that uses autocomplete which is filled with a useEffect that is responsible for bringing the data from the API to load the AUTOCOMPLETE.
The data is not saved.
Code
const defaultProps={
options:location.name,
getOptionLabel: option => option.label + "-" + option.phone,
};
<Autocomplete
style={{ width: 300 }}
{...defaultProps}
id="city"
autoComplete
onChange={(event, newVal)=>onChange({target:{name:"name",value: newVal.label }}
)}
renderInput={params => (
<TextField {...params} label="Country" margin="normal" variant="outlined" inputProps={{
...params.inputProps,
}}/>
)}
What is causing that behavior?
It appears your problem in on the following line:
onChange={(event, newVal)=>onTagsChange({target:{name:"label",value: newVal.label }}
It may be related to newValue being null after clearing. You could add a protection such as:
value: newVal || newVal.label
Since it is not clear to me how you are using the resulting selection my suggested protection may not be appropriate.
You may also want to take a look at their "controlled" example in the documentation (https://material-ui.com/components/autocomplete/#playground) in which they use the value attribute to control the AutoComplete:
<Autocomplete
{...defaultProps}
id="controlled-demo"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
renderInput={params => (
<TextField {...params} label="controlled" margin="normal" fullWidth />
)}
/>