Fix expand button losing focus when clicking it. Add missing `key` here and there

src/jsoneditor/components/JSONNode.js

@@ -523,16 +523,19 @@ export default class JSONNode extends PureComponent {
     const expanded = this.props.eson[EXPANDED]
     const className = `jsoneditor-button jsoneditor-${expanded ? 'expanded' : 'collapsed'}`
 
-    // unique key depending on expanded state is to force the fontawesome icon to update
+
-    return h('div', {key: expanded, className: 'jsoneditor-button-container'},
+    return h('div', {key: 'expand', className: 'jsoneditor-button-container'},
         h('button', {
           className: className,
           onClick: this.handleExpand,
           title:
             'Click to expand/collapse this field. \n' +
             'Ctrl+Click to expand/collapse including all childs.'
+        }, h('span', {
+          key: expanded, // to force the fontawesome icon to update
         }, h('i', {
-          className: expanded ? 'fa fa-caret-down' : 'fa fa-caret-right'}))
+          className: expanded ? 'fa fa-caret-down' : 'fa fa-caret-right'
+        })))
     )
   }
 

src/jsoneditor/components/TreeMode.js

@@ -272,6 +272,8 @@ export default class TreeMode extends PureComponent {
 
   renderMenu () {
     return h(TreeModeMenu, {
+      key: 'menu',
+
       mode: this.props.mode,
       modes: this.props.modes,
       onChangeMode: this.props.onChangeMode,
@@ -292,6 +294,8 @@ export default class TreeMode extends PureComponent {
     }
 
     return h(Search, {
+      key: 'search',
+
       text: this.state.searchResult.text,
       resultCount: this.state.searchResult.matches
           ? this.state.searchResult.matches.length : 0,

src/jsoneditor/components/menu/Search.js

@@ -25,15 +25,15 @@ export default class Search extends Component {
   }
 
   render () {
-    return h('div', {className: 'jsoneditor-search'}, [
+    return h('div', {className: 'jsoneditor-search'},
-      h('form', {
+        h('form', {
-        key: 'box',
+          key: 'box',
-        className: 'jsoneditor-search-box',
+          className: 'jsoneditor-search-box',
-        onSubmit: this.handleSubmit
+          onSubmit: this.handleSubmit
-      }, [
+        }, [
-          h('div', { className: 'jsoneditor-search-icon' }, [
+          h('div', { className: 'jsoneditor-search-icon', key: 'icon' },
-            h('i', {className: 'fa fa-search'})
+              h('i', {className: 'fa fa-search'})
-          ]),
+          ),
           h('input', {
             key: 'input',
             type: 'text',
@@ -63,9 +63,9 @@ export default class Search extends Component {
             title: 'Close search',
             onClick: this.props.onClose
           }, h('i', {className: 'fa fa-times'})),
-      ]),
+        ]),
-      // this.renderResultsCount(this.props.resultCount) // FIXME: show result count
+        // this.renderResultsCount(this.props.resultCount) // FIXME: show result count
-    ])
+    )
   }
 
   renderResultsCount (resultCount) {

src/jsoneditor/components/menu/TreeModeMenu.js

@@ -56,7 +56,7 @@ export default class TreeModeMenu extends PureComponent {
     // mode
     if (this.props.modes ) {
       items = items.concat([
-        h('div', {className: 'jsoneditor-menu-group'}, [
+        h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
           h(ModeButton, {
             key: 'mode',
             modes: this.props.modes,
@@ -70,7 +70,7 @@ export default class TreeModeMenu extends PureComponent {
 
     // cut / copy / paste
     items = items.concat([
-      h('div', {className: 'jsoneditor-menu-group'}, [
+      h('div', {className: 'jsoneditor-menu-group', key: 'cut-copy-paste'}, [
         h('button', {
           key: 'cut',
           className: 'jsoneditor-cut',
@@ -97,7 +97,7 @@ export default class TreeModeMenu extends PureComponent {
 
     // TODO: [insert structure / insert value / insert array / insert object] / duplicate / remove
     items = items.concat([
-      h('div', {className: 'jsoneditor-menu-group'}, [
+      h('div', {className: 'jsoneditor-menu-group', key: 'insert-duplicate-remove'}, [
         h('button', {
           key: 'insert',
           className: 'jsoneditor-insert',
@@ -123,7 +123,7 @@ export default class TreeModeMenu extends PureComponent {
 
     // sort / transform
     items = items.concat([
-      h('div', {className: 'jsoneditor-menu-group'}, [
+      h('div', {className: 'jsoneditor-menu-group', key: 'sort-transform'}, [
         h('button', {
           key: 'sort',
           className: 'jsoneditor-sort',
@@ -149,7 +149,7 @@ export default class TreeModeMenu extends PureComponent {
     // undo / redo
     if (this.props.mode !== 'view' && this.props.enableHistory !== false) {
       items = items.concat([
-        h('div', {className: 'jsoneditor-menu-group'}, [
+        h('div', {className: 'jsoneditor-menu-group', key: 'undo-redo'}, [
           h('button', {
             key: 'undo',
             className: 'jsoneditor-undo',