Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] Overlapping label border with the InputLabel

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

rodrigovalladescommented, Sep 27, 2022

The weird thing about this bug is that is only happens when the value is an empty string.

Take that original post codesandbox as an example: https://codesandbox.io/s/basicselect-material-demo-forked-z9ugvp?file=/demo.tsx

Change line 9 to:

const [age, setAge] = React.useState(" ");

And it works as expected 🤔

1reaction

davidgarciabcommented, Jun 23, 2022

@XAHTC As a workaround, you can add the prop notched into the Select and solve the problem.

Top Results From Across the Web

Material-UI TextField Outline Label is overlapping with border ...

Click the "Confirmation Code" TextField . Notice the border has rendered incorrectly and is causing the label to overlap with the border. For ......

Textfield label overlapping issue - code helper

When you click the button below, the same form will be displayed. Note the textfield's label/title - The border will still visible behind...

[Solved]-React Material UI Label Overlaps with Text-Reactjs

<InputLabel shrink={true}>Select A Role</InputLabel>. InputLabelProps gave error in functional component in react. Manohar Reddy Poreddy 21115. score:0.

inputlabelprops= shrink true | The AI Search Engine You Control

React Material UI Label Overlaps with Text ... The theme also sets notched to false, since we styled the InputLabel to fit inside...

Select API - Material UI - MUI

Name Type Default autoWidth bool false children node classes object