Диалоговое окно материала автоматически закрывается при нажатии клавиши табуляции

Question

У меня есть реактивный проект, и я использую material-ui v3.У меня есть appBar , который содержит меню с некоторыми menuItems , после нажатия menuItem я открываю диалог, который содержит форму, теперь все выглядит хорошо, покаЯ заполняю первое поле ввода и нажимаю 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>

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 (по умолчанию) простой генерирует динамическая форма на основе объекта по умолчанию , возвращаемое значение содержит только элементы управления формы, а не сам тег.Кроме того, все остальное нормально работает в остальных частях моего приложения, за исключением других диалогов.Эта проблема возникает только тогда, когда диалог находится внутри menuItem, который находится внутри меню, которое находится внутри appBar.Пожалуйста, дайте мне знать, если я могу предоставить что-нибудь еще, чтобы поддержать мой вопрос.