How to use checkboxes in a nested MenuItem - checkbox

Question

I want to create a checkbox which has three nested elements inside and each of these elements shall contain a list with checkboxes. My problem is that whenever the user clicks on one of the checkboxes, it doesn't get checked, but the menu gets closed.
Also, I can't figure out how to create a scrollbar inside one of the nested lists. At least not the proper way. My workaround was to wrap a Menu with the property maxHeight around the MenuItems, but I don't think that is the proper way. I tried nearly all props I can think of (menuListStyle, listStyle, nestedListStyle, ...), but nothing worked.
Here is my code with my last tries:
import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';
const UserPermissionButton = () => (
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
menuItems={[
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
]}
/>
<MenuItem
primaryText="Access Groups"
rightIcon={<ArrowDropRight />}
style={{maxHeight: 150, overflow: 'auto'}}
menuItems={[
<MenuItem key={1} primaryText="Child 1" />,
<MenuItem key={2} primaryText="Child 2" />,
<MenuItem key={3} primaryText="Child 3" />,
<MenuItem key={4} primaryText="Child 4" />,
<MenuItem key={5} primaryText="Child 5" />,
<MenuItem key={6} primaryText="Child 6" />,
<MenuItem key={7} primaryText="Child 7" />,
<MenuItem key={8} primaryText="Child 8" />,
]}
/>
<MenuItem
primaryText="Apps"
rightIcon={<ArrowDropRight />}
menuItems={[
<Menu maxHeight={200}>
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
</Menu>
]}
/>
</IconMenu>
);
export default UserPermissionButton;
UPDATE:
The code has changed to this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';
class UserPermissionButton extends Component {
render() {
return(
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
menuItems={[
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
]}
/>
<MenuItem
primaryText="Access Groups"
rightIcon={<ArrowDropRight />}
style={{maxHeight: 150, overflow: 'auto'}}
menuItems={[
<MenuItem key={1} primaryText="Child 1" />,
<MenuItem key={2} primaryText="Child 2" />,
<MenuItem key={3} primaryText="Child 3" />,
<MenuItem key={4} primaryText="Child 4" />,
<MenuItem key={5} primaryText="Child 5" />,
<MenuItem key={6} primaryText="Child 6" />,
<MenuItem key={7} primaryText="Child 7" />,
<MenuItem key={8} primaryText="Child 8" />,
]}
/>
<MenuItem
primaryText="Apps"
rightIcon={<ArrowDropRight />}
menuItems={[
<Menu maxHeight={200}>
{this.props.products.products.map(
product => <Checkbox key={product.id} label={product.name} />
)}
</Menu>
]}
/>
</IconMenu>
);
}
}
function mapStateToProps({products}) {
return {products}
}
export default connect(mapStateToProps)(UserPermissionButton);

Answer 1

You can do this. Basically, using state, you have complete control over when to show the menuitems.
<MenuItem
onTouchTap={() => {
this.setState({ menuOpen: !this.state.menuOpen })
}}
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
/>
{this.state.menuOpen ? (
<Menu maxHeight={200}>
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
</Menu>): null}
In other words, your component will now have state as follows:
const UserPermissionButton = React.createClass({
getInitialState() {
menuOpen: false
},
render () {
<div>
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
onTouchTap={() => {
this.setState({ menuOpen: !this.state.menuOpen })
}}
/>
</IconMenu>
{this.state.openMenu ? (
<div>
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
</div>
): null}
</div>
}
});