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][Select] Type arguments do not constraint variant prop accordingly #41401

Closed
DiegoAndai opened this issue Mar 7, 2024 · 3 comments · Fixed by #41405
Closed

[material-ui][Select] Type arguments do not constraint variant prop accordingly #41401

DiegoAndai opened this issue Mar 7, 2024 · 3 comments · Fixed by #41405
Labels
bug 🐛 Something doesn't work component: select 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 typescript

Comments

@DiegoAndai
Copy link
Member

DiegoAndai commented Mar 7, 2024

Steps to reproduce

Link to live example

Steps:

  1. Use Select component
  2. Provide type arguments, i.e., `<Select<number, "filled"> />
  3. Don't provide variant="filled"

Typescript minimal repro

Current behavior

  • The outlined variant is rendered.
  • The hiddenLabel (filled only) prop is accepted even though the outlined variant is rendered.

The current type implementation is misleading.

Expected behavior

There should be a TS error if variant="filled" is not provided

Context

No response

Your environment

npx @mui/envinfo
  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.15.1 - ~/.nvm/versions/node/v18.19.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: Not Found
    Safari: 16.5.1
  npmPackages:
    @mui/joy: workspace:* => 5.0.0-beta.30 
    @mui/material: workspace:^ => 5.15.12 
    @mui/utils: workspace:^ => 5.15.12 
    @types/react: ^18.2.55 => 18.2.55 
    typescript: ^5.3.3 => 5.3.3 

Search keywords: select type arguments variant

@DiegoAndai DiegoAndai added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! typescript labels Mar 7, 2024
@DiegoAndai
Copy link
Member Author

Discovered in #41356 (comment)

@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Mar 7, 2024
@DiegoAndai
Copy link
Member Author

Let's discuss potential solutions here first if you wish to work on this.

@alexfauquette
Copy link
Member

A solution could be to add undefined to the SelectVariants such that TS notice that it's a 4th option

typescript reproduction


Otherwise, this use case seems very small compared to the +10 user impacted by the breaking change (I might be biased since X is one of the impacted team 😅)

<Select<number, "filled"> hiddenLabel />
{/* incorrect type argument, as it will render the outlined variant */}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select 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 typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants