fix: focus detached input on iOS (#653) (#1231)

---------

Co-authored-by: Haroen Viaene <[email protected]>

Author: salomvary

packages/autocomplete-js/src/__tests__/detached.test.ts

@@ -62,15 +62,16 @@ describe('detached', () => {
     // Open detached overlay
     searchButton.click();
 
-    await waitFor(() => {
-      const input = document.querySelector<HTMLInputElement>('.aa-Input')!;
+    const input = document.querySelector<HTMLInputElement>('.aa-Input')!;
 
-      expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
-      expect(document.body).toHaveClass('aa-Detached');
-      expect(input).toHaveFocus();
+    expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
+    expect(document.body).toHaveClass('aa-Detached');
 
-      fireEvent.input(input, { target: { value: 'a' } });
-    });
+    // Input should immediately be focused, to ensure the keyboard is shown on mobile
+    expect(input).toHaveFocus();
+
+    // Type a query in the focused input
+    fireEvent.input(input, { target: { value: 'a' } });
 
     // Wait for the panel to open
     await waitFor(() => {
@@ -391,16 +392,15 @@ describe('detached', () => {
     // Open detached overlay
     searchButton.click();
 
-    // Type a query in the focused input
-    await waitFor(() => {
-      const input = document.querySelector<HTMLInputElement>('.aa-Input')!;
+    const input = document.querySelector<HTMLInputElement>('.aa-Input')!;
 
-      expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
-      expect(document.body).toHaveClass('aa-Detached');
-      expect(input).toHaveFocus();
+    expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
+    expect(document.body).toHaveClass('aa-Detached');
+    // Input should immediately be focused, to ensure the keyboard is shown on mobile
+    expect(input).toHaveFocus();
 
-      fireEvent.input(input, { target: { value: 'a' } });
-    });
+    // Type a query in the focused input
+    fireEvent.input(input, { target: { value: 'a' } });
 
     // Wait for the panel to open
     await waitFor(() => {

packages/autocomplete-js/src/autocomplete.ts

@@ -375,30 +375,28 @@ export function autocomplete<TItem extends BaseItem>(
   }
 
   function setIsModalOpen(value: boolean) {
-    requestAnimationFrame(() => {
-      const prevValue = props.value.core.environment.document.body.contains(
-        dom.value.detachedOverlay
-      );
+    const prevValue = props.value.core.environment.document.body.contains(
+      dom.value.detachedOverlay
+    );
 
-      if (value === prevValue) {
-        return;
-      }
+    if (value === prevValue) {
+      return;
+    }
 
-      if (value) {
-        props.value.core.environment.document.body.appendChild(
-          dom.value.detachedOverlay
-        );
-        props.value.core.environment.document.body.classList.add('aa-Detached');
-        dom.value.input.focus();
-      } else {
-        props.value.core.environment.document.body.removeChild(
-          dom.value.detachedOverlay
-        );
-        props.value.core.environment.document.body.classList.remove(
-          'aa-Detached'
-        );
-      }
-    });
+    if (value) {
+      props.value.core.environment.document.body.appendChild(
+        dom.value.detachedOverlay
+      );
+      props.value.core.environment.document.body.classList.add('aa-Detached');
+      dom.value.input.focus();
+    } else {
+      props.value.core.environment.document.body.removeChild(
+        dom.value.detachedOverlay
+      );
+      props.value.core.environment.document.body.classList.remove(
+        'aa-Detached'
+      );
+    }
   }
 
   warn(