MUI Autocomplete default vaule of the uncontrolled is changed after being initialized

Question

I use MUI 5.12.0 and I got this warning after rendering.

MUI: A component is changing the default value state of an uncontrolled Autocomplete after being initialized. To suppress this warning opt to use a controlled Autocomplete.

The component is multi value component. I reviewed other questions but not found proper one.

This is the error trace:

 Autocomplete (webpack-internal:///./node_modules/@mui/material/Autocomplete/Autocomplete.js:399:83)
    at FilterMultiSelect (webpack-internal:///./src/components/filters/FilterMultiSelect.tsx:51:20)
    at Filter (webpack-internal:///./src/components/filters/Filter.tsx:28:20)
    at div

My code block

import React from 'react';

import {
    SelectChangeEvent,
} from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from '@mui/material/Checkbox';
import TextField from '@mui/material/TextField';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';

import {
    IMultiSelectFilter,
    IMultiSelectFilterItemValue,
    IMultiSelectFilterValue,
} from '../../interfaces/filter';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export interface IFilterMultiSelectProps {
    data: IMultiSelectFilter;
    value: IMultiSelectFilterValue;
    onChangeValue?: (event: { filter: IMultiSelectFilter, value: IMultiSelectFilterValue }) => void;
}

function FilterMultiSelect(props: IFilterMultiSelectProps) {
    const { data, value, onChangeValue } = props;

    const updateValue = (newValue: IMultiSelectFilterValue) => {
        if (onChangeValue) {
            onChangeValue({ filter: data, value: newValue });
        }
    };
    const handleChange = (event: SelectChangeEvent<string | number>, newValue: IMultiSelectFilterItemValue[]) => {
        const values = newValue.map(({ value }) => value);

        // @ts-ignore
        updateValue(values);
    };
    const isOptionEqualToValue = (option: any, value: any) => {
        if (Array.isArray(value)) {
            // eslint-disable-next-line no-restricted-syntax
            for (const v of value) {
                if (option.value === v.value) {
                    return true;
                }
            }

            return false;
        }

        return option.value === value.value;
    };

    const defaultValues: IMultiSelectFilterItemValue[] = data.items.filter(
        (item) => value.includes(item.value.toString()),
    );

    return (
        <Autocomplete
            fullWidth
            multiple
            id="countries-tags"
            // @ts-ignore
            onChange={handleChange}
            // @ts-ignore
            options={data.items}
            isOptionEqualToValue={isOptionEqualToValue}
            disableCloseOnSelect
            // @ts-ignore
            getOptionLabel={(option) => option.label}
            renderOption={(props, option, { selected }) => (
                <li {...props}>
                    <Checkbox
                        icon={icon}
                        checkedIcon={checkedIcon}
                        style={{ marginRight: 8 }}
                        checked={selected}
                    />
                    {
                        // @ts-ignore
                        option.label
                    }
                </li>
            )}
            renderInput={(params) => (
                <TextField {...params} label={data.name} placeholder={data.name} />
            )}
            // @ts-ignore
            defaultValue={defaultValues}
            // value={value}
        />
    );
}

export default FilterMultiSelect;

I would like to resolve this warning. Anyone faced similar cases before?

MUI Autocomplete default vaule of the uncontrolled is changed after being initialized

0 Answers0