fix(core/checkbox): page jumps on checkbox click in scrollable ix-con…

…tent (#1527)
siemens · Oct 22, 2024 · ed67657 · ed67657
1 parent ecf02d5
commit ed67657
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 12 deletions.
diff --git a/.changeset/few-eels-smell.md b/.changeset/few-eels-smell.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/checkbox): page jumps on checkbox click in scrollable ix-content
diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
@@ -13,18 +13,11 @@
   /* Base for label styling */
   [type='checkbox']:not(:checked),
   [type='checkbox']:checked {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    max-height: 1px;
-    max-width: 1px;
-    min-height: 0px;
-    min-width: 0px;
-    overflow: hidden;
     position: absolute;
-    white-space: nowrap;
-    appearance: none;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
   }
 
   [type='checkbox']:not(:checked) + label,

diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss
@@ -24,6 +24,7 @@
     flex-grow: 1;
     overflow: auto;
     padding-right: 1.5rem;
+    position: relative;
   }
 
   .content-header.slotted {

diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx
@@ -25,7 +25,7 @@ export class Content {
   @State() isContentHeaderSlotted = false;
 
   get contentHeaderSlot() {
-    return this.hostElement.shadowRoot.querySelector(
+    return this.hostElement.shadowRoot!.querySelector(
       '.content-header slot'
     ) as HTMLSlotElement;
   }

diff --git a/packages/core/src/tests/content/basic/index.html b/packages/core/src/tests/content/basic/index.html
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-content style="height: 200px">
+      <ix-content-header slot="header" header-title="My Content Page">
+      </ix-content-header>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-content>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/content/content.e2e.ts b/packages/core/src/tests/content/content.e2e.ts
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('content', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto('content/basic');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+  regressionTest('scroll and check', async ({ page }) => {
+    await page.goto('content/scrollable');
+
+    const label = page.locator('label[for="checkbox_07"]');
+    await label.scrollIntoViewIfNeeded();
+    await label.click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...ontent.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-dark-linux.png b/...ontent.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...ntent.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-light-linux.png b/...ntent.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...ts-snapshots/content-scroll-and-check-1-chromium---theme-classic-dark-linux.png b/...ts-snapshots/content-scroll-and-check-1-chromium---theme-classic-dark-linux.png
diff --git a/...s-snapshots/content-scroll-and-check-1-chromium---theme-classic-light-linux.png b/...s-snapshots/content-scroll-and-check-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/content/scrollable/index.html b/packages/core/src/tests/content/scrollable/index.html
@@ -0,0 +1,53 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-content style="height: 200px">
+      <div class="d-flex flex-column" style="background: red; overflow-y: auto">
+        <h2>Bug repro</h2>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_01" />
+          <label for="checkbox_01">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_02" />
+          <label for="checkbox_02">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_03" />
+          <label for="checkbox_03">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_04" />
+          <label for="checkbox_04">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_05" />
+          <label for="checkbox_05">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_06" />
+          <label for="checkbox_06">Scroll down</label>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <input type="checkbox" id="checkbox_07" />
+          <label for="checkbox_07">Check me!</label>
+        </div>
+      </div>
+    </ix-content>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>