mui / mui/material-ui

[TextField] Missing pseudo-classes generates error when overriding <Input>

Open
#20,706 11 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

breaking change scope: text field type: bug typescript
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

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.