1

Having an issue from material UI visibility password in the microsoft edge browser checked the different ways.

Click to see the image in microsoft edge

And Followed This

https://codesandbox.io/s/inputadornments-material-demo-forked-4euh8?file=/demo.js:549-559

ALso the material ui docs of input adornment https://mui.com/components/text-fields/#InputAdornments.js

Basically we need to have only one visibility as the default material UI had provided but in microsoft edge browser we are receiving the 2 visibility eye-Icons tried to approach the different method.

I had attached the code reference

  <FormControl sx={{ m: 1, width: "25ch" }} variant="outlined">
      <InputLabel htmlFor="outlined-adornment-password">
        Password
      </InputLabel>
      <OutlinedInput
        id="outlined-adornment-password"
        type={values.showPassword ? "text" : "password"}
        value={values.password}
        onChange={handleChange("password")}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              edge="end"
            >
              {values.showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        }
        label="Passwords"
      />
    </FormControl>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
rohit
  • 27
  • 7
  • Do those other two "password" fields suffer the same issue? It's also a completely different icon. Are you sure it isn't the "native" browser adding it? What version of Edge are you currently testing with? – Drew Reese Sep 22 '21 at 07:35
  • Which version of Edge? Newer Edge are Chromium – mplungjan Sep 22 '21 at 07:36
  • @DrewReese I am using edge Version 93.0.961.52 (Official build) (64-bit) which is upto date u can also test from ur side in edge browser it's coming same – rohit Sep 22 '21 at 07:44

1 Answers1

1

If we try to see the file structure of the example, you will find the index.html file under the Public folder.

enter image description here

Open the index.html file and add the code below in the style tag.

<style>
      input::-ms-reveal,
      input::-ms-clear {
        display: none;
      }
</style>

Save the file and run the example in the MS Edge browser.

Output in the MS Edge (Version 93.0.961.52) browser.

enter image description here

You could notice that it is not showing the 2 eye icons as you have stated in the question.

You could do the same in your actual code to avoid the said issue with the MS Edge browser.

You could also place the above CSS code in the CSS files for this example. As per your requirement, you could modify it.

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • can u add inline style for this code :https://codesandbox.io/s/inputadornments-material-demo-forked-cbszk – rohit Sep 22 '21 at 11:33
  • In my suggestion, we are using the pseudo-element. Based on my search result, it looks like we can't apply styles to pseudo-elements in JavaScript. [See here](https://stackoverflow.com/a/8046436/10309381). In that case, you could keep that CSS code in the **Style** tag. – Deepak-MSFT Sep 22 '21 at 12:22