Go to next search result on enter

src/components/TreeMode.js

@@ -328,7 +328,6 @@ export default class TreeMode extends Component {
 
   /** @private */
   handleNext = () => {
-    // TODO: implement select next search result
     const searchResults = search(this.state.data, this.state.search.text)
     if (searchResults) {
       const next = nextSearchResult(searchResults, this.state.search.active)
@@ -341,9 +340,6 @@ export default class TreeMode extends Component {
 
   /** @private */
   handlePrevious = () => {
-    // TODO: implement select previous search result
-    console.log('previous search result...')
-
     const searchResults = search(this.state.data, this.state.search.text)
     if (searchResults) {
       const previous = previousSearchResult(searchResults, this.state.search.active)

src/components/menu/Search.js

@@ -23,7 +23,11 @@ export default class Search extends Component {
 
     return h('div', {className: 'jsoneditor-search'}, [
       this.renderResultsCount(this.props.resultsCount),
-      h('div', {key: 'box', className: 'jsoneditor-search-box'}, [
+      h('form', {
+        key: 'box',
+        className: 'jsoneditor-search-box',
+        onSubmit: this.handleSubmit
+      }, [
           h('input', {
             key: 'input',
             type: 'text',
@@ -74,17 +78,33 @@ export default class Search extends Component {
     }
   }
 
+  handleSubmit = (event) => {
+    event.stopPropagation()
+    event.preventDefault()
+
+    if (this.timeout != null) {
+      // there is a pending change
+      this.debouncedOnChange()
+    }
+    else {
+      // no pending change, go to next result
+      this.props.onNext()
+    }
+  }
+
   handleChange = (event) => {
     const text = event.target.value
 
     this.setState ({ text })
 
     const delay = this.props.delay || 0
-    clearTimeout(this.timeout)
+    this.timeout = setTimeout(this.debouncedOnChange, delay)
-    this.timeout = setTimeout(this.callbackOnChange, delay)
   }
 
-  callbackOnChange = () => {
+  debouncedOnChange = () => {
+    clearTimeout(this.timeout)
+    this.timeout = null
+
     this.props.onChange(this.state.text)
   }
 

src/components/menu/Search.less

@@ -9,7 +9,7 @@ div.jsoneditor-search {
     margin-right: 5px;
   }
 
-  div.jsoneditor-search-box {
+  form.jsoneditor-search-box {
     display: inline-flex;
     position: relative;