Material-ui: AutoComplete:<li> cannot appear as a descendant of <li> when using ListItem in renderOption

[jeromeSH26]

Hi guys,
I have this boring warning when using a ListItem object as renderOption:
Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.

Can't find how to bypass it. Any idea?

import {
    ListItem as MUIListItem,
    ListItemProps,
    TextField,
} from "@material-ui/core";
import RemoveIcon from "@material-ui/icons/RemoveCircleOutlineSharp";
import Autocomplete from "@material-ui/lab/Autocomplete";
import React, { useState } from "react";
import { ITextFieldProps } from "../InputField/BaseInputField";
import Chip from "./../Chip";

export interface IOptionsValue {
    value: string;
    label: string;
}

interface IMultiSelectChipsProps {
    options: IOptionsValue[];
}

export interface IListItem extends ListItemProps {
    option: IOptionsValue;
}

const ListItem: React.FC<IListItem> = (props: IListItem): JSX.Element => {
    return (
        <MUIListItem key={props.option.value} value={props.option.value}>
            {props.option.label}
        </MUIListItem>
    );
};

const MultiSelectChips: React.FC<IMultiSelectChipsProps> = (
    props: IMultiSelectChipsProps
) => {
    const [val, setVal] = useState<IOptionsValue[]>([]);

    return (
        <div style={{ width: 500 }}>
            <Autocomplete
                multiple
                id="tags-standard"
                freeSolo
                filterSelectedOptions
                options={props.options}
                onChange={(_, newValue: IOptionsValue[]) => setVal(newValue)}
                getOptionLabel={(option: IOptionsValue) => option.label}
                renderTags={(value: IOptionsValue[]) =>
                    value.map((option: IOptionsValue, index: number) => (
                        <Chip
                            key={index}
                            label={option.label}
                            deleteIcon={<RemoveIcon />}
                            onDelete={() => {
                                setVal(val.filter(entry => entry !== option));
                            }}
                        />
                    ))
                }
                value={val}
                renderInput={(params: ITextFieldProps) => (
                    <TextField
                        {...params}
                        variant="standard"
                        placeholder="Select..."
                        margin="normal"
                        fullWidth
                    />
                )}
                renderOption={(option: IOptionsValue) => (
                    <ListItem option={option} />
                )}
                {...props}
            />
        </div>
    );
};

export default MultiSelectChips;

[jeromeSH26]

any idea?

[oliviertassinari]

@jeromeSH26 The API was designed to prevent the usage of ListItem in this context. It's too slow.

[oliviertassinari]

The alternative is to set a component="div" on the list item to clear the warning.

[ImanMahmoudinasab]

@jeromeSH26 The API was designed to prevent the usage of ListItem in this context. It's too slow.

1. What makes it slow?
2. What is the recommended solution in this case?

The alternative is to set a component="div" on the list item to clear the warning.

This alternative won't help if we use <ListItemSecondaryAction> in the ListItem as it will wrap item with a <li>.

[oliviertassinari]

@ImanMahmoudinasab See #19254 for a proper fix, in case you want to work on it.

[ImanMahmoudinasab]

@oliviertassinari The changes in the mentioned issue will allow developers to use MenuItems as a Autocomplete's item. But what about the slowness you mentioned?
I like to get more insight into the slowness issue, any reference?

[oliviertassinari]

I like to get more insight into the slowness issue

@ImanMahmoudinasab Best to try it out by yourselves, if you are fine with it, you can move forward.

[MikeAlvarado]

The alternative is to set a component="div" on the list item to clear the warning.

Worked for me, thanks!