[TextField] Type password - duplicate icon in Edge

[antonichandra]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I just made my login form using TextField with type password But then I found these bug in my program I thought thats my program error, but when I checked it in MUI documentation i found the same problem Link : https://mui.com/components/text-fields/

Expected behavior 🤔

expected: eye icon in left doesnt appear

Steps to reproduce 🕹

Steps:

1. Leave the eye icon opened
2. Type something

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[mnajdova]

As far as I can see it works in https://mui.com/components/text-fields/#input-adornments

[mnajdova]

Can you share the steps you did to get to that state? I can't reproduce

[socramm9]

I think this is Browser specific. If I remember correctly, this occurs on Microsoft Edge, they render their own hide password icon.

[HelpMe-Pls]

@antonichandra You can fix this by manually adding this to the <GlobalStyles>: Try it out

[Easy-Ez]

according to the edge document

By default, the password reveal button is inserted into the Shadow DOM of all HTML input elements that have the type set to "password". Starting with Microsoft Edge Version 87, users or enterprises can disable this feature globally. Web designers and developers should expect most Microsoft Edge users to have the default experience.

just like HelpMe-Pls's saying, you can add below code and remove the password reveal control

::-ms-reveal {
    display: none;
}