fix(ld-select): current value not visible due to incorrect z-order

Resolves #373
emdgroup-liquid · Jul 12, 2022 · 68d1391 · 68d1391
1 parent 484c371
commit 68d1391
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 2 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -13459,6 +13459,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "104bf6c5",
+      "image": "68d6168f6fd5e2b54fdbf709d35d9774.png",
+      "userAgent": "default",
+      "desc": "ld-select z-order current selection is still visible when opened in a container with a set z-order",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "0dcb75e6",
       "image": "f6c0f245f5898586a8b8f4c3d9edf269.png",

diff --git a/screenshot/images/68d6168f6fd5e2b54fdbf709d35d9774.png b/screenshot/images/68d6168f6fd5e2b54fdbf709d35d9774.png
diff --git a/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css b/src/liquid/components/ld-select/ld-select-popper/ld-select-popper.css
@@ -5,7 +5,6 @@
 
   /* colors */
   --ld-select-popper-border-col: var(--ld-col-neutral-100);
-  --ld-select-popper-bg-col: var(--ld-col-wht);
   min-width: var(--ld-select-popper-min-width);
 }
 
@@ -49,7 +48,6 @@
   box-shadow: var(--ld-shadow-sticky);
   border-radius: var(--ld-br-m);
   pointer-events: none;
-  background-color: var(--ld-select-popper-bg-col);
   z-index: -1;
   bottom: 0;
 

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -129,6 +129,15 @@
   }
 }
 
+.ld-select--expanded {
+  .ld-tether-target-attached-bottom {
+    .ld-select__btn-trigger:not(.ld-select__btn-trigger--detached) {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+  }
+}
+
 :where(.ld-select:not(.ld-select--inline):not(.ld-select--ghost)) {
   min-width: var(--ld-select-min-width);
 }

diff --git a/src/liquid/components/ld-select/test/ld-select.e2e.ts b/src/liquid/components/ld-select/test/ld-select.e2e.ts
@@ -593,4 +593,23 @@ describe('ld-select', () => {
       expect(results).toMatchScreenshot()
     })
   })
+  describe('z-order', () => {
+    fit('current selection is still visible when opened in a container with a set z-order', async () => {
+      const page = await getPageWithContent(`
+      <div style="will-change: transform">
+        <ld-select placeholder="Pick a fruit" name="fruit">
+          <ld-option value="apple">Apple</ld-option>
+          <ld-option value="banana">Banana</ld-option>
+        </ld-select>
+      </div>`)
+      await page.keyboard.press('Tab')
+      await page.waitForChanges()
+      await page.keyboard.press('ArrowDown')
+      await page.waitForChanges()
+      await page.keyboard.press('ArrowDown')
+      await page.waitForChanges()
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+  })
 })