Fixed showing multiple context menus

src/JSONNode.js

@@ -30,7 +30,7 @@ export default class JSONNode extends Component {
     }
   }
 
-  renderJSONObject ({data, index, options, events}) {
+  renderJSONObject ({data, index, options, events, menu}) {
     const childCount = data.childs.length
     const contents = [
       h('div', {class: 'jsoneditor-node jsoneditor-object'}, [
@@ -47,7 +47,8 @@ export default class JSONNode extends Component {
         return h(JSONNode, {
           data: child,
           options,
-          events
+          events,
+          menu
         })
       })
 
@@ -57,7 +58,7 @@ export default class JSONNode extends Component {
     return h('li', {}, contents)
   }
 
-  renderJSONArray ({data, index, options, events}) {
+  renderJSONArray ({data, index, options, events, menu}) {
     const childCount = data.childs.length
     const contents = [
       h('div', {class: 'jsoneditor-node jsoneditor-array'}, [
@@ -75,7 +76,8 @@ export default class JSONNode extends Component {
           data: child,
           index,
           options,
-          events
+          events,
+          menu
         })
       })
 
@@ -145,11 +147,12 @@ export default class JSONNode extends Component {
   }
 
   renderContextMenuButton () {
-    const childs = this.props.data.menu ? [
-        h(ContextMenu)
-    ] : null
+    const visible = this.contextMenuVisible()
+    const childs = visible
+        ? [ h(ContextMenu) ]
+        : null
 
-    const className = `jsoneditor-button jsoneditor-contextmenu`
+    const className = `jsoneditor-button jsoneditor-contextmenu` + (visible ? ' jsoneditor-visible' : '')
     return h('div', {class: 'jsoneditor-button-container'},
         h('button', {class: className, onClick: this.handleContextMenu}, childs)
     )
@@ -159,6 +162,10 @@ export default class JSONNode extends Component {
     return Object.keys(nextProps).some(prop => this.props[prop] !== nextProps[prop])
   }
 
+  contextMenuVisible () {
+    return this.props.menu === this.props.data.path
+  }
+
   static _rootName (data, options) {
     return typeof options.name === 'string'
         ? options.name
@@ -198,7 +205,12 @@ export default class JSONNode extends Component {
   }
 
   handleContextMenu (event) {
-    this.props.events.onContextMenu(this.props.data.path, !this.props.data.menu)
+    // toggle visibility of the context menu
+    const path = this.contextMenuVisible()
+        ? null
+        : this.props.data.path
+
+    this.props.events.onContextMenu(path)
   }
 
   _openLinkIfUrl (event) {

src/Main.js

@@ -29,7 +29,7 @@ export default class Main extends Component {
         onContextMenu: this._onContextMenu.bind(this)
       },
 
-      menu: null,
+      menu: null,  // json pointer to the node having menu visible
 
       search: null
     }
@@ -80,11 +80,14 @@ export default class Main extends Component {
     })
   }
 
-  _onContextMenu(path, visible) {
-    const modelPath = Main._pathToModelPath(this.state.data, Main._parsePath(path)).concat('menu')
-
+  /**
+   * Set ContextMenu to a json pointer, or hide the context menu by passing null
+   * @param {string | null} path
+   * @private
+   */
+  _onContextMenu(path) {
     this.setState({
-      data: setIn(this.state.data, modelPath, visible)
+      menu: path || null
     })
   }
 

src/jsoneditor.css

@@ -163,7 +163,7 @@ button.jsoneditor-button.jsoneditor-contextmenu {
 
 button.jsoneditor-button.jsoneditor-contextmenu:hover,
 button.jsoneditor-button.jsoneditor-contextmenu:focus,
-button.jsoneditor-button.jsoneditor-contextmenu.jsoneditor-selected {
+button.jsoneditor-button.jsoneditor-contextmenu.jsoneditor-visible {
   background-position: -50px -50px;
 }
 

src/typedef.js

@@ -3,7 +3,6 @@
  * @typedef {{
  *   type: string,
  *   expanded: boolean?,
- *   menu: boolean?,
  *   path: string,
  *   prop: string?,
  *   value: *?,