Why is my showPassword button still rendering in edge?

Question

im currently trying to implement a password visibility button inside my login form. However, since microsoft edge already has its own built in one, i would like to only render the button if the user is not on edge. For some reason which i cant see, the button still renders on edge. Ive tried every way i can think of to implement this and nothing seems to work.Any feedback is appreciated

import { useState } from 'react';
import {
  Tabs,
  Tab,
  Box,
  Button,
  TextField,
  Snackbar,
  IconButton,
} from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';
import useAuthContext from '../auth/useAuthContext';
import '../styles.css';
import config from '../config/index';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [cpass, setCpass] = useState(''); // state for confirm password
  const [showPassword, setShowPassword] = useState(false); // new state variable
  const {
    user, login, signing, forgotPwd, changePwd, error, confirmsignupp, resendSignUp,
  } = useAuthContext();
  const [tabIndex, setTabIndex] = useState(0); // this is for tab index to switch from login to signup
  const [stage, setStage] = useState(1); // used for password recovery form 1=email stage 2=code stage
  const [code, setCode] = useState('');
  const [upstage, setUpstage] = useState(1); // USED FOR SIGNUP VERIFICATION 1 FOR EMAIL PWD 2 FOR CODE
  const [signupcode, setSignupcode] = useState('');

  const handleTabChange = (event, newTabIndex) => {
    // it will change the index of tab to switch from login to signup
    setTabIndex(newTabIndex);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    login(email, password);
  };

  const handleresendsignup = async (event) => {
    event.preventDefault();
    resendSignUp(email);
  };

  const handleSubmitsignup = async (event) => {
    event.preventDefault();
    signing(email, password);
    setUpstage(2);
  };

  const handleconfirmsignup = async (event) => {
    event.preventDefault();
    confirmsignupp(email, signupcode);
  };
  const sendCode = async (event) => {
    event.preventDefault();
    setStage(2);
    forgotPwd(email);
  };

  const resetPassword = async (event) => {
    event.preventDefault();
    changePwd(email, code, password)
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  const signupshow = config.enableSelfSignup;

  const handleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const isEdgeBrowser = navigator.userAgent.indexOf('Edge') > -1;

  return (
    <div style={{ height: '100vh' }}>
      <Box
        display='flex'
        flexDirection='column'
        maxWidth={800}
        alignItems='center'
        justifyContent='center'
        margin='auto' // to make it to the center from left and right
        marginTop={5}
        padding={3}
        borderRadius={5}
        boxShadow='5px 5px 10px #ccc'
        sx={{
          ':hover': {
            boxShadow: '10px 10px 20px #ccc',
          },
          // backgroundColor: 'blue' ,
          height: '800px',
        }} // SX IS USED TO ADD CUSTOM CSS
      >
        <Snackbar
          open={!!error}
          autoHideDuration={5000}
          message={error}
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        />

        {/* here i have created tabs to switch between each other */}
        {/* https://codingbeautydev.com/blog/material-ui-tabs/ */}
        <Tabs value={tabIndex} onChange={handleTabChange}>
          <Tab label='Login' />
          {signupshow ? <Tab label='Signup' /> : null}
          <Tab label='Forget password?' />
        </Tabs>
        {tabIndex === 0 && ( // tab for login begin here
          <Box>
            <h1 style={{ fontSize: 50 }}>
              {user ? `User: ${user.attributes.email}` : 'Sign In'}
            </h1>
            <form onSubmit={handleSubmit}>
              <TextField
                fullWidth
                sx={{ py: 1 }}
                margin='normal'
                variant='outlined' // WHEN WE HOOVER THERE IS OUTLINE ON BOX
                // size='small'
                label='Email'
                value={email}
                autoComplete='username'
                onChange={(e) => setEmail(e.target.value)}
              />
              <TextField
                fullWidth
                sx={{ py: 1 }}
                margin='normal'
                variant='outlined'
                // size='small'
                label='Password'
                type={showPassword ? 'text' : 'password'}
                value={password}
                autoComplete='current-password'
                onChange={(e) => setPassword(e.target.value)}
                InputProps={{
                  endAdornment: (
                    (!isEdgeBrowser && (
                      <IconButton onClick={handleShowPassword}>
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    ))
                  ),
                }}
              />
              {/* <input type='submit' value='Login'/> */}
              <Button
                type='submit'
                variant='contained'
                sx={{ mt: 3, mb: 2, borderRadius: 3 }}
              >
                Login
              </Button>
            </form>
          </Box>
        )}

Answer 1

You are detecting the user agent via

const isEdgeBrowser = navigator.userAgent.indexOf('Edge') > -1;

If I try to get the user agent in my edge, I will get the following result

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.58

That means, only Edg is in user agent and you might want to find out the user agent via the following code.

const isEdgeBrowser = navigator.userAgent.indexOf('Edg') > -1;

You want to have a look at the latest user agents for edge