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 (