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] Adding custom props to slotProps.paper in AutoComplete throws an error #43609

Closed
HelloIAmBanana opened this issue Sep 4, 2024 · 2 comments · Fixed by #43613
Labels
component: autocomplete This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature good first issue Great for first contributions. Enable to learn the contribution process. package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted typescript

Comments

@HelloIAmBanana
Copy link

HelloIAmBanana commented Sep 4, 2024

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/stackblitz-starters-szpsur?file=src%2FApp.tsx (In stackblitz it will work, however when using the same code locally it throws the error)
Steps:

  1. Provide custom props to the slotProps.paper in the AutoComplete component

Current behavior

You cant provide your own custom props (when you use the PaperComponent prop for example).
It throws an error because the prop does not exist on type PaperProps

 Object literal may only specify known properties, and 'values' does not exist in type 'PaperProps'.ts(2353)

Expected behavior

It would allow me to add custom props as i want, not just props that exists in PaperProps.

Context

I am trying to create a custom paper in the auto complete that has a "Select All" and "Deselect All" buttons, and for the buttons to work, I need to provide the onChange function and other props to the paper component.
but since the onChange function does not exist in paperProps, it throws me an error

Your environment

npx @mui/envinfo
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 16.20.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.114
    Edge: Chromium (127.0.2651.74)

Search keywords: Autocomplete , Paper , CustomProps

@HelloIAmBanana HelloIAmBanana added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 4, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title Adding custom props to slotProps.paper in AutoComplete throws an error [material-ui][Autocomplete] Adding custom props to slotProps.paper in AutoComplete throws an error Sep 4, 2024
@ZeeshanTamboli ZeeshanTamboli added good first issue Great for first contributions. Enable to learn the contribution process. typescript component: autocomplete This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted enhancement This is not a bug, nor a new feature package: material-ui Specific to @mui/material and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 4, 2024
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Sep 4, 2024

Thanks for opening the issue. The solution is mentioned in #38049 (comment). This is open for contribution.

Copy link

github-actions bot commented Sep 9, 2024

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @HelloIAmBanana! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature good first issue Great for first contributions. Enable to learn the contribution process. package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@ZeeshanTamboli @HelloIAmBanana and others