diff --git a/src/components/TreeMode.js b/src/components/TreeMode.js index 22a3d8c..d38b0ce 100644 --- a/src/components/TreeMode.js +++ b/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) diff --git a/src/components/menu/Search.js b/src/components/menu/Search.js index 2ca851a..bcdff2b 100644 --- a/src/components/menu/Search.js +++ b/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.callbackOnChange, delay) + this.timeout = setTimeout(this.debouncedOnChange, delay) } - callbackOnChange = () => { + debouncedOnChange = () => { + clearTimeout(this.timeout) + this.timeout = null + this.props.onChange(this.state.text) } diff --git a/src/components/menu/Search.less b/src/components/menu/Search.less index bf7bc42..3f96413 100644 --- a/src/components/menu/Search.less +++ b/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;