fix(searchBox): do not update the input when focused

When we have an external update:
- search.helper.setQuery
- debounce option used on searchBox (resulting in an "external"
update: search happens after some time)

Then if the input is focused (user typing), we should not try to
update it. It will always result in a bad behavior.

Thus, it means we do not handle use cases like "When the user is
focused, I want to programmatically update is query". If you want to
do that, you would have to blur the input, update, focus.

But that's an edge case and bad UX I believe.

fixes #944

Author: vvo

dev/app.js

@@ -349,4 +349,3 @@ search.once('render', function() {
 });
 
 search.start();
-

src/widgets/search-box/__tests__/search-box-test.js

@@ -357,10 +357,21 @@ describe('searchBox()', () => {
     container.value = 'initial';
     widget = searchBox({container});
     widget.init({state, helper, onHistoryChange});
+    container.blur();
     widget.render({helper: {state: {query: 'new value'}}});
     expect(container.value).toBe('new value');
   });
 
+  it('does not update the input value when focused', () => {
+    container = document.body.appendChild(document.createElement('input'));
+    container.value = 'initial';
+    container.focus();
+    widget = searchBox({container});
+    widget.init({state, helper, onHistoryChange});
+    widget.render({helper: {state: {query: 'new value'}}});
+    expect(container.value).toBe('initial');
+  });
+
   context('autofocus', () => {
     beforeEach(() => {
       container = document.body.appendChild(document.createElement('input'));
@@ -440,4 +451,3 @@ describe('searchBox()', () => {
     });
   });
 });
-

src/widgets/search-box/search-box.js

@@ -197,6 +197,11 @@ function searchBox({
     render({helper}) {
       // updating the query from the outside using the helper
       // will fall in this case
+      // If the input is focused, we do not update it.
+      if (document.activeElement === this._input) {
+        return;
+      }
+
       if (helper.state.query !== this._input.value) {
         this._input.value = helper.state.query;
       }