fix: overlapping of stepper-button and value

.changeset/little-days-wash.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix initial overlapping between value and stepper button on `ix-number-input`

packages/core/src/components/date-input/date-input.tsx

@@ -24,7 +24,10 @@ import {
 import { DateTime } from 'luxon';
 import { dropdownController } from '../dropdown/dropdown-controller';
 import { SlotEnd, SlotStart } from '../input/input.fc';
-import { adjustPaddingForStartAndEnd } from '../input/input.util';
+import {
+  adjustPaddingForStartAndEnd,
+  observeElementUntilVisible,
+} from '../input/input.util';
 import {
   ClassMutationObserver,
   HookValidationLifecycle,
@@ -172,6 +175,7 @@ export class DateInput implements IxInputFieldComponent<string> {
   private readonly inputElementRef = makeRef<HTMLInputElement>();
   private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();
   private classObserver?: ClassMutationObserver;
+  private intersectionObserver?: IntersectionObserver;
   private invalidReason?: string;
 
   updateFormInternalValue(value: string): void {
@@ -198,7 +202,10 @@ export class DateInput implements IxInputFieldComponent<string> {
   }
 
   componentDidRender(): void {
-    this.updatePaddings();
+    this.intersectionObserver = observeElementUntilVisible(
+      this.hostElement,
+      () => this.updatePaddings()
+    );
   }
 
   private updatePaddings() {
@@ -210,9 +217,8 @@ export class DateInput implements IxInputFieldComponent<string> {
   }
 
   disconnectedCallback(): void {
-    if (this.classObserver) {
-      this.classObserver.destroy();
-    }
+    this.classObserver?.destroy();
+    this.intersectionObserver?.disconnect();
   }
 
   @Watch('value')

packages/core/src/components/input/input.tsx

@@ -34,6 +34,7 @@ import {
   checkAllowedKeys,
   getAriaAttributesForInput,
   mapValidationResult,
+  observeElementUntilVisible,
   onInputBlur,
 } from './input.util';
 
@@ -171,6 +172,7 @@ export class Input implements IxInputFieldComponent<string> {
   private readonly inputRef = makeRef<HTMLInputElement>();
   private readonly slotEndRef = makeRef<HTMLDivElement>();
   private readonly slotStartRef = makeRef<HTMLDivElement>();
+  private intersectionObserver?: IntersectionObserver;
 
   private readonly inputId = `input-${inputIds++}`;
 
@@ -189,8 +191,11 @@ export class Input implements IxInputFieldComponent<string> {
     this.inputType = this.type;
   }
 
-  componentDidRender() {
-    this.updatePaddings();
+  componentDidRender(): void {
+    this.intersectionObserver = observeElementUntilVisible(
+      this.hostElement,
+      () => this.updatePaddings()
+    );
   }
 
   private updatePaddings() {
@@ -201,6 +206,10 @@ export class Input implements IxInputFieldComponent<string> {
     );
   }
 
+  disconnectedCallback(): void {
+    this.intersectionObserver?.disconnect();
+  }
+
   updateFormInternalValue(value: string) {
     this.formInternals.setFormValue(value);
     this.value = value;

packages/core/src/components/input/input.util.ts

@@ -139,6 +139,29 @@ export function adjustPaddingForStartAndEnd(
   });
 }
 
+export function observeElementUntilVisible(
+  hostElement: HTMLElement,
+  updateCallback: () => void
+): IntersectionObserver {
+  const rect = hostElement.getBoundingClientRect();
+
+  if (rect.width !== 0 && rect.height !== 0) {
+    updateCallback();
+  }
+
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        intersectionObserver.disconnect();
+        updateCallback();
+      }
+    });
+  });
+
+  intersectionObserver.observe(hostElement);
+  return intersectionObserver;
+}
+
 export function getAriaAttributesForInput(
   component: IxInputFieldComponent
 ): A11yAttributes {

packages/core/src/components/input/number-input.tsx

@@ -32,6 +32,7 @@ import {
   checkAllowedKeys,
   checkInternalValidity,
   mapValidationResult,
+  observeElementUntilVisible,
   onInputBlur,
 } from './input.util';
 
@@ -168,6 +169,7 @@ export class NumberInput implements IxInputFieldComponent<number> {
   private readonly slotEndRef = makeRef<HTMLDivElement>();
   private readonly slotStartRef = makeRef<HTMLDivElement>();
   private readonly numberInputId = `number-input-${numberInputIds++}`;
+  private intersectionObserver?: IntersectionObserver;
 
   @HookValidationLifecycle()
   updateClassMappings(result: ValidationResults) {
@@ -178,8 +180,17 @@ export class NumberInput implements IxInputFieldComponent<number> {
     this.updateFormInternalValue(this.value);
   }
 
-  componentDidRender() {
-    this.updatePaddings();
+  componentDidLoad() {
+    this.intersectionObserver = observeElementUntilVisible(
+      this.hostElement,
+      () => this.updatePaddings()
+    );
+  }
+
+  disconnectedCallback() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
   }
 
   private updatePaddings() {
@@ -260,6 +271,7 @@ export class NumberInput implements IxInputFieldComponent<number> {
               slotStartRef={this.slotStartRef}
               onSlotChange={() => this.updatePaddings()}
             ></SlotStart>
+
             <InputElement
               id={this.numberInputId}
               readonly={this.readonly}

packages/core/src/tests/date-input/basic/index.html

@@ -0,0 +1,43 @@
+<!--
+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>Date Input Test</title>
+    <style>
+      .date-input-wrapper {
+        padding: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="date-input-wrapper">
+      <h4>Default</h4>
+      <ix-date-input></ix-date-input>
+
+      <h4>Disabled</h4>
+      <ix-date-input>
+        <ix-date-input value='1970/01/01' disabled></ix-date-input>
+      </ix-date-input>
+
+      <h4>Label</h4>
+      <ix-date-input
+        label='Begin'
+        name='begin'
+        helper-text='Some helper text'
+        value='1970/01/01'
+      ></ix-date-input>
+
+    </div>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/date-input/date-input.e2e.ts

@@ -0,0 +1,34 @@
+/*
+ * 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('date-input', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto('date-input/basic');
+    await expect(page).toHaveScreenshot();
+  });
+});
+
+regressionTest.describe('hide date-input initially', () => {
+  regressionTest('show date-input again', async ({ page }) => {
+    await page.goto('date-input/dynamic');
+
+    const toggleButton = page.getByRole('button', {
+      name: 'Add Date Input',
+    });
+    await toggleButton.click();
+
+    const numberInputContainer = page.locator('#date-input-container');
+    await expect(numberInputContainer).toBeVisible();
+
+    await expect(page).toHaveScreenshot();
+  });
+});

packages/core/src/tests/date-input/dynamic/index.html

@@ -0,0 +1,44 @@
+<!--
+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>Date Input Test</title>
+    <style>
+      .date-input-wrapper {
+        padding: 1rem;
+      }
+      #date-input-container {
+        display: none;
+        margin-top: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+  <div class="date-input-wrapper">
+    <ix-button onclick="toggleVisibility()">Add Date Input</ix-button>
+    <div id="date-input-container">
+      <ix-date-input></ix-date-input>
+    </div>
+  </div>
+
+  <script>
+    function toggleVisibility() {
+      const container = document.getElementById('date-input-container');
+      const button = document.querySelector('button');
+      const isVisible = container.style.display === 'block';
+
+      container.style.display = isVisible ? 'none' : 'block';
+      button.textContent = isVisible ? 'Add Date Input' : 'Remove Date Input';
+    }
+  </script>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/input/dynamic/index.html

@@ -0,0 +1,46 @@
+<!--
+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>Input Test</title>
+  <style>
+    .input-wrapper {
+      padding: 1rem;
+    }
+    #input-container {
+      display: none;
+      margin-top: 1rem;
+    }
+  </style>
+</head>
+<body>
+<div class="input-wrapper">
+  <ix-button onclick="toggleVisibility()">Add Input</ix-button>
+  <div id="input-container">
+    <ix-input value="Lorem ipsum">
+      <ix-icon-button slot="start" icon="star" size="24"></ix-icon-button>
+    </ix-input>
+  </div>
+</div>
+
+<script>
+  function toggleVisibility() {
+    const container = document.getElementById('input-container');
+    const button = document.querySelector('button');
+    const isVisible = container.style.display === 'block';
+
+    container.style.display = isVisible ? 'none' : 'block';
+    button.textContent = isVisible ? 'Add Input' : 'Remove Input';
+  }
+</script>
+<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+</html>

packages/core/src/tests/input/input.e2e.ts

@@ -82,4 +82,18 @@ regressionTest.describe('input', () => {
     await expect(page.locator('ix-tooltip')).toBeVisible();
     await expect(page).toHaveScreenshot();
   });
+
+  regressionTest('hide input initially', async ({ page }) => {
+    await page.goto('input/dynamic');
+
+    const toggleButton = page.getByRole('button', {
+      name: 'Add Input',
+    });
+    await toggleButton.click();
+
+    const inputContainer = page.locator('#input-container');
+    await expect(inputContainer).toBeVisible();
+
+    await expect(page).toHaveScreenshot();
+  });
 });

packages/core/src/tests/number-input/dynamic/index.html

@@ -0,0 +1,44 @@
+<!--
+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>Number Input Test</title>
+    <style>
+      .number-input-wrapper {
+        padding: 1rem;
+      }
+      #number-input-container {
+        display: none;
+        margin-top: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+  <div class="number-input-wrapper">
+    <ix-button onclick="toggleVisibility()">Add Number Input</ix-button>
+    <div id="number-input-container">
+      <ix-number-input show-stepper-buttons value="0"></ix-number-input>
+    </div>
+  </div>
+
+  <script>
+    function toggleVisibility() {
+      const container = document.getElementById('number-input-container');
+      const button = document.querySelector('button');
+      const isVisible = container.style.display === 'block';
+
+      container.style.display = isVisible ? 'none' : 'block';
+      button.textContent = isVisible ? 'Add Number Input' : 'Remove Number Input';
+    }
+  </script>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>