Skip to content

feat(core/time-input): time input validation improvements#2629

Draft
RamVinayMandal wants to merge 10 commits into
siemens:mainfrom
RamVinayMandal:fix-ix-3322-time-input-validation-improvements
Draft

feat(core/time-input): time input validation improvements#2629
RamVinayMandal wants to merge 10 commits into
siemens:mainfrom
RamVinayMandal:fix-ix-3322-time-input-validation-improvements

Conversation

@RamVinayMandal

@RamVinayMandal RamVinayMandal commented Jun 29, 2026

Copy link
Copy Markdown
Collaborator

💡 What is the current behavior?

  • Non-required ix-time-input shows as invalid when cleared, even though empty should be valid
  • Required ix-time-input doesn't consistently show as invalid when the value is removed
  • novalidate forms still display visual validation feedback despite opting out of validation
  • Validation state doesn't update immediately when toggling the required attribute

JIRA: IX-2595 IX-3322

🆕 What is the new behavior?

Validation Fixes

  • Non-required, empty value: Now correctly validates as valid (no is-invalid class)
  • Required, empty value: Shows required-missing error only after user interaction (blur) or reportValidity()
  • novalidate forms: Suppress all visual validation feedback; reportValidity() overrides this suppression
  • Dynamic required attribute: Validation state updates immediately when toggling
  • Form submission is now prevented when the field is invalid or required but empty; submission proceeds only when the field is valid (form-associated component with ElementInternals validation).

New APIs

  • Added clear() method to clear value and validation state (removes touched flag and error classes)
  • Added reportValidity() method to trigger validation and show errors immediately
  • Added i18nErrorRequired prop to customize the required-field error message

Validation Behavior

  • Internal validation runs for all value sources (keyboard, programmatic, calendar picker)
  • Visual errors appear only after first user interaction; programmatic changes validate internally without visual feedback
  • novalidate suppression is overridden by reportValidity() to show errors

Additional Improvements

  • Clicking and holding time on picker does not trigger validation errors on required empty fields; removed momentary red-border flash when selecting a time

Note: The clear(), reportValidity() methods and i18nErrorRequired prop on ix-time-input is tagged with @since 5.1.0. Please verify this matches the actual target release version and we need to update the JSDoc tag if needed before merging.

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

  • 🦮 Accessibility (a11y) features were implemented
  • 🗺️ Internationalization (i18n) - no hard coded strings
  • 📲 Responsiveness - components handle viewport changes and content overflow gracefully
  • 📕 Add or update a Storybook story
  • 📄 Documentation was reviewed/updated siemens/ix-docs
  • 🧪 Unit tests were added/updated and pass (pnpm test)
  • 📸 Visual regression tests were added/updated and pass (Guide)
  • 🧐 Static code analysis passes (pnpm lint)
  • 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

Summary by CodeRabbit

  • New Features

    • Added clearer time-field validation controls, including a reset action, immediate validity reporting, and a customizable required-field error message.
    • Improved keyboard and picker behavior so focus and validation feedback behave more consistently during interaction.
  • Bug Fixes

    • Fixed required and non-required time inputs to validate correctly when cleared, blurred, or updated programmatically.
    • Prevented premature or flashing error states, and ensured form submission is blocked only when the field is truly invalid.

- Added support for custom error messages for required fields via `i18nErrorRequired` property.
- Implemented `reportValidity` method to trigger immediate visual validation.
- Introduced `clear` method to reset input value and validation state.
- Enhanced internal validation logic to handle required fields and invalid inputs more effectively.
- Updated tests to cover new validation scenarios and ensure accessibility compliance.
- Improved handling of focus events to manage dropdown visibility and input focus in keyboard mode.
@netlify

netlify Bot commented Jun 29, 2026

Copy link
Copy Markdown

Deploy Preview for ix-storybook ready!

Name Link
🔨 Latest commit 522c06c
🔍 Latest deploy log https://app.netlify.com/projects/ix-storybook/deploys/6a453c906c5cad0008648af1
😎 Deploy Preview https://deploy-preview-2629--ix-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@changeset-bot

changeset-bot Bot commented Jun 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 522c06c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@siemens/ix Minor
@siemens/ix-angular Minor
@siemens/ix-docs Minor
@siemens/ix-react Minor
@siemens/ix-vue Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e0a39082-9a9d-47ff-89c0-99acc2f8fa1b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request enhances the validation behavior of the ix-time-input component by adding clear() and reportValidity() methods, introducing the i18nErrorRequired property, and adding comprehensive Playwright component tests. Feedback on the changes suggests refining generic validation utilities (reportFieldValidity and syncCustomInputValidity) to explicitly check for null, undefined, or empty strings instead of using simple falsy checks, which could cause issues with valid falsy values. Additionally, it is recommended to remove a redundant lowercase readonly attribute from the input element and to eliminate hardcoded page.waitForTimeout delays in the tests in favor of Playwright's built-in auto-retrying assertions.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread packages/core/src/components/utils/input/validation.ts Outdated
Comment thread packages/core/src/components/utils/input/picker-input.util.ts Outdated
Comment thread packages/core/src/components/time-input/time-input.tsx Outdated
Comment thread packages/core/src/components/time-input/test/time-input.ct.ts Outdated
Comment thread packages/core/src/components/time-input/test/time-input.ct.ts Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/angular/src/components.ts`:
- Around line 2660-2668: This Angular proxy is auto-generated, so do not edit
the `inputs` or `methods` metadata in `components.ts` directly. Make the
underlying change in the Stencil output-target generation source that produces
the `ix-time-input` proxy, then regenerate the Angular wrappers so the
`inputs`/`methods` lists stay in sync with the generator.

In `@packages/core/src/components/input/input.util.ts`:
- Around line 387-390: The cleanup order in the input reset flow is wrong
because additionalCleanup runs while comp.value still holds the old selection.
Update the reset logic in input.util so comp.value is assigned to emptyValue
before invoking options?.additionalCleanup?.(), and keep
comp.updateFormInternalValue?.(emptyValue) aligned with that cleared state. This
will ensure callers like time-input’s syncPickerTimeFromValue() observe the
cleared value instead of the stale pre-clear one.

In `@packages/core/src/components/time-input/test/time-input.ct.ts`:
- Around line 924-960: The current regression test only verifies the default
required message, so add an additional coverage path in the time input test
suite that sets the public i18nErrorRequired API on ix-time-input and asserts
the custom required text appears after emptying the field. Reuse the existing
reportValidity() and invalid-state flow in time-input.ct.ts, and verify both the
visible ix-typography message and the required invalid class behavior for the
custom message case.
- Around line 12-16: The expectNoVisualValidation helper only checks CSS
classes, so it can miss a visible validation message. Update
expectNoVisualValidation in time-input.ct.ts to also assert the error
copy/validation text stays hidden, alongside the existing class checks. Use the
shared time input locators/assertions already present in the time-input tests so
all callers of expectNoVisualValidation cover the full “no visual validation”
contract.

In `@packages/core/src/components/time-input/time-input.tsx`:
- Around line 464-474: The reportValidity() JSDoc in time-input.tsx has a broken
sentence because a blank line splits “independently” from “of user interaction,”
causing TypeDoc to render it as separate paragraphs. Update the JSDoc above
reportValidity() so the sentence stays in one paragraph, keeping the description
continuous while preserving the rest of the API documentation text.
- Around line 406-418: The auto-default-to-now logic in componentWillLoad is
overriding the required-field behavior and also causing an early valueChange
emission via onInput. Update the TimeInput component so the
DateTime.now().toFormat(...) fallback in componentWillLoad is skipped when the
field is required (or otherwise intended to start empty), and avoid emitting
valueChange for this initial auto-seeded value. Review the componentWillLoad,
onInput, and syncValidityToFormInternals flow in time-input.tsx to keep required
inputs empty on first load while preserving non-required defaults.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: d562d51e-4f2a-42a4-8f77-7026d90af1d6

📥 Commits

Reviewing files that changed from the base of the PR and between ee6833c and 522b5c2.

⛔ Files ignored due to path filters (3)
  • packages/angular/standalone/src/components.ts is excluded by !packages/angular/standalone/src/components.ts
  • packages/react/src/components/components.server.ts is excluded by !packages/react/src/components/**
  • packages/vue/src/components/ix-time-input.ts is excluded by !packages/vue/src/components/**
📒 Files selected for processing (8)
  • .changeset/feat-time-input-validation.md
  • packages/angular/src/components.ts
  • packages/core/src/components.d.ts
  • packages/core/src/components/input/input.util.ts
  • packages/core/src/components/time-input/test/time-input.ct.ts
  • packages/core/src/components/time-input/time-input.tsx
  • packages/core/src/components/utils/input/picker-input.util.ts
  • packages/core/src/components/utils/input/validation.ts

Comment thread packages/angular/src/components.ts
Comment thread packages/core/src/components/input/input.util.ts Outdated
Comment thread packages/core/src/components/time-input/test/time-input.ct.ts
Comment thread packages/core/src/components/time-input/test/time-input.ct.ts
Comment thread packages/core/src/components/time-input/time-input.tsx
Comment thread packages/core/src/components/time-input/time-input.tsx
@RamVinayMandal RamVinayMandal added this to the 5.2.0 milestone Jun 30, 2026
@sonarqubecloud

sonarqubecloud Bot commented Jul 1, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant