diff --git a/.changeset/fix-invalidtext-property.md b/.changeset/fix-invalidtext-property.md new file mode 100644 index 00000000000..63efcd6df3d --- /dev/null +++ b/.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. diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx index 64e2245919c..fc46c3d8ed5 100644 --- a/packages/core/src/components/date-input/date-input.tsx +++ b/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 { } render() { - const invalidText = this.isInputInvalid - ? this.i18nErrorDateUnparsable - : this.invalidText; + const invalidText = getValidationText( + this.isInputInvalid, + this.invalidText, + this.i18nErrorDateUnparsable + ); return ( { + await mount( + `` + ); + + 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'); + } +); diff --git a/packages/core/src/components/time-input/test/time-input.ct.ts b/packages/core/src/components/time-input/test/time-input.ct.ts index fd1d1713d8d..9a4444315b4 100644 --- a/packages/core/src/components/time-input/test/time-input.ct.ts +++ b/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( + `` + ); + + 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'); + } + ); }); diff --git a/packages/core/src/components/time-input/time-input.tsx b/packages/core/src/components/time-input/time-input.tsx index 1428df2ce12..84d2c598e16 100644 --- a/packages/core/src/components/time-input/time-input.tsx +++ b/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 { } render() { - const invalidText = this.isInputInvalid - ? this.i18nErrorTimeUnparsable - : this.invalidText; + const invalidText = getValidationText( + this.isInputInvalid, + this.invalidText, + this.i18nErrorTimeUnparsable + ); return (