feat(core)- Added native change event to input components. by 1307-Dev · Pull Request #2355 · siemens/ix

1307-Dev · 2026-01-22T04:54:47Z

💡 What is the current behavior?

There is no event in ix-input which behaves like the native html change event.

GitHub Issue Number: #1811

🆕 What is the new behavior?

An ix-change event has been added to the input components. (input, textarea, number-input, date-input and time-input.)
This behaves just like the native change event.

🏁 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

changeset-bot · 2026-01-22T04:54:53Z

🦋 Changeset detected

Latest commit: 883c7e7

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-angular	Patch
@siemens/ix	Patch
@siemens/ix-react	Patch
@siemens/ix-vue	Patch
@siemens/ix-docs	Patch

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

gemini-code-assist · 2026-01-22T04:55:17Z

Summary of Changes

Hello @1307-Dev, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a long-standing need by introducing a new ixChange event across several input components. This event provides a standardized and predictable mechanism for applications to react to committed value changes, such as when a user finishes typing and blurs an input, presses Enter, or selects a value from a picker. This enhancement significantly improves the consistency and reliability of event handling for these interactive elements.

Highlights

New ixChange Event: A native-like ixChange event has been introduced for ix-input, ix-textarea, ix-number-input, ix-date-input, and ix-time-input components to provide consistent change detection.
Event Triggering Logic: The ixChange event now fires when an input component loses focus and its value has changed, when the Enter key is pressed (for single-line inputs) after a value change, or upon selection from a date/time picker.
Framework Integration: The new ixChange event is properly exposed and typed across Angular, React, and Vue wrappers, ensuring seamless integration for developers using these frameworks.
Comprehensive Testing: Extensive Playwright component tests have been added to validate the behavior of the ixChange event under various scenarios, including blur, Enter key, picker selection, programmatic changes, and disabled/readonly states.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new ixChange event to several input components, aiming to replicate the behavior of the native HTML change event. The implementation is consistent across input, textarea, number-input, date-input, and time-input components. The changes span the core component logic, framework wrappers for Angular, React, and Vue, and include a comprehensive set of end-to-end tests, which is excellent.

The overall implementation is solid. I've made a few suggestions to improve encapsulation by marking a new internal property as /** @internal */. This will prevent it from being part of the public API and avoid potential misuse.

packages/core/src/components/input/input.util.ts

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

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

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

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

packages/core/src/components/input/textarea.tsx

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

nuke-ellington

Since tags missing

packages/react-test-app/src/preview-examples/input.tsx

nuke-ellington · 2026-01-26T14:42:37Z

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

  }

  private handleInputKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && this.initialValue !== this.value) {


Use onEnterKeyChange?

Added the change

nuke-ellington · 2026-01-26T14:44:33Z

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

              onKeyDown={(event) => this.handleKeyDown(event)}
              onBeforeInput={(event) => this.handleBeforeInput(event)}
              onPaste={(event) => this.handlePaste(event)}
+              onFocus={this.handleFocus}


No need to extract this oneliner

Added the change

nuke-ellington · 2026-01-26T14:45:11Z

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

  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;

  private handleInputKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && this.initialValue !== this.value) {


Use onEnterKeyChange?

Added the change

nuke-ellington · 2026-01-26T14:45:52Z

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

          onBlur={() => {
            this.ixBlur.emit();
            this.touched = true;
+            if (this.initialValue !== this.value) {


Use onInputBlurWithChange?

Added the change

…ix-2551/change

nuke-ellington

since tag syntax does not use prefixed 'v's (since v4.4.0 -> since 4.4.0)

sonarqubecloud · 2026-02-05T04:11:01Z

Quality Gate passed

Issues
0 New issues
4 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
1.7% Duplication on New Code

See analysis details on SonarQube Cloud

1307-Dev added 2 commits January 22, 2026 09:59

Added event and testst

a639837

Removed lint errors

bb2a82d

gemini-code-assist bot reviewed Jan 22, 2026

View reviewed changes

Fixed lint errors and added jsdocs wherever necessary

d381a11

1307-Dev marked this pull request as ready for review January 22, 2026 07:01

nuke-ellington requested changes Jan 26, 2026

View reviewed changes

nuke-ellington and others added 7 commits January 26, 2026 15:47

Create few-penguins-do.md

5e478da

Corrected formatting errors and requested changes

61e4b1b

Merge branch 'main' into ix-2551/change

ec14f1b

Merge branch 'ix-2551/change' of https://github.com/1307-Dev/ix into …

54cb042

…ix-2551/change

Added fix for generated ts files

4fb89ce

Merge branch 'main' into ix-2551/change

1b64e80

Added since tags and updated components

8438921

nuke-ellington requested changes Feb 4, 2026

View reviewed changes

nuke-ellington added this to the 4.4.0 milestone Feb 4, 2026

Changed tag syntax for documentation (since v4.40 to since 4.4.0)

883c7e7

1307-Dev requested a review from nuke-ellington February 5, 2026 04:10

Conversation

1307-Dev commented Jan 22, 2026

💡 What is the current behavior?

🆕 What is the new behavior?

🏁 Checklist

👨‍💻 Help & support

Uh oh!

changeset-bot bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

gemini-code-assist bot commented Jan 22, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nuke-ellington left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nuke-ellington left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Feb 5, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Jan 22, 2026 •

edited

Loading