Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mbiggs-gresham opened this issue May 8, 2024 · 2 comments
Assignees
Labels
duplicate This issue or pull request already exists

Comments

@mbiggs-gresham
Copy link

mbiggs-gresham commented May 8, 2024

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

@mbiggs-gresham mbiggs-gresham added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 8, 2024
@mbiggs-gresham mbiggs-gresham changed the title Autocomplete renderOption props is missing the key prop. Autocomplete renderOption props is missing the key prop in its definition. May 8, 2024
@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label May 8, 2024
@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label May 8, 2024
@oliviertassinari
Copy link
Member

Let's aggregate all of those. Closing for #39833

@oliviertassinari oliviertassinari added duplicate This issue or pull request already exists and removed bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 8, 2024
@DiegoAndai DiegoAndai changed the title Autocomplete renderOption props is missing the key prop in its definition. [material-ui][Autocomplete] renderOption props is missing the key prop in its definition. Jun 18, 2024
@DiegoAndai DiegoAndai reopened this Jun 18, 2024
@DiegoAndai DiegoAndai added bug 🐛 Something doesn't work typescript ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed duplicate This issue or pull request already exists labels Jun 18, 2024
@DiegoAndai DiegoAndai closed this as not planned Won't fix, can't repro, duplicate, stale Jun 18, 2024
@DiegoAndai DiegoAndai added duplicate This issue or pull request already exists and removed bug 🐛 Something doesn't work typescript ready to take Help wanted. Guidance available. There is a high chance the change will be accepted labels Jun 18, 2024
@DiegoAndai
Copy link
Member

DiegoAndai commented Jun 18, 2024

Sorry for the reopening-closing mess 😅 I got confused, see: #39833 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

5 participants