feat(js): support overlay click to close modal

algolia · Feb 16, 2021 · f945a87 · f945a87
1 parent 33e26de
commit f945a87
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
@@ -139,7 +139,7 @@ export function autocomplete<TItem extends BaseItem>(
       dom: dom.value,
       Fragment: props.value.renderer.renderer.Fragment,
       panelContainer: isDetached.value
-        ? dom.value.detachedOverlay
+        ? dom.value.detachedContainer
         : props.value.renderer.panelContainer,
       propGetters,
       state: lastStateRef.current,
@@ -182,7 +182,7 @@ export function autocomplete<TItem extends BaseItem>(
       ? props.value.core.environment.document.body
       : props.value.renderer.panelContainer;
     const panelElement = isDetached.value
-      ? dom.value.detachedOverlay
+      ? dom.value.detachedContainer
       : dom.value.panel;
 
     if (isDetached.value && lastStateRef.current.isOpen) {
@@ -257,8 +257,8 @@ export function autocomplete<TItem extends BaseItem>(
     }
 
     function toggleModalClassname(isActive: boolean) {
-      dom.value.detachedOverlay.classList.toggle(
-        'aa-DetachedOverlay--Modal',
+      dom.value.detachedContainer.classList.toggle(
+        'aa-DetachedContainer--Modal',
         isActive
       );
     }

diff --git a/packages/autocomplete-js/src/createAutocompleteDom.ts b/packages/autocomplete-js/src/createAutocompleteDom.ts
@@ -53,8 +53,19 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     class: classNames.root,
     ...rootProps,
   });
+  const detachedContainer = createDomElement('div', {
+    class: classNames.detachedContainer,
+    onMouseDown(event: MouseEvent) {
+      event.stopPropagation();
+    },
+  });
   const detachedOverlay = createDomElement('div', {
     class: classNames.detachedOverlay,
+    children: [detachedContainer],
+    onMouseDown() {
+      document.body.removeChild(detachedOverlay);
+      onDetachedOverlayClose();
+    },
   });
 
   const labelProps = propGetters.getLabelProps({
@@ -171,15 +182,15 @@ export function createAutocompleteDom<TItem extends BaseItem>({
       children: [form, detachedCancelButton],
     });
 
-    detachedOverlay.appendChild(detachedFormContainer);
+    detachedContainer.appendChild(detachedFormContainer);
     root.appendChild(detachedSearchButton);
   } else {
     root.appendChild(form);
   }
 
   return {
     openDetachedOverlay,
-    detachedOverlay,
+    detachedContainer,
     inputWrapper,
     input,
     root,

diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -17,6 +17,7 @@ import { getHTMLElement, mergeClassNames } from './utils';
 const defaultClassNames: AutocompleteClassNames = {
   detachedCancelButton: 'aa-DetachedCancelButton',
   detachedFormContainer: 'aa-DetachedFormContainer',
+  detachedContainer: 'aa-DetachedContainer',
   detachedOverlay: 'aa-DetachedOverlay',
   detachedSearchButton: 'aa-DetachedSearchButton',
   detachedSearchButtonIcon: 'aa-DetachedSearchButtonIcon',

diff --git a/packages/autocomplete-js/src/types/AutocompleteClassNames.ts b/packages/autocomplete-js/src/types/AutocompleteClassNames.ts
@@ -1,6 +1,7 @@
 export type AutocompleteClassNames = {
   detachedCancelButton: string;
   detachedFormContainer: string;
+  detachedContainer: string;
   detachedOverlay: string;
   detachedSearchButton: string;
   detachedSearchButtonIcon: string;

diff --git a/packages/autocomplete-js/src/types/AutocompleteDom.ts b/packages/autocomplete-js/src/types/AutocompleteDom.ts
@@ -8,5 +8,5 @@ export type AutocompleteDom = {
   resetButton: HTMLButtonElement;
   loadingIndicator: HTMLDivElement;
   panel: HTMLDivElement;
-  detachedOverlay: HTMLDivElement;
+  detachedContainer: HTMLDivElement;
 };
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
@@ -495,7 +495,7 @@ body {
   }
 }
 
-.aa-DetachedOverlay {
+.aa-DetachedContainer {
   background: var(--aa-background-color);
   bottom: 0;
   display: flex;
@@ -553,7 +553,7 @@ body {
     height: 32px;
   }
 
-  &.aa-DetachedOverlay--Modal {
+  &.aa-DetachedContainer--Modal {
     border-radius: 6px;
     bottom: inherit;
     height: auto;
@@ -574,17 +574,16 @@ body {
 .aa-Detached {
   height: 100vh;
   overflow: hidden;
-  &::after {
-    background-color: var(--aa-muted-color);
-    content: '';
-    height: 100vh;
-    left: 0;
-    opacity: 0.75;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 999;
-  }
+}
+
+.aa-DetachedOverlay {
+  background-color: var(--aa-muted-color);
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
 }
 
 @media (hover: none) and (pointer: coarse) {

diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
@@ -98,6 +98,7 @@ The class names to inject in each created DOM element. It it useful to design wi
 type ClassNames = Partial<{
   detachedCancelButton: string;
   detachedFormContainer: string;
+  detachedContainer: string;
   detachedOverlay: string;
   detachedSearchButton: string;
   detachedSearchButtonIcon: string;