material-ui menu not close when dialog open

Question

i am using react + material-ui . i created dialog component in jsx file like this:

   export default class CartoviewAbout extends React.Component {
        constructor(props) {
            super(props);
            this.state = {open: false};
        }

        _handleOpen() {
            this.setState({open: true});
        };

        _handleClose() {
            this.setState({open: false});
        };

        render() {
            const actions = [
                <FlatButton
                    label="Close"
                    primary={true}
                    keyboardFocused={true}
                    onTouchTap={this._handleClose.bind(this)}
                />,
            ];

            return (
                <div>
                    <MenuItem
                        onTouchTap={this._handleOpen.bind(this)}
                        primaryText="Show About Dialog"
                    />
                    <Dialog
                        title={title}
                        actions={actions}
                        modal={false}
                        open={this.state.open}
                        onRequestClose={this._handleClose.bind(this)}
                        autoScrollBodyContent={true}
                        contentClassName="dialog"
                        bodyClassName="dialog_body"
                    >
                        <div ><p>{abstract}</p>
                        </div>
                    </Dialog>
                </div>
            );
        }
    }

and i use this component in menu in another file but then i click the menu item dialog open and menu not close:

export default class CartoviewAppBar extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
     const about = appConfig.showAbout ? React.createElement(CartoviewAbout) : "";
     const icon_menu = <IconMenu
            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
            targetOrigin={{horizontal: 'right', vertical: 'top'}}
        >
            {about}
        </IconMenu>;
        return (
            <div>
                <AppBar
                    title={''}
                    showMenuIconButton={false}
                    iconElementRight={icon_menu}
                />
            </div>
        );
    }

image: i want menu to close when dialog open

Answer 1

You'll need to add the Dialog component outside the IconMenu. The IconMenu's onRequestChange event wont fire until the dialog closes.

Answer 2

Try this may be a workaround.

 _handleOpen() {
    window.setTimeout(() => {
       this.setState({open: true});
    }, 100); //any arbitary timeout
 };

MenuItem onClick will automatically trigger for closing IconMenu

I think opening Dialog suppressing the event for closing IconMenu. So opening Dialog after closing IconMenu using setTimeout