Javascript 按tab键时，“材质ui”对话框将自动关闭

我有一个react项目，正在使用材质uiv3。我有一个应用程序栏，其中包含一个带有一些菜单项的菜单，单击菜单项，我将打开一个包含表单的对话框，现在一切似乎都很好，直到我填充第一个输入框，然后按tab键切换到另一个输入框，并且只要我按tab键，对话框就会自动关闭。 下面是相关的代码片段

header.js

<header>
            <AppBar>
                <Toolbar>
                    <Typography variant="title" color="inherit" className={classes.flex} component={Link} to='/'>
            {appName}
                    </Typography>
                    <Avatar className={classes.orangeAvatar}>
                        <Button
                            color="primary"
                            aria-owns={anchorEl ? 'simple-menu' : null}
                            aria-haspopup="true"
                            onClick={this.handleClick}
                        >
                            {user && user.username[0] || "-"}
                        </Button>
                    </Avatar>
                    <Menu
                        id="simple-menu"
                        anchorEl={anchorEl}
                        open={Boolean(anchorEl)}
                        onClose={this.handleClose}
                    >
                        <ChangePassword
                            {...this.props}
            >
                            {({ onClick }) => {
                                return (
                                    <MenuItem onClick={onClick}>
                                        Change password
                                        </MenuItem>
                                );
                            }}
                        </ChangePassword>
                        <MenuItem onClick={async e => {
                            this.handleClose(e);
                            await window.localStorage.clear();
                            client.resetStore();
                            window.location.href = "/";
                        }}
                        >
                            <InputIcon className={classes.icon} /> Logout
                            </MenuItem>
                    </Menu>
                </Toolbar>
            </AppBar>
        </header>

{appName}
{user&&user.username[0]| |“-”}
{（{onClick}）=>{
返回(
更改密码
);
}}
{
这是handleClose（e）；
wait window.localStorage.clear（）；
client.resetStore（）；
window.location.href=“/”；
}}
>
注销

ChangePassword.js

class ChangePassword extends React.PureComponent {
state = {
    open: false,
};

handleClose = () => {
    this.setState({ open: false });
};

handleOpen = () => {
    this.setState({ open: true });
};

render() {
    const { open } = this.state;
    const {
        classes,
        history,            
        negativeHandler = e => this.handleClose(),
        positiveHandler = e => null,
        postMutation = e => null,
        children
    } = this.props;
    const title = "Change password",
        content = "Change password of this user.";
    return (
        <Mutation mutation={UPDATE_USER_PASSWORD}>
            {(mutate, { loading, error, data }) => {
                return (
                    <React.Fragment>
                        {children({ onClick: this.handleOpen })}                            
                        {
                            open ? (
                                <Dialog
                                    fullScreen={false}
                                    open={open}
                                    onClose={negativeHandler}
                                    aria-labelledby={title}
                                >
                                    <Form
                                        onSubmit={e => {
                                            positiveHandler(mutate, e)
                                                .then((data) => {
                                                    if (postMutation) {
                                                        postMutation(data);
                                                        this.handleClose(e);
                                                    }
                                                    else {
                                                        history.goBack()
                                                    }
                                                })
                                        }}
                                    >
                                        <DialogTitle id={title}>{title}</DialogTitle>
                                        <DialogContent>
                                            <DialogContentText>
                                                {content}
                                            </DialogContentText>
                                            {
                                                getFormJSX(defaults)
                                            }
                                        </DialogContent>
                                        <DialogActions>
                                            {
                                                loading ? <CircularProgress className={classes.progress} /> : null
                                            }
                                            <Button onClick={negativeHandler} color="primary">Cancel</Button>
                                            <Button size="large" type="submit" disabled={loading}>Confirm</Button>
                                        </DialogActions>
                                    </Form>
                                </Dialog>
                            ) : null

                        }

                    </React.Fragment>
                );
            }}
        </Mutation>
    );
}}

export default withStyles(styles)(ChangePassword);

class ChangePassword扩展了React.PureComponent{
状态={
开：错，
};
handleClose=（）=>{
this.setState（{open:false}）；
};
handleOpen=（）=>{
this.setState（{open:true}）；
};
render（）{
const{open}=this.state；
常数{
班级，
历史
negativeHandler=e=>this.handleClose（），
positiveHandler=e=>null，
后置换=e=>null，
儿童
}=这是道具；
const title=“更改密码”，
content=“更改此用户的密码。”；
返回(
{（mutate，{loading，error，data}）=>{
返回(
{children（{onClick:this.handleOpen}）}
{
开门(
{
阳性携带者（突变，e）
。然后（（数据）=>{
if（后置换）{
突变后（数据）；
这是handleClose（e）；
}
否则{
history.goBack（）
}
})
}}
>
{title}
{content}
{
getFormJSX（默认值）
}
{
正在加载？：空
}
取消
证实
)：null
}
);
}}
);
}}
导出默认样式（样式）（更改密码）；

getFormJSX（默认值）方法基于defaults对象生成动态表单，返回值仅包含表单控件，而不包含标记本身。除此之外，在我的应用程序的其他部分中，除了或其他对话框外，所有内容都可以正常工作。此问题仅在对话框位于菜单项（菜单项位于appBar内）内时发生。请让我知道，如果我可以提供任何其他东西来支持我的问题