fix(searchbox): prevent concurrent query updates from state while input is focused (#1133)

Author: dhayab

src/components/SearchBox.vue

@@ -20,6 +20,7 @@
         :reset-title="resetTitle"
         :class-names="classNames"
         v-model="currentRefinement"
+        ref="searchInput"
       >
         <template
           v-slot:loading-indicator
@@ -148,6 +149,14 @@ export default {
           this.$emit('update:modelValue', this.model);
           this.state.refine(this.model);
         }
+
+        // we return the local value if the input is focused to avoid
+        // concurrent updates when typing
+        const { searchInput } = this.$refs;
+        if (searchInput && searchInput.isFocused()) {
+          return this.localValue;
+        }
+
         return this.model || this.state.query || '';
       },
       set(val) {

src/components/SearchInput.vue

@@ -170,6 +170,9 @@ export default {
     };
   },
   methods: {
+    isFocused() {
+      return document.activeElement === this.$refs.input;
+    },
     onFormSubmit() {
       const input = this.$refs.input;
       input.blur();

src/components/__tests__/SearchBox.js

@@ -147,6 +147,21 @@ test('refine on empty string on form reset', async () => {
   expect(state.refine).toHaveBeenCalledWith('');
 });
 
+test('keep local query when out of sync and input is focused', async () => {
+  const state = { ...defaultState, refine: jest.fn() };
+  __setState(state);
+
+  const wrapper = mount(SearchBox, { attachTo: document.body });
+  const input = wrapper.find('.ais-SearchBox-input');
+  input.element.focus();
+  await input.setValue('hello');
+
+  await wrapper.setData({ state: { query: 'hel' } });
+
+  expect(input.element.value).toBe('hello');
+  expect(state.refine).toHaveBeenLastCalledWith('hello');
+});
+
 test('overriding slots', () => {
   __setState({
     ...defaultState,