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

--------- Co-authored-by: Haroen Viaene <[email protected]>
algolia · Jan 16, 2024 · 3b569b6 · 3b569b6
1 parent 186ff9b
commit 3b569b6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/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(() => {

diff --git a/packages/autocomplete-js/src/autocomplete.ts b/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(