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>
);
}
You'll need to add the Dialog component outside the IconMenu. The IconMenu's onRequestChange event wont fire until the dialog closes.
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