[TextField] Missing pseudo-classes generates error when overriding <Input>
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- 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 😯
Trying to override the CSS class adornedEnd or adornedStart of <Input /> generates an error "Material-UI: the key X provided to the classes prop is not implemented in ForwardRef(Input).". When I use a <FilledInput /> or <OutlinedInput /> no error is generated.
Expected Behavior 🤔
The CSS classes of <Input /> should be consistently with other input components.
Steps to Reproduce 🕹
Open this codesandbox and look at the console.
Context 🔦
I created a select using <TextField variant="filled" />. This select had a clear button as adornment and I used the CSS class to remove the padding. When I changed to the standard variation I got the error.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.9.11 |
| React | |
| Browser | |
| TypeScript | |
| etc. |
Possible fix: Add the missing pseudo-classes and update the TypeScript definitions to match the other input components.
I noticed that all input components wrap the InputBase. Should the TS definition use the InputBaseClassKey as base? Input is different from OutlinedInput.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the error in the linked CodeSandbox, then compare packages/material-ui/src/Input/Input.d.ts with OutlinedInput/OutlinedInput.d.ts and the InputBase class keys. Done means Input accepts the adornedStart and adornedEnd classes consistently without the console error, with matching TypeScript definitions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100