fix(date-input,time-input): fix invalidText property not being applied

.changeset/fix-invalidtext-property.md

@@ -0,0 +1,9 @@
+---
+'@siemens/ix': patch
+---
+
+Fix `invalidText` property not being applied to **ix-date-input** and **ix-time-input** when internal validation fails.
+
+The `invalidText` property now correctly takes precedence over the i18n error messages when both are set. Previously, the i18n message would always be shown for internal validation errors (unparsable dates/times or min/max violations), ignoring the user's custom `invalidText`.
+
+Fixes #2183.

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

@@ -35,6 +35,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
   createClassMutationObserver,
+  getValidationText,
 } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
 import type { DateInputValidityState } from './date-input.types';
@@ -483,9 +484,11 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
   }
 
   render() {
-    const invalidText = this.isInputInvalid
-      ? this.i18nErrorDateUnparsable
-      : this.invalidText;
+    const invalidText = getValidationText(
+      this.isInputInvalid,
+      this.invalidText,
+      this.i18nErrorDateUnparsable
+    );
 
     return (
       <Host

packages/core/src/components/date-input/tests/date-input.ct.ts

@@ -201,3 +201,24 @@ regressionTest(
     await expect(input).not.toHaveClass(/is-invalid/);
   }
 );
+
+regressionTest(
+  'invalidText property takes precedence over i18n error message',
+  async ({ mount, page }) => {
+    await mount(
+      `<ix-date-input value="2024/05/05" invalid-text="Custom error message"></ix-date-input>`
+    );
+
+    const dateInputElement = page.locator('ix-date-input');
+
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    await dateInputElement.locator('input').fill('invalid-date');
+    await dateInputElement.locator('input').blur();
+    await expect(
+      dateInputElement
+        .locator('ix-field-wrapper')
+        .locator('ix-typography')
+        .filter({ hasText: 'Custom error message' })
+    ).toHaveText('Custom error message');
+  }
+);

packages/core/src/components/time-input/test/time-input.ct.ts

@@ -163,4 +163,25 @@ regressionTest.describe('time input tests', () => {
       await expect(input).not.toHaveClass(/is-invalid/);
     }
   );
+
+  regressionTest(
+    'invalidText property takes precedence over i18n error message',
+    async ({ mount, page }) => {
+      await mount(
+        `<ix-time-input value="09:10:11" format="HH:mm:ss" invalid-text="Custom time error"></ix-time-input>`
+      );
+
+      const timeInputElement = page.locator('ix-time-input');
+
+      await expect(timeInputElement).toHaveClass(/hydrated/);
+      await timeInputElement.locator('input').fill('invalid-time');
+      await timeInputElement.locator('input').blur();
+      await expect(
+        timeInputElement
+          .locator('ix-field-wrapper')
+          .locator('ix-typography')
+          .filter({ hasText: 'Custom time error' })
+      ).toHaveText('Custom time error');
+    }
+  );
 });

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

@@ -35,6 +35,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
   createClassMutationObserver,
+  getValidationText,
 } from '../utils/input';
 import { makeRef } from '../utils/make-ref';
 import { IxTimePickerCustomEvent } from '../../components';
@@ -497,9 +498,11 @@ export class TimeInput implements IxInputFieldComponent<string> {
   }
 
   render() {
-    const invalidText = this.isInputInvalid
-      ? this.i18nErrorTimeUnparsable
-      : this.invalidText;
+    const invalidText = getValidationText(
+      this.isInputInvalid,
+      this.invalidText,
+      this.i18nErrorTimeUnparsable
+    );
 
     return (
       <Host

packages/core/src/components/utils/input/validation.ts

@@ -190,3 +190,14 @@ export function HookValidationLifecycle(options?: {
     };
   };
 }
+
+export function getValidationText(
+  isInputInvalid: boolean,
+  customInvalidText: string | undefined,
+  i18nFallbackText: string
+): string | undefined {
+  if (isInputInvalid) {
+    return customInvalidText ?? i18nFallbackText;
+  }
+  return customInvalidText;
+}