fix(detached): open keyboard on input focus

bundlesize.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "16.25 kB"
+      "maxSize": "16.5 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

packages/autocomplete-js/src/autocomplete.ts

@@ -23,7 +23,7 @@ import {
   AutocompleteState,
 } from './types';
 import { userAgents } from './userAgents';
-import { mergeDeep, setProperties } from './utils';
+import { focusAndOpenKeyboard, mergeDeep, setProperties } from './utils';
 
 export function autocomplete<TItem extends BaseItem>(
   options: AutocompleteOptions<TItem>
@@ -351,32 +351,31 @@ export function autocomplete<TItem extends BaseItem>(
   }
 
   function setIsModalOpen(value: boolean) {
-    requestAnimationFrame(() => {
-      const prevValue = props.value.core.environment.document.body.contains(
+    const prevValue = props.value.core.environment.document.body.contains(
+      dom.value.detachedOverlay
+    );
+
+    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');
 
-      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'
-        );
-        autocomplete.value.setQuery('');
-        autocomplete.value.refresh();
-      }
-    });
+      focusAndOpenKeyboard(props.value.core.environment, dom.value.input);
+    } else {
+      props.value.core.environment.document.body.removeChild(
+        dom.value.detachedOverlay
+      );
+      props.value.core.environment.document.body.classList.remove(
+        'aa-Detached'
+      );
+      autocomplete.value.setQuery('');
+      autocomplete.value.refresh();
+    }
   }
 
   return {

packages/autocomplete-js/src/utils/focusAndOpenKeyboard.ts

@@ -0,0 +1,30 @@
+import { AutocompleteEnvironment } from '@algolia/autocomplete-core';
+
+// Mobile devices don't open the keyboard when programmatically focusing inputs.
+// See https://stackoverflow.com/a/55425845
+export function focusAndOpenKeyboard(
+  environment: AutocompleteEnvironment,
+  inputElement: HTMLInputElement,
+  timeout: number = 0
+) {
+  if (inputElement) {
+    const tempInput = environment.document.createElement('input');
+    const { top, left } = inputElement.getBoundingClientRect();
+
+    tempInput.style.position = 'absolute';
+    tempInput.style.top = `${top}px`;
+    tempInput.style.left = `${left}px`;
+    tempInput.style.height = '0';
+    tempInput.style.opacity = '0';
+
+    environment.document.body.appendChild(tempInput);
+    tempInput.focus();
+
+    setTimeout(() => {
+      inputElement.focus();
+      inputElement.click();
+
+      environment.document.body.removeChild(tempInput);
+    }, timeout);
+  }
+}

packages/autocomplete-js/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './focusAndOpenKeyboard';
 export * from './getHTMLElement';
 export * from './mergeClassNames';
 export * from './mergeDeep';