fix(ld-select): using touchend for click outside detection on mobile …

…safari
emdgroup-liquid · Jul 2, 2021 · 337e63c · 337e63c
1 parent a6e566e
commit 337e63c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 14 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -1,5 +1,5 @@
 :root {
-  --ld-select-popper-max-height: 16rem;
+  --ld-select-popper-max-height: calc(100vh - 1.25rem);
 }
 
 .ld-select {
@@ -86,13 +86,6 @@
   }
 }
 
-.ld-select--expanded {
-  z-index: 2147483647; /* Highest possible z-index */
-}
-.ld-select__popper--expanded {
-  z-index: 2147483646; /* Highest possible z-index - 1 */
-}
-
 .ld-select__popper {
   visibility: hidden;
   position: absolute;
@@ -103,8 +96,13 @@
   overflow-y: auto;
 }
 
+.ld-select--expanded {
+  z-index: 2147483647; /* Highest possible z-index */
+}
+
 .ld-select__popper--expanded {
   visibility: inherit;
+  z-index: 2147483646; /* Highest possible z-index - 1 */
 
   &:after {
     content: '';
@@ -118,9 +116,31 @@
     z-index: -1;
   }
 
+  &.tether-pinned {
+    z-index: 2147483647;
+
+    &:after {
+      height: 100%;
+    }
+
+    .ld-select__scroll-container {
+      border-radius: var(--ld-br-m);
+    }
+
+    .ld-option {
+      &:first-of-type {
+        border-top-left-radius: var(--ld-br-m);
+        border-top-right-radius: var(--ld-br-m);
+      }
+      &:last-of-type {
+        border-bottom-left-radius: var(--ld-br-m);
+        border-bottom-right-radius: var(--ld-br-m);
+      }
+    }
+  }
+
   &.tether-target-attached-bottom,
-  &.tether-pinned-top,
-  &[data-popper-placement*='bottom'] {
+  &.tether-pinned-top {
     &:after {
       bottom: 0;
     }
@@ -133,16 +153,22 @@
   }
 
   &.tether-target-attached-top,
-  &.tether-pinned-bottom,
-  &[data-popper-placement*='top'] {
+  &.tether-pinned-bottom {
     &:after {
       top: 0;
     }
 
     .ld-select__scroll-container {
-      border-bottom: solid var(--ld-col-rblck1) 1px;
       border-top-left-radius: var(--ld-br-m);
       border-top-right-radius: var(--ld-br-m);
     }
   }
+
+  &:not(.tether-pinned) {
+    &.tether-target-attached-top {
+      .ld-option:last-of-type {
+        border-bottom: solid var(--ld-col-rblck1) 1px;
+      }
+    }
+  }
 }
diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -78,7 +78,7 @@ export class LdSelect {
       constraints: [
         {
           to: 'window',
-          attachment: 'together none',
+          // attachment: 'together none', // Enables flipping on scroll.
           pin: true,
         },
       ],
@@ -116,8 +116,10 @@ export class LdSelect {
     this.expanded = !this.expanded
 
     if (this.expanded) {
+      this.popper.enable()
       this.updatePopper()
     } else {
+      this.popper.disable()
       this.triggerRef.focus()
     }
   }
@@ -370,6 +372,16 @@ export class LdSelect {
     }
   }
 
+  // Mobile Safari in some cases does not react to click events on elements
+  // which are not interactive. But it does to touch events.
+  @Listen('touchend', {
+    target: 'window',
+    passive: true,
+  })
+  handleTouchOutside(ev) {
+    this.handleClickOutside(ev)
+  }
+
   private handleTriggerClick(ev?: Event) {
     if (!this.popper) this.initPopper()