Skip to content

[material-ui][Autocomplete] renderOption props is missing the key prop in its definition. #42161

Closed as not planned
@mbiggs-gresham

Description

@mbiggs-gresham

Steps to reproduce

<Autocomplete<T>
            renderOption={(props, option, { inputValue }) => {
                return (
                    <ListItem ...props>

Current behavior

The props object passed to the renderOption of an Autocomplete is of type React.HTMLAttributes<HTMLLIElement> and does not specify a key prop. Previously we could spread the props directly on to a child list item, however in react 18.3.0 onwards (facebook/react#25697) it is now a warning that you must explicitly specify the key prop. eg:

<Autocomplete<T>
            renderOption={(props, option, { inputValue }) => {
                const { key, ...rest } = props;
                return (
                    <ListItem key={key} ...rest>

Because the prop is missing we have to cast the props object to keep typescript happy. eg:

const { key, ...rest } = props as React.HTMLAttributes<HTMLLIElement> & { key: string };

Expected behavior

We should not have to cast the props.

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: AutoComplete renderOption key

Metadata

Metadata

Assignees

Labels

duplicateThis issue or pull request already exists

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions