fix(js): allow body scroll when detached mode responsively disabled (#…

…1251) * fix(js): allow body scroll when detached mode responsively disabled. fixes #1250 * refactor(js): add unit test * move test --------- Co-authored-by: Haroen Viaene <[email protected]>
algolia · May 14, 2024 · 710f86b · 710f86b
1 parent e0187cd
commit 710f86b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/packages/autocomplete-js/src/__tests__/detached.test.ts
@@ -466,4 +466,38 @@ describe('detached', () => {
       ).toHaveAttribute('hidden');
     });
   });
+
+  test('removes aa-Detached when no longer matching', async () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: createMatchMedia({ matches: true }),
+    });
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    const { update } = autocomplete<{ label: string }>({
+      container,
+      detachedMediaQuery: 'something',
+    });
+
+    const searchButton = container.querySelector<HTMLButtonElement>(
+      '.aa-DetachedSearchButton'
+    )!;
+
+    // Open detached overlay
+    searchButton.click();
+
+    await waitFor(() => expect(document.body).toHaveClass('aa-Detached'));
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: createMatchMedia({ matches: false }),
+    });
+
+    // schedule a render (normally this is done by the matchMedia listener, but that's not accessible here)
+    update({ detachedMediaQuery: 'something' });
+
+    await waitFor(() => expect(document.body).not.toHaveClass('aa-Detached'));
+  });
 });
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -217,6 +217,7 @@ export function autocomplete<TItem extends BaseItem>(
     return () => {
       if (panelContainerElement.contains(panelElement)) {
         panelContainerElement.removeChild(panelElement);
+        panelContainerElement.classList.remove('aa-Detached');
       }
     };
   });