Apparently google incorrectly translating a white-space char '​' to a Dutch sentence!! This messes up the layout of the InputAdornment. This issue can be reproduced in the https://material-ui.com/components/text-fields/. See below.

Although this issue is essentially caused by google translate, MUI can easily be robust against it.

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

The layout of InputAdornment gets messed up when google translate from Eng --> Dutch. See:

Expected Behavior 🤔

The layout of InputAdornment should not get messed up.

Steps to Reproduce 🕹

Steps:

1. Go to https://material-ui.com/components/text-fields/
2. Google translate the page from English to Dutch.
3. Go to the InputAdornment section.
4. You will see the Dutch sentence 'Het is een feit....' (as showed in the picture above) gets inserted into InputAdornment.

Context 🔦

After a brief investigation, I found out that InputAdornment is internally constructed from NotchedOutline. In NotchedOutline.js, there is suspicious comment/code at lines 97-99 and 127-129:

{/* Use the nominal use case of the legend, avoid rendering artefacts. */}
{/* eslint-disable-next-line react/no-danger */}
{label ? <span>{label}</span> : <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />}

I don't know the context of this code but I could imagine that this whitespace is added to claim a rendered space while hiding it visibly. If there is the case, I would propose to simply add style visibility = 'hidden' in order to achieve the same and its invisibility is also guaranteed.

Your Environment 🌎