[Autocomplete] Adding startAdornment results in extra top padding on IE11 only

[aisamu]

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

Using a startAdornment on AutoComplete's renderInput results in an extra top padding on IE11.

We've seen it with the outlined variant, but only when we set a placeholder.(i.e. works with label).

Manually setting the TextField's notched property to false appears to "fix" it.

Here's the issue in action (the table structure mimicks the components' placement on the screenshots):

Chrome	Label	Placeholder
	Label + startAdornment	Placeholder + startAdornment
IE11	Label	Placeholder
	Label + startAdornment	Placeholder + startAdornment

Inspecting the generated DOM element shows that the <fieldset> tag has a top: -5px property which, when cleared, fixes the issue:

.PrivateNotchedOutline-root-85 {
  top: -5px;    <-----
  left: 0;
  right: 0;
  ...
}

Expected Behavior 🤔

Should be identical to the other browsers (tested on 5 others, listed below)

Steps to Reproduce 🕹

• https://codesandbox.io/s/material-demo-o3jlt

The modified Material UI autocomplete demo above should show the issue, but unfortunately codesandbox.io is currently broken on IE11 due to transpiling issues.

The gist of the demo is to create an AutoComplete with the placeholder and startAdornment params set on renderInput's TextField and visualize it on IE11:

renderInput={params => (
  <TextField
    {...params}
    placeholder="Placeholder text"
    variant="outlined"
    InputProps={{
      ...params.InputProps,
      startAdornment: <span>span</span>
    }}
    fullWidth
  />
)}

Context 🔦

We're happy MaterialUI users with IE11 users 😄

Your Environment 🌎

Tech	Version
@material-ui/core	4.7.2
@material-ui/lab	4.0.0-alpha.38
React	16.12.0
Browser	IE11 (❌ ), Chrome 79 (✅) , Firefox 72(✅), Edge 18(✅ , Edge 79(✅ ), Safari 13 (✅ )

Thanks for this great project!

[oliviertassinari]

@aisamu Did you find a solution that we could consider deploying? What's so special about the autocomplete that breaks it?

[aisamu]

I'm not sure.
Manually setting the TextField's notched property to false removes the extra padding from IE11, bringing it in line with the other browsers.
The reason I'm not confident to call that a fix is that the other browsers work without that flag set.

[oliviertassinari]

@aisamu We very likely have a solution in #17680 (comment). Could you confirm?

[aisamu]

@oliviertassinari Yup, but I'm unsure how to test that locally.

yarn add https://github.com/eps1lon/material-ui.git#7d61d14hangs at "resolving packages..." , so I cloned the repo and added links for the relevant packages, per yarn's documentation

yarn add link:../material-ui/packages/material-ui
yarn add link:../material-ui/packages/material-ui-icons
yarn add link:../material-ui/packages/material-ui-lab

That apparently works, and package.json seems to be correctly populated:

    "@material-ui/core": "link:../material-ui/packages/material-ui",
    "@material-ui/icons": "link:../material-ui/packages/material-ui-icons",
    "@material-ui/lab": "link:../material-ui/packages/material-ui-lab",

Unfortunately, the build fails to resolve things properly, emitting errors like this:

looking for modules in /projects/my-project/node_modules
  using description file: /projects/my-project/package.json (relative path: ./node_modules)
    using description file: /projects/my-project/node_modules/@material-ui/core/package.json (relative path: ./Typography)
      no extension
        resolved symlink to /projects/material-ui/packages/material-ui/Typography
          using description file: /projects/material-ui/packages/material-ui/package.json (relative path: ./Typography)
            no extension
              /projects/material-ui/packages/material-ui/Typography doesn't exist
            .wasm
              /projects/material-ui/packages/material-ui/Typography.wasm doesn't exist
            .mjs
              /projects/material-ui/packages/material-ui/Typography.mjs doesn't exist
            .js
              /projects/material-ui/packages/material-ui/Typography.js doesn't exist
...

There is a Typography.js, but on /projects/material-ui/packages/material-ui/ src/Typography/ Typography.js"

I'm not sure if that's related to the way material-ui packages things separately on the mono-repo or if it's due to our own webpack setup.

Using fully resolved links on package.json yielded the same results
(as in "@material-ui/core": "link:/projects/material-ui/packages/material-ui")

[oliviertassinari]

@aisamu You could open your node_modules and apply the patch. I have never seen yarn link really work here.

[aisamu]

@aisamu We very likely have a solution[...]. Could you confirm?

The height is now correct (IE11 now matches Chrome/FF/Safari), but it looks like there's a small visual regression when placeholders are used instead of labels (on all browsers), in the form of a discontinuity on the outline:

Chrome
IE11

[oliviertassinari]

Don't worry about the gap, it's another issue and being taken care of.

[aisamu]

Don't worry about the gap

London Underground would like to have a word with you

it's another issue and being taken care of.

Again, thanks!

[oliviertassinari]

"Please mind the gap between the train and the station" 🙉