Start with being able to set focus (WIP)

src/components/JSONNode.js

@@ -151,6 +151,7 @@ export default class JSONNode extends Component {
       const rootName = JSONNode.getRootName(data, options)
 
       return h('div', {
+        ref: 'property',
         class: 'jsoneditor-property jsoneditor-readonly',
         spellCheck: 'false',
         onBlur: this.handleChangeProperty
@@ -194,6 +195,7 @@ export default class JSONNode extends Component {
     const editable = !options.isValueEditable || options.isValueEditable(this.getPath())
     if (editable) {
       return h('div', {
+        ref: 'value',
         class: JSONNode.getValueClass(type, itsAnUrl, isEmpty, searchValue),
         contentEditable: 'true',
         spellCheck: 'false',
@@ -340,7 +342,7 @@ export default class JSONNode extends Component {
     })
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate (nextProps, nextState) {
     let prop
 
     for (prop in nextProps) {
@@ -358,6 +360,19 @@ export default class JSONNode extends Component {
     return false
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    // TODO: focus to input field
+    // if (this.props.data.focusProperty && !prevProps.data.focusProperty) {
+    //   console.log('focus property', this.getPath())
+    //   this.refs.property.focus()
+    // }
+    //
+    // if (this.props.data.focusValue && !prevProps.data.focusValue) {
+    //   console.log('focus value', this.getPath())
+    //   this.refs.value.focus()
+    // }
+  }
+
   static getRootName (data, options) {
     return typeof options.name === 'string'
         ? options.name
@@ -488,6 +503,7 @@ export default class JSONNode extends Component {
    * Get the path of this JSONNode
    * @return {Path}
    */
+  // TODO: get rid of getPath, it's not nice having a reference to the parent in the child
   getPath () {
     const path = this.props.parent
         ? this.props.parent.getPath()

src/components/TreeMode.js

@@ -6,7 +6,7 @@ import { parseJSON } from '../utils/jsonUtils'
 import { enrichSchemaError } from '../utils/schemaUtils'
 import {
     jsonToData, dataToJson, toDataPath, patchData, pathExists,
-    expand, addErrors, search, addSearchResults
+    expand, addErrors, search, addSearchResults, addFocus
 } from '../jsonData'
 import {
     duplicate, insert, append, remove,
@@ -77,7 +77,11 @@ export default class TreeMode extends Component {
     const searchResults = this.state.search.text ? search(data, this.state.search.text) : null
     if (searchResults) {
       data = addSearchResults(data, searchResults)
+
+      data = addFocus(data, searchResults[0]) // TODO: change to using focus from state
+
     }
+    console.log('render', data)
     // TODO: pass number of search results to search box in top menu
 
     return h('div', {

src/jsonData.js

@@ -544,6 +544,7 @@ export function search (data, text) {
  *
  * @param {JSONData} data
  * @param {SearchResult[]} searchResults
+ * @return {JSONData} Returns an updated copy of data
  */
 export function addSearchResults (data, searchResults) {
   let updatedData = data
@@ -554,6 +555,7 @@ export function addSearchResults (data, searchResults) {
         const dataPath = toDataPath(data, searchResult.dataPath).concat('searchValue')
         updatedData = setIn(updatedData, dataPath, true)
       }
+
       if (searchResult.property) {
         const dataPath = toDataPath(data, searchResult.dataPath).concat('searchProperty')
         updatedData = setIn(updatedData, dataPath, true)
@@ -564,6 +566,25 @@ export function addSearchResults (data, searchResults) {
   return updatedData
 }
 
+/**
+ * Merge a object describing where the focus is to the data
+ *
+ * @param {JSONData} data
+ * @param {SearchResult} focusOn
+ * @return {JSONData} Returns an updated copy of data
+ */
+export function addFocus (data, focusOn) {
+  if (focusOn.value) {
+    const dataPath = toDataPath(data, focusOn.dataPath).concat('focusValue')
+    return setIn(data, dataPath, true)
+  }
+
+  if (focusOn.property) {
+    const dataPath = toDataPath(data, focusOn.dataPath).concat('focusProperty')
+    return setIn(data, dataPath, true)
+  }
+}
+
 /**
  * Do a case insensitive search for a search text in a text
  * @param {String} text