fix(core/time-input): Invalid input of time-input breaks the component (#2024)

Author: lzeiml

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

@@ -70,6 +70,10 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
    */
   @Prop({ reflect: true, mutable: true }) value?: string = '';
 
+  @Watch('value') watchValuePropHandler(newValue: string) {
+    this.onInput(newValue);
+  }
+
   /**
    * The earliest date that can be selected by the date input/picker.
    * If not set there will be no restriction.

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

@@ -179,3 +179,25 @@ regressionTest(
     expect(formData).toBe('2024/12/12');
   }
 );
+
+regressionTest(
+  'updating component value attribute updates validity',
+  async ({ page, mount }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+
+    const dateInput = page.locator('ix-date-input');
+    const input = page.locator('input');
+
+    await dateInput.evaluateHandle((el) => {
+      el.setAttribute('value', 'invalid-date');
+    });
+
+    await expect(input).toHaveClass(/is-invalid/);
+
+    await dateInput.evaluateHandle((el) => {
+      el.setAttribute('value', '2024/05/05');
+    });
+
+    await expect(input).not.toHaveClass(/is-invalid/);
+  }
+);

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

@@ -100,4 +100,67 @@ regressionTest.describe('time input tests', () => {
       await expect(page.locator('input')).toHaveValue('12:30:45');
     }
   );
+
+  regressionTest(
+    'closing dropdown and reopening after entering invalid time does not break component',
+    async ({ page }) => {
+      const input = page.locator('input');
+      const fieldWrapper = page.locator('ix-field-wrapper');
+      const dropdown = page.locator('ix-dropdown[data-testid="time-dropdown"]');
+      const iconButton = page.locator(
+        'ix-icon-button[data-testid="open-time-picker"]'
+      );
+
+      await input.click();
+
+      await expect(dropdown).toHaveClass(/show/);
+
+      await expect(page.locator('ix-time-picker')).toBeVisible();
+
+      await input.fill('invalid-time');
+
+      await expect(input).toHaveClass(/is-invalid/);
+      await expect(fieldWrapper).toContainText('Time is not valid');
+
+      await iconButton.click();
+
+      await expect(dropdown).not.toHaveClass(/show/);
+
+      await expect(input).toHaveClass(/is-invalid/);
+      await expect(fieldWrapper).toContainText('Time is not valid');
+
+      await iconButton.click();
+
+      await expect(dropdown).toHaveClass(/show/);
+
+      await page
+        .locator('ix-time-picker [data-element-container-id="second-30"]')
+        .click();
+
+      await page.locator('ix-time-picker ix-button').click();
+
+      await expect(input).not.toHaveClass(/is-invalid/);
+      await expect(fieldWrapper).not.toContainText('Time is not valid');
+    }
+  );
+
+  regressionTest(
+    'updating component value attribute updates validity',
+    async ({ page }) => {
+      const timeInput = page.locator('ix-time-input');
+      const input = page.locator('input');
+
+      await timeInput.evaluateHandle((el) => {
+        el.setAttribute('value', 'invalid-time');
+      });
+
+      await expect(input).toHaveClass(/is-invalid/);
+
+      await timeInput.evaluateHandle((el) => {
+        el.setAttribute('value', '09:10:11');
+      });
+
+      await expect(input).not.toHaveClass(/is-invalid/);
+    }
+  );
 });

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

@@ -71,6 +71,10 @@ export class TimeInput implements IxInputFieldComponent<string> {
    */
   @Prop({ reflect: true, mutable: true }) value: string = '';
 
+  @Watch('value') watchValuePropHandler(newValue: string) {
+    this.onInput(newValue);
+  }
+
   /**
    * Format of time string
    * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.

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

@@ -572,8 +572,11 @@ export class TimePicker {
 
       if (!dropdown.classList.contains('show')) {
         // keep picker in sync with input
-        this._time = DateTime.fromFormat(this.time, this.format);
-        this.setInitialFocusedValueAndUnit();
+        const timeFormat = DateTime.fromFormat(this.time, this.format);
+        if (timeFormat.isValid) {
+          this._time = DateTime.fromFormat(this.time, this.format);
+          this.setInitialFocusedValueAndUnit();
+        }
 
         continue;
       }