diff --git a/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx b/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx index 82ba157ccb0f6d..2e6febbcc5c520 100644 --- a/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx +++ b/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx @@ -2,8 +2,10 @@ import React from 'react'; import IconMenu from 'material-ui/lib/menus/icon-menu'; import MenuItem from 'material-ui/lib/menus/menu-item'; import IconButton from 'material-ui/lib/icon-button'; +import RaisedButton from 'material-ui/lib/raised-button'; import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert'; import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list'; +import FileFileDownload from 'material-ui/lib/svg-icons/file/file-download'; export default class IconMenuExampleControlled extends React.Component { constructor(props) { @@ -27,6 +29,18 @@ export default class IconMenuExampleControlled extends React.Component { }); }; + handleOpenMenu = () => { + this.setState({ + openMenu: true, + }); + } + + handleOnRequestChange = (value) => { + this.setState({ + openMenu: value, + }); + } + render() { return (
@@ -54,6 +68,17 @@ export default class IconMenuExampleControlled extends React.Component { + } + open={this.state.openMenu} + onRequestChange={this.handleOnRequestChange} + > + + + + + +
); } diff --git a/docs/src/app/components/pages/components/IconMenu/Page.jsx b/docs/src/app/components/pages/components/IconMenu/Page.jsx index 07465f41c7aa29..112bc46d6101ac 100644 --- a/docs/src/app/components/pages/components/IconMenu/Page.jsx +++ b/docs/src/app/components/pages/components/IconMenu/Page.jsx @@ -19,7 +19,8 @@ import iconMenuExampleNestedCode from '!raw!./ExampleNested'; const descriptions = { simple: 'Simple Icon Menus demonstrating some of the layouts possible using the `anchorOrigin` and `' + 'targetOrigin` properties.', - controlled: 'Two controlled examples, the first allowing a single selection, the second multiple selections.', + controlled: 'Three controlled examples, the first allowing a single selection, the second multiple selections,' + + ' the third using internal state.', scrollable: 'The `maxHeight` property limits the height of the menu, above which it will be scrollable.', nested: 'Example of nested menus within an IconMenu.', }; diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index a799126fd2acd9..5fb65fc5083099 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -180,8 +180,11 @@ const IconMenu = React.createClass({ muiTheme: nextContext.muiTheme || this.state.muiTheme, }); - if (nextProps.open === true || nextProps.open === false) { - this.setState({open: nextProps.open}); + if (nextProps.open != null) { + this.setState({ + open: nextProps.open, + anchorEl: this.refs.iconMenuContainer, + }); } }, @@ -315,6 +318,7 @@ const IconMenu = React.createClass({ return (