Edge浏览器中自定义密码可见按钮仍渲染的问题求助

我尝试在登录表单中实现密码可见性切换按钮，由于Microsoft Edge自带该功能，希望仅在非Edge浏览器中渲染此按钮。但目前该按钮仍会在Edge中显示，已尝试多种实现方式均无效，恳请提供解决方案。

问题根源在于Edge浏览器的User Agent检测逻辑不准确：新版Chromium内核的Edge，其User Agent字符串使用Edg（无末尾的e）标识，而非旧版的Edge，导致原检测代码无法识别新版Edge。

修复步骤： #

1. 更新浏览器检测逻辑，覆盖所有Edge版本（包括旧版、新版、移动端Edge）：

const isEdgeBrowser = /Edg\/|Edge\/|EdgA\/|Edgios\/|Edgmobile\//i.test(navigator.userAgent);

2. 优化密码输入框的type属性：在Edge浏览器中，将输入框type固定为password，避免自定义状态和Edge自带功能冲突：

type={isEdgeBrowser ? 'password' : (showPassword ? 'text' : 'password')}

修改后的完整代码片段 #

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) => {
    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);
  };

  // 更新Edge浏览器检测逻辑
  const isEdgeBrowser = /Edg\/|Edge\/|EdgA\/|Edgios\/|Edgmobile\//i.test(navigator.userAgent);

  return (
    <div style={{ height: '100vh' }}>
      <Box
        display='flex'
        flexDirection='column'
        maxWidth={800}
        alignItems='center'
        justifyContent='center'
        margin='auto'
        marginTop={5}
        padding={3}
        borderRadius={5}
        boxShadow='5px 5px 10px #ccc'
        sx={{
          ':hover': {
            boxShadow: '10px 10px 20px #ccc',
          },
          height: '800px',
        }}
      >
        <Snackbar
          open={!!error}
          autoHideDuration={5000}
          message={error}
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        />

        <Tabs value={tabIndex} onChange={handleTabChange}>
          <Tab label='Login' />
          {signupshow ? <Tab label='Signup' /> : null}
          <Tab label='Forget password?' />
        </Tabs>
        {tabIndex === 0 && (
          <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'
                label='Email'
                value={email}
                autoComplete='username'
                onChange={(e) => setEmail(e.target.value)}
              />
              <TextField
                fullWidth
                sx={{ py: 1 }}
                margin='normal'
                variant='outlined'
                label='Password'
                // 优化type属性，Edge下固定为password
                type={isEdgeBrowser ? 'password' : (showPassword ? 'text' : 'password')}
                value={password}
                autoComplete='current-password'
                onChange={(e) => setPassword(e.target.value)}
                InputProps={{
                  endAdornment: (
                    (!isEdgeBrowser && (
                      <IconButton onClick={handleShowPassword}>
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    ))
                  ),
                }}
              />
              <Button
                type='submit'
                variant='contained'
                sx={{ mt: 3, mb: 2, borderRadius: 3 }}
              >
                Login
              </Button>
            </form>
          </Box>
        )}
      </Box>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者shanemcg992