`OutlinedInput` displays notch when it shouldn't

Kind of a very specific bug and also hard to phrase it properly. But in short, OutlinedInput will have a “notch” even when it was disabled via a theme if TextInput has a prop InputLabelProps={{ shrink: true }}.

• 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 😯

OutlinedInput will display a border notch If all the following are true

• The theme has props.MuiOutlinedInput.notched set to false
• OutlinedInput is rendered by using TextField with prop variant="outlined"
• TextField also has a prop InputLabelProps={{ shrink: true }}

Expected Behavior 🤔

OutlinedInput should have no border notch, regardless of other, unrelated props.

Steps to Reproduce 🕹

1. Run the following code:

const NotchIssue = () => {
  const theme = createMuiTheme({
    props: { MuiOutlinedInput: { notched: false } }
  });

  return (
    <ThemeProvider theme={theme}>
      <TextField
        InputLabelProps={{ shrink: true }}
        label="Outlined"
        variant="outlined"
      />
    </ThemeProvider>
  );
};

1. The above example will output this:

Here is a live example in CodeSandbox https://codesandbox.io/s/material-demo-uoxz3

Context 🔦

In my current project, we’re using TextField with variant set to outlined by default, via a theme. The theme also sets notched to false, since we styled the InputLabel to fit inside the field borders.

It doesn’t really block us, since we can hide the <legend /> that causes the notch via CSS. But it did catch my attention while working with it.

Your Environment 🌎

In the demo I shared, all packages are set to latest.

Tech	Version
Material-UI	latest
React	latest
Browser	Chrome 80
TypeScript	latest

[eps1lon]

So here’s why this happens: Usually you want to display the notch when the label is shrunk, right? I hope we can agree that this would be the desired outcome for most use cases.

To guarantee this TextField sets notched to the same value as InputLabelProps.shrink. The props from the theme act as default values. Since notched is set by the TextField the default value from the theme is ignored.

Basically you’re mixing props from context (theme) with props from author and this creates undesired behavior for you.

The fix for this specific issue would be to put shrink in the theme as well

const theme = createMuiTheme({
  props: {
    MuiOutlinedInput: {
      notched: false
    },
    MuiInputLabel: {
      shrink: true
    }
  }
});
<TextField label="Outlined" variant="outlined" />;
```jsx
or both in props:
<TextField
  InputProps={{ notched: false }}
  InputLabelProps={{ shrink: true }}
  label="Outlined"
  variant="outlined"
/>

I don’t think adding documentation for this would’ve helped.

Why is it important that you set on prop by themed default values and the other one by props from author?

[eps1lon]

Great issue! Not sure why it happens but at least I have a test for it.