fix: prevent event bubbling on cancel button click (#922)

algolia · Mar 23, 2022 · ba17ccd · ba17ccd
1 parent 83b5a31
commit ba17ccd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/packages/autocomplete-js/src/__tests__/detached.test.ts
@@ -85,4 +85,50 @@ describe('detached', () => {
       expect(document.body).not.toHaveClass('aa-Detached');
     });
   });
+
+  test('closes after cancel', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    autocomplete<{ label: string }>({
+      id: 'autocomplete',
+      detachedMediaQuery: '',
+      container,
+    });
+
+    const searchButton = container.querySelector<HTMLButtonElement>(
+      '.aa-DetachedSearchButton'
+    );
+
+    // Open detached overlay
+    searchButton.click();
+
+    await waitFor(() => {
+      expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
+      expect(document.body).toHaveClass('aa-Detached');
+    });
+
+    const cancelButton = document.querySelector<HTMLButtonElement>(
+      '.aa-DetachedCancelButton'
+    );
+
+    const bodyClickListener = jest.fn();
+    document.querySelector('body').addEventListener('click', bodyClickListener);
+
+    // Close detached overlay
+    cancelButton.click();
+
+    expect(bodyClickListener).toHaveBeenCalledTimes(0);
+
+    document
+      .querySelector('body')
+      .removeEventListener('click', bodyClickListener);
+
+    // The detached overlay should close
+    await waitFor(() => {
+      expect(
+        document.querySelector('.aa-DetachedOverlay')
+      ).not.toBeInTheDocument();
+      expect(document.body).not.toHaveClass('aa-Detached');
+    });
+  });
 });
diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -158,17 +158,19 @@ export function createAutocompleteDom<TItem extends BaseItem>({
       textContent: placeholder,
     });
     const detachedSearchButton = createDomElement('button', {
+      type: 'button',
       class: classNames.detachedSearchButton,
-      onClick(event: MouseEvent) {
-        event.preventDefault();
+      onClick() {
         setIsModalOpen(true);
       },
       children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder],
     });
     const detachedCancelButton = createDomElement('button', {
+      type: 'button',
       class: classNames.detachedCancelButton,
       textContent: translations.detachedCancelButtonText,
-      onClick() {
+      onClick(event: MouseEvent) {
+        event.stopPropagation();
         autocomplete.setIsOpen(false);
         setIsModalOpen(false);
       },