[Autocomplete] Adding startAdornment results in extra top padding on IE11 only
See original GitHub issue- 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 🕹
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!
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (9 by maintainers)
Top GitHub Comments
“Please mind the gap between the train and the station” 🙉
London Underground would like to have a word with you
Again, thanks!