按下Tab键，材料ui对话框自动关闭

Question

我有一个React项目，正在使用 material-ui v3。我有一个 appBar ，其中包含带有一些 menuItems 的菜单，单击 menuItem 后，我将打开一个包含表单的对话框，现在所有内容直到我填写第一个输入框并按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>

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);

getFormJSX（defaults）方法简单地基于 defaults 对象生成动态表单，返回值仅包含表单控件，而不包含标签本身。除了我的应用程序其余部分（或其他对话框）以外，所有内容都可以正常形式正常运行。仅当对话框位于appBar内的菜单内的menuItem内时，才会出现此问题。请让我知道是否可以提供其他任何东西来支持我的问题。