From 744604da4b95c26ef0e9fb7ef8409578f6ad1e3d Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Mon, 18 Jul 2022 17:30:56 +0200
Subject: [PATCH 1/2] fix(searchbox): prevent concurrent query updates from
 state while input is focused

---
 src/components/SearchBox.vue          |  9 +++++++++
 src/components/SearchInput.vue        |  3 +++
 src/components/__tests__/SearchBox.js | 15 +++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index 7581525c..6373b5e5 100644
--- a/src/components/SearchBox.vue
+++ b/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) {
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 489f141b..cf66d258 100644
--- a/src/components/SearchInput.vue
+++ b/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();
diff --git a/src/components/__tests__/SearchBox.js b/src/components/__tests__/SearchBox.js
index d8124270..65c6bf49 100644
--- a/src/components/__tests__/SearchBox.js
+++ b/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);
+  const input = wrapper.find('.ais-SearchBox-input');
+  await input.trigger('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,

From 6aa78c68f9736694df794f42c172a45ab24d2454 Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Mon, 18 Jul 2022 17:50:42 +0200
Subject: [PATCH 2/2] vue 3 compat

---
 src/components/__tests__/SearchBox.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/__tests__/SearchBox.js b/src/components/__tests__/SearchBox.js
index 65c6bf49..0fd4b99b 100644
--- a/src/components/__tests__/SearchBox.js
+++ b/src/components/__tests__/SearchBox.js
@@ -151,9 +151,9 @@ 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);
+  const wrapper = mount(SearchBox, { attachTo: document.body });
   const input = wrapper.find('.ais-SearchBox-input');
-  await input.trigger('focus');
+  input.element.focus();
   await input.setValue('hello');
 
   await wrapper.setData({ state: { query: 'hel' } });