[Textfield] Border lines of Textfield cross over the text label shrinked by MuiInputLabel

[oruharo]

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

Current Behavior 😯

Borders of Textfield component cross over the shrinked text label.

Expected Behavior 🤔

Border lines overlapping with the shrinked text label are hidden.

Steps to Reproduce 🕹

https://codesandbox.io/s/elegant-leakey-zsflw?file=/src/App.tsx

source code

import {
  createTheme,
  Stack,
  TextField,
  ThemeProvider
} from "@material-ui/core";
import React from "react";

const theme = createTheme({
  components: {
    MuiInputLabel: {
      defaultProps: { shrink: true }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack sx={{ m: 5 }} spacing={2}>
        {/*NG*/}
        <TextField label="Abcdefghi" />
        {/*OK*/}
        <TextField label="Abcdefghi" InputLabelProps={{ shrink: true }} />
      </Stack>
    </ThemeProvider>
  );
}

export default App;

Steps:

1. shrink: true is specified in theme.
2. InputLabelProps = {{shrink: true}} is not specified in TextField.

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

my browser: Google Chrome 90.0.4430.212（Official Build）（x86_64）
my pc: macOS Big Sur ver 11.2.2

npx @material-ui/envinfo

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: ^5.0.0-alpha.35 => 5.0.0-alpha.35 
    @material-ui/icons: ^5.0.0-alpha.35 => 5.0.0-alpha.35 
    @material-ui/private-theming:  5.0.0-alpha.35 
    @material-ui/styled-engine:  5.0.0-alpha.34 
    @material-ui/system:  5.0.0-alpha.35 
    @material-ui/types:  6.0.1 
    @material-ui/unstyled:  5.0.0-alpha.35 
    @material-ui/utils:  5.0.0-alpha.35 
    @types/react: ^17.0.8 => 17.0.9 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.1.2 => 4.3.2 

[eps1lon]

Pretty sure this is a general problem when we reach into *Props but ignore theme default props.

[siriwatknp]

@oruharo This is not a bug. You need to add notched: true to OutlinedInput also.

const theme = createTheme({
  components: {
    MuiInputLabel: {
      defaultProps: { shrink: true }
    },
    MuiOutlinedInput: {
      defaultProps: {
        notched: true
      }
    }
  }
});

TextField has variant: "outlined" by default which use OutlinedInput.

https://codesandbox.io/s/magical-https-c4sh1?file=/src/App.tsx

[eps1lon]

@oruharo This is not a bug.

I would consider this a bug considering TextField label="Abcdefghi" InputLabelProps={{ shrink: true }} /> works just fine without notched.

[siriwatknp]

@oruharo This is not a bug.

I would consider this a bug considering TextField label="Abcdefghi" InputLabelProps={{ shrink: true }} /> works just fine without notched.

Then, the fix can be something like this?

diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
index 797cfeab02..e550c33b8d 100644
--- a/packages/material-ui/src/TextField/TextField.js
+++ b/packages/material-ui/src/TextField/TextField.js
@@ -70,6 +70,11 @@ const TextFieldRoot = styled(FormControl, {
  */
 const TextField = React.forwardRef(function TextField(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiTextField' });
+  const defaultInputLabelProps = useThemeProps({
+    props: { shrink: inProps.shrink },
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    name: 'MuiInputLabel',
+  });
   const {
     autoComplete,
     autoFocus = false,
@@ -135,6 +140,9 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
       InputMore.notched = InputLabelProps.shrink;
     }
+    if (defaultInputLabelProps.shrink) {
+      InputMore.notched = defaultInputLabelProps.shrink;
+    }
     if (label) {
       const displayRequired = InputLabelProps?.required ?? required;
       InputMore.label = (

[eps1lon]

Then, the fix can be something like this?

Yes, as a very naive version. There are a couple of things we should include:

• no eslint-disable
• prevent these mistakes in the first place
• make sure the behavior is consistent i.e. InputLabelProps.shrink should only be read from a single source.

[RobTF]

There is a bug;

If I run my app with no theme overrides, text fields look like this

If I put the following into my theme setup;

    components: {
        MuiFormLabel: {
            styleOverrides: {
                root: {
                    fontSize: 16,
                },
            },
        },
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: 12,
                },
            },
        },
    },

It looks like this;

Something, somewhere is not taking into account of the overridden font sizes.

[bsor-dev]

@RobTF did you manage to find solution to this?

[asuri0n]

Same issue here, how do you fix this ?