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

Author: alexkaduk

.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

@@ -36,14 +36,14 @@ import {
   ValidationResults,
   createClassMutationObserver,
 } from '../utils/input';
-import { makeRef } from '../utils/make-ref';
-import type { DateInputValidityState } from './date-input.types';
 import {
   closeDropdown as closeDropdownUtil,
   createValidityState,
   handleIconClick,
   openDropdown as openDropdownUtil,
 } from '../utils/input/picker-input.util';
+import { makeRef } from '../utils/make-ref';
+import type { DateInputValidityState } from './date-input.types';
 
 /**
  * @form-ready
@@ -484,7 +484,7 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
 
   render() {
     const invalidText = this.isInputInvalid
-      ? this.i18nErrorDateUnparsable
+      ? this.invalidText || this.i18nErrorDateUnparsable
       : this.invalidText;
 
     return (

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

@@ -22,6 +22,7 @@ import {
   h,
 } from '@stencil/core';
 import { DateTime } from 'luxon';
+import { IxTimePickerCustomEvent } from '../../components';
 import { SlotEnd, SlotStart } from '../input/input.fc';
 import {
   DisposableChangesAndVisibilityObservers,
@@ -36,15 +37,14 @@ import {
   ValidationResults,
   createClassMutationObserver,
 } from '../utils/input';
-import { makeRef } from '../utils/make-ref';
-import { IxTimePickerCustomEvent } from '../../components';
-import type { TimeInputValidityState } from './time-input.types';
 import {
   closeDropdown as closeDropdownUtil,
   createValidityState,
   handleIconClick,
   openDropdown as openDropdownUtil,
 } from '../utils/input/picker-input.util';
+import { makeRef } from '../utils/make-ref';
+import type { TimeInputValidityState } from './time-input.types';
 
 /**
  * @since 3.2.0
@@ -498,7 +498,7 @@ export class TimeInput implements IxInputFieldComponent<string> {
 
   render() {
     const invalidText = this.isInputInvalid
-      ? this.i18nErrorTimeUnparsable
+      ? this.invalidText || this.i18nErrorTimeUnparsable
       : this.invalidText;
 
     return (