[Input] placeholder should be displayed if InputLabel is shrinked

[Floriferous]

When composing a textfield with FormControl, InputLabel and Input. The placeholder is hidden even when shrink is set to true on InputLabel. #7821

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Composing an input like this:

<FormControl >
  <InputLabel htmlFor="my-input" shrink>
    The label
  </InputLabel>
  <Input
    id="my-input"
    placeholder="Placeholder"
  />
</FormControl>

Should display a placeholder at all times, like a regular input (except with content in it).

Current Behavior

The placeholder is only shown on focus.

Context

I am personally not a fan of material-ui's label animation, it confuses our users, and it's not clear to them that this is an input where they can type something.

Your Environment

Tech	Version
Material-UI	next

An attempt at a solution could use the suggestion by @robert-figshare. Adding this sort of css to the Input component (not sure how to apply the JSS shrink class):

input: {
  'label.shrink + $formControl &': {
    placeholder: { opacity: 0.5 }
  },
},

[oliviertassinari]

@Floriferous Thanks for posting a detail issue! I can have a look at it.

[rickAllDev]

Was just struggling with this issue and stumbled upon this discussion. I realize that the issue is closed and assume that the ability to show placeholder without input having the focus is now available? Could you please point me to some documentation on how to implement.

[GarrettJMU]

Also experiencing this issue.

[lxblvs]

All right. This has been bothering me for a few hours so I had to DIG.
The first clue that something is wrong was this shadow DOM:

Looks like even with the data-shink=false we still hide the placeholder by opacity: 0

Lines 138:141 in the Input.js seem to be the culprits as the value should be placeholderVisible instead of placeholderHidden.

A fast fix for local versions is:

inputRoot: {
        'label[data-shrink=false] + & ::-webkit-input-placeholder': {
            opacity: '0.5 !important',
        },
}

[rj-wowza]

a few years later, i had to do the following with ThemeProvider

MuiInputBase: {
  styleOverrides: {
    root: {
    // restore hidden placeholder
    formControl: {
      'label[data-shrink=false].MuiFormLabel-root ~ & ::-webkit-input-placeholder': {
        opacity: '0.5!important',
      },
    }
  }
},