diff --git a/src/connectors/search-box/connectSearchBox.js b/src/connectors/search-box/connectSearchBox.js index f2cf70e95d..c56a1a1db5 100644 --- a/src/connectors/search-box/connectSearchBox.js +++ b/src/connectors/search-box/connectSearchBox.js @@ -64,8 +64,25 @@ const connectSearchBox = searchBoxRendering => ({ poweredBy = {}; } + const search = helper => { + let previousQuery; + + const setQueryAndSearch = (q, doSearch = true) => { + if (q !== helper.state.query) { + previousQuery = helper.state.query; + helper.setQuery(q); + } + if (doSearch && previousQuery !== undefined && previousQuery !== q) helper.search(); + }; + + return queryHook ? + q => queryHook(q, setQueryAndSearch) : + setQueryAndSearch; + }; + return { init({state, helper, onHistoryChange}) { + this._search = search(helper); searchBoxRendering({ query: state.query, containerNode, @@ -79,6 +96,7 @@ const connectSearchBox = searchBoxRendering => ({ placeholder, cssClasses, templates: defaultTemplates, + search: this._search, }, true); }, render({helper}) { @@ -95,6 +113,7 @@ const connectSearchBox = searchBoxRendering => ({ placeholder, cssClasses, templates: defaultTemplates, + search: this._search, }, false); }, }; diff --git a/src/widgets/search-box/__tests__/search-box-test.js b/src/widgets/search-box/__tests__/search-box-test.js index 6a3e3b8d8b..0c2f3534b9 100644 --- a/src/widgets/search-box/__tests__/search-box-test.js +++ b/src/widgets/search-box/__tests__/search-box-test.js @@ -412,11 +412,11 @@ describe('searchBox()', () => { }); it('updates the query', () => { - expect(helper.setQuery.calledOnce).toBe(true); + expect(helper.setQuery.callCount).toBe(1); }); it('does not search', () => { - expect(helper.search.called).toBe(false); + expect(helper.search.callCount).toBe(0); }); }); @@ -475,18 +475,40 @@ describe('searchBox()', () => { context('non-instant search', () => { beforeEach(() => { widget = searchBox({container, searchOnEnterKeyPressOnly: true}); + helper.state.query = 'tes'; + widget.init({state: helper.state, helper, onHistoryChange}); }); it('performs the search on keyup if ', () => { - simulateInputEvent('test', 'tes', widget, helper, state, container); - simulateKeyUpEvent({keyCode: 13}, widget, helper, state, container); - expect(helper.search.calledOnce).toBe(true); + // simulateInputEvent('test', 'tes', widget, helper, state, container); + // simulateKeyUpEvent({keyCode: 13}, widget, helper, state, container); + container.value = 'test'; + const e1 = new window.Event('input'); + container.dispatchEvent(e1); + + expect(helper.setQuery.callCount).toBe(1); + expect(helper.search.callCount).toBe(0); + + // setQuery is mocked and does not apply the modification of the helper + // we have to set it ourselves + helper.state.query = container.value; + + const e2 = new window.Event('keyup', {keyCode: 13}); + Object.defineProperty(e2, 'keyCode', {get: () => 13}); + container.dispatchEvent(e2); + + expect(helper.setQuery.callCount).toBe(1); + expect(helper.search.callCount).toBe(1); }); it('doesn\'t perform the search on keyup if not ', () => { - simulateKeyUpEvent({}, widget, helper, state, container); - expect(helper.setQuery.called).toBe(false); - expect(helper.search.called).toBe(false); + container.value = 'test'; + const event = new window.Event('keyup', {keyCode: 42}); + Object.defineProperty(event, 'keyCode', {get: () => 42}); + container.dispatchEvent(event); + + expect(helper.setQuery.callCount).toBe(0); + expect(helper.search.callCount).toBe(0); }); }); }); @@ -637,7 +659,8 @@ function simulateInputEvent(query, stateQuery, widget, helper, state, container) } // When - widget.init({state, helper, onHistoryChange}); + widget.init({state: helper.state, helper, onHistoryChange}); + // Then container.value = query; const event = new window.Event('input'); diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js index 66b3627cc6..5d2d96cbab 100644 --- a/src/widgets/search-box/search-box.js +++ b/src/widgets/search-box/search-box.js @@ -56,6 +56,7 @@ function defaultRendering({ placeholder, cssClasses, templates, + search, }, isFirstRendering) { if (isFirstRendering) { const INPUT_EVENT = window.addEventListener ? @@ -102,38 +103,21 @@ function defaultRendering({ input.setSelectionRange(helper.state.query.length, helper.state.query.length); } - let previousQuery; - const search = q => { - if (previousQuery !== undefined && previousQuery !== q) helper.search(); - }; - const setQuery = q => { - if (q !== helper.state.query) { - previousQuery = helper.state.query; - helper.setQuery(q); - } - }; - const setQueryAndSearch = q => { - setQuery(q); - search(q); - }; - const maybeSearch = queryHook ? q => queryHook(q, setQueryAndSearch) : search; - - // always set the query every keystrokes when there's no queryHook - if (!queryHook) { - addListener(input, INPUT_EVENT, getInputValueAndCall(setQuery)); - } - // search on enter if (searchOnEnterKeyPressOnly) { - addListener(input, 'keyup', ifKey(KEY_ENTER, getInputValueAndCall(maybeSearch))); + addListener(input, INPUT_EVENT, e => { + search(getValue(e), false); + }); + addListener(input, 'keyup', e => { + if (e.keyCode === KEY_ENTER) search(getValue(e)); + }); } else { - addListener(input, INPUT_EVENT, getInputValueAndCall(maybeSearch)); + addListener(input, INPUT_EVENT, getInputValueAndCall(search)); // handle IE8 weirdness where BACKSPACE key will not trigger an input change.. // can be removed as soon as we remove support for it if (INPUT_EVENT === 'propertychange' || window.attachEvent) { - addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(setQuery))); - addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(maybeSearch))); + addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(search))); } } } else {