nested menu fix

mui · Nov 26, 2015 · 892e00d · 892e00d
1 parent 2a2bd56
commit 892e00d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -332,7 +332,7 @@ import MenuDivider from 'material-ui/lib/menus/menu-divider';
             <MenuItem primaryText="Double" insetChildren={true} />
             <MenuItem primaryText="Custom: 1.2" checked={true} rightIcon={<ArrowDropRight />} menuItems={[
                 <MenuItem primaryText="Show" rightIcon={<ArrowDropRight />} menuItems={[
-                  <MenuItem primaryText="Show" />,
+                  <MenuItem primaryText="Show Level 2" />,
                   <MenuItem primaryText="Grid lines" checked={true} />,
                   <MenuItem primaryText="Page breaks" insetChildren={true} />,
                   <MenuItem primaryText="Rules" checked={true} />,

diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx
@@ -61,6 +61,9 @@ const MenuItem = React.createClass({
   componentWillReceiveProps (nextProps, nextContext) {
     let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
     this.setState({muiTheme: newMuiTheme});
+    if (this.state.open && nextProps.focusState === "none") {
+      this._onRequestClose();
+    }
   },
 
   getDefaultProps() {
@@ -77,6 +80,12 @@ const MenuItem = React.createClass({
     this._applyFocusState();
   },
 
+  componentWillUnmount() {
+    if (this.state.open) {
+      this.setState({open:false});
+    }
+  },
+
   render() {
     const {
       checked,
@@ -217,6 +226,7 @@ const MenuItem = React.createClass({
   },
 
   _onTouchTap(e) {
+    e.preventDefault();
     this.setState({
       open:true,
       anchorEl:ReactDOM.findDOMNode(this),

diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx
@@ -15,7 +15,7 @@ const ThemeManager = require('../styles/theme-manager');
 const Menu = React.createClass({
 
   mixins: [
-    StylePropable, 
+    StylePropable,
     Controllable,
   ],
 
@@ -262,7 +262,6 @@ const Menu = React.createClass({
   },
 
   _cloneMenuItem(child, childIndex, styles) {
-
     let {
       desktop,
       selectedMenuItemStyle,
@@ -394,6 +393,9 @@ const Menu = React.createClass({
     let valueLink = this.getValueLink(this.props);
     let menuValue = valueLink.value;
     let itemValue = item.props.value;
+    let focusIndex = this.props.children.indexOf(item);
+
+    this._setFocusIndex(focusIndex, false);
 
     if (multiple) {
       let index = menuValue.indexOf(itemValue);

diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx
@@ -84,6 +84,12 @@ const Popover = React.createClass({
     this.setPlacement();
   },
 
+  componentWillUnmount() {
+    if (this.state.open) {
+      this.props.onRequestClose();
+    }
+  },
+
   render() {
     return <RenderToLayer
       ref="layer"
@@ -166,8 +172,8 @@ const Popover = React.createClass({
   _showInternal(anchorEl) {
     this.anchorEl = anchorEl || this.props.anchorEl;
     this.setState({open: true});
-    const popOverShowEvent = new CustomEvent('popOverOnShow', {detail: this});
-    document.dispatchEvent(popOverShowEvent);
+    //const popOverShowEvent = new CustomEvent('popOverOnShow', {detail: this});
+    //document.dispatchEvent(popOverShowEvent);
 
   },
 
@@ -179,13 +185,13 @@ const Popover = React.createClass({
       open: false,
     }, () => {
       this._animateClose();
-      const popOverHideEvent = new CustomEvent('popOverOnHide');
-      document.dispatchEvent(popOverHideEvent);
+      //const popOverHideEvent = new CustomEvent('popOverOnHide');
+      //document.dispatchEvent(popOverHideEvent);
     });
   },
 
   _animateClose() {
-    if (!this.refs.layer.getLayer()){
+    if (!this.refs.layer || !this.refs.layer.getLayer()){
       return;
     }
     let el = this.refs.layer.getLayer().children[0];
@@ -226,7 +232,8 @@ const Popover = React.createClass({
   getAnchorPosition(el) {
     if (!el)
       el = ReactDOM.findDOMNode(this);
-
+    if (!el)
+      return;
     const rect = el.getBoundingClientRect();
     const a = {
       top: rect.top,

diff --git a/src/render-to-layer.js b/src/render-to-layer.js
@@ -110,16 +110,12 @@ const RenderToLayer = React.createClass({
     Events.on(window, 'focus', this._checkClickAway);
     Events.on(document, 'mousedown', this._checkClickAway);
     Events.on(document, 'touchend', this._checkClickAway);
-    Events.on(document, 'popOverOnShow', this._preventClickAway);
-    Events.on(document, 'popOverOnHide', this._allowClickAway);
   },
 
   _unbindClickAway() {
     Events.off(window, 'focus', this._checkClickAway);
     Events.off(document, 'mousedown', this._checkClickAway);
     Events.off(document, 'touchend', this._checkClickAway);
-    Events.off(document, 'popOverOnShow', this._preventClickAway);
-    Events.off(document, 'popOverOnHide', this._allowClickAway);
   },
 });