[Select] Prop component + value breaks compilation for MenuItem

Open
#21,210 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the linked demo.tsx reproduction and inspect MenuItem's type relationship with ListItem, OverridableComponent, and BaseButton. Verify the TypeScript error when component and value are combined, then confirm that the supported combinations compile without errors.

Written by the indexing model from the issue text.

Description

scope: select typescript

Combination of both prop component + prop value seems incompatible.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

value, a valid prop for MenuItem (inherit from li native element) seems to break compilation, if provided along with component prop. No matter if component is a native HTML element, a custom component or MUI component.

Expected Behavior 🤔

You can use both props w/o typescript compilation errors.

Steps to Reproduce 🕹

As you can see in the demo, every combination should be acceptable. As you can see in the second case, component="Typography" lets you use any Typography prop along with MenuItem props. You can comment line 18 to check this out. But when it comes to value, Typescript complains for line 15

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: Ref<ButtonBaseActions>; buttonRef?: Ref<unknown>; centerRipple?: boolean; disabled?: boolean; disableRipple?: boolean; ... 4 more ...; TouchRippleProps?: Partial<...>; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>'

I've check out how MenuItem is basically a ListItem with aditional props, and the problem persists as well using this component. Probably is something with OverridableComponent interface or BaseButton, im not sure.

Context 🔦

This "value" prop, not only an acceptable prop for native element, but it is indirectly being supported as MUI documentation for Select allows you to use MenuItem as children, but I couldn't find a demo with, also, a prop component.

Your Environment 🌎

Tech Version
Material-UI v4.10.0 (latest)
React v16.13.1
Browser 83.0.4103.61
TypeScript 3.9.3
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.