[Select] Overlapping label border with the InputLabel
Open
Nobody has claimed this yet.
scope: select
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Select label overlapping border when the InputLabel has shrink property and the current value of select is ""
Expected behavior 🤔
The select label must not overlap border when the InputLabel has shrink property and the current value of select is ""
Steps to reproduce 🕹
https://codesandbox.io/s/basicselect-material-demo-forked-z9ugvp?file=/demo.tsx
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.3.1
Binaries:
Node: 16.13.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.1.2 - /usr/local/bin/npm
Browsers:
Chrome: 100.0.4896.88
Edge: Not Found
Firefox: Not Found
Safari: 15.4
npmPackages:
@emotion/react: ^11.8.1 => 11.8.1
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.69
@mui/icons-material: ^5.4.2 => 5.4.2
@mui/lab: ^5.0.0-alpha.69 => 5.0.0-alpha.69
@mui/material: ^5.4.2 => 5.4.2
@mui/private-theming: 5.4.2
@mui/styled-engine: 5.4.2
@mui/system: 5.4.2
@mui/types: 7.1.2
@mui/utils: 5.4.2
@types/react: ^17.0.39 => 17.0.39
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.5.5 => 4.5.5
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
Start by opening the linked CodeSandbox and reproducing the Select case in demo.tsx, focusing on an InputLabel with shrink enabled and an empty value. Trace how Select and InputLabel render the outlined border and label, then verify that the label no longer overlaps the border while preserving the documented behavior for non-empty values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100