react-hooks - 对于仅在 Firefox 浏览器中从 react-material-ui-form-validator 使用的第一个错误 TextValidator 字段，页面锚定无法正常工作

Question

我正在开发一个 React 项目，并且我正在使用 TextValidators 作为输入字段。当我提交表单时，锚定不会正确 转到Firefox 浏览器中的第一个错误输入字段（TextValidator）（意味着错误字段未完全显示）。它在 Chrome 和 Safari 浏览器中运行良好。我正在使用document.getElementById(validationErrors[index].props.id).focus(); 用于第一个错误输入字段中的焦点。这背后有什么原因吗？

代码：

import React from 'react';
import { Button, Typography } from '@material-ui/core';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';

const Textfields = () => {

const [value, setValue] = React.useState({
    name: '',
    email: '',
    phone: '',
    address: ''
});

const handleSubmit = (e) => {
    e.preventDefault();

};

ValidatorForm.addValidationRule('required', (value) => {
    if (value) {

        return true;

    }

    else if (value === null) {
        return true;
    }
    else {
        return false;
    }

});

const handleErrors = (errors) => {

    let validationErrors = errors;
    console.log(validationErrors)
    for (let index = 0; index < validationErrors.length; index++) {
        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "name") {
                document.getElementById(validationErrors[index].props.id).focus();
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "email") {
                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "phone") {

                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "address") {
                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }
    }


};

return (
    <div>
        <Typography variant="h5">Validations</Typography>
        <div>
            <ValidatorForm
                // ref="form"
                onSubmit={handleSubmit}
                onError={handleErrors}
            >
                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                    key={1}
                        label="Name"
                        value={value.name}
                        onChange={(e) => setValue({ ...value, name: e.target.value })}
                        // name="name"
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                        id="name"
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="Email"
                        onChange={(e) => setValue({ ...value, email: e.target.value })}
                        name="email"
                        id="email"
                        value={value.email}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="Phone"
                        onChange={(e) => setValue({ ...value, phone: e.target.value })}
                        name="phone"
                        id="phone"
                        value={value.phone}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="address"
                        onChange={(e) => setValue({ ...value, address: e.target.value })}
                        name="address"
                        id="address"
                        value={value.address}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>
                <div>
                    <Button type="submit" style={{ marginTop: '20px', marginBottom: '20px' }}>Submit</Button>
                </div>
            </ValidatorForm>
        </div >
    </div>
)
 }

 export default Textfields

沙盒链接：https ://codesandbox.io/s/basiccard-material-demo-forked-rswoi?file=/demo.js