fix(number input): prevent from clearing on intermediate decimal entry (Angular) by Copilot · Pull Request #6115 · db-ux-design-system/core-web

Copilot · 2026-02-21T06:09:32Z

When typing a decimal separator in a type="number" input (e.g. 1. or 1,), the Angular binding was calling writeValue("") — because event.target.value returns "" for incomplete numbers — causing the field to clear or the cursor to reset.

Root cause

The browser sets event.target.value = "" when a number input is in an intermediate state (e.g. "1."). For dot (.), validity.badInput is set to true. For comma (,), some browsers/locales (e.g. Firefox) fire an input event with value="" but leave badInput === false. In both cases, the Angular writeValue call was resetting the displayed value while the user was still typing.

Changes

src/utils/form-components.ts — In handleFrameworkEventAngular, propagateChange is now always called first (so Angular forms can always react to intermediate values for validation), and writeValue is skipped only when the target is a number input in an intermediate state. The lastValue parameter has been removed as it is no longer needed:

// Always call propagateChange first so Angular forms can react to intermediate values
component.propagateChange(value);

if (
    type === 'number' &&
    event.type === 'input' &&
    (event.target?.validity?.badInput ||
        (value === '' && event.inputType === 'insertText'))
) {
    // Skip writeValue for intermediate number input states (e.g. "1." or "1,")
    return;
}

component.writeValue(value);

This guards against resetting the displayed value during intermediate input while still allowing:

propagateChange to always fire so validation logic can respond even for intermediate states
completed valid values (e.g. 1.5) to write back normally
intentionally cleared fields (via backspace/delete) to write back normally
change events (fired on blur) to always propagate and write back the final value

The date/time input handling (writeValue skipped for null/undefined values) is also consolidated here at runtime rather than via build-time injection.

Vue is not affected by this issue and requires no change.

src/utils/form-components.spec.ts (new) — Unit tests for both handlers covering: valid number input, intermediate decimal with badInput=true (dot), intermediate decimal with badInput=false and insertText (comma in some browsers), field clearing via backspace, number change event on blur, date/time inputs with null and undefined values, and non-number input types.

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

changeset-bot · 2026-02-21T06:09:35Z

🦋 Changeset detected

Latest commit: 9e5849d

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

This PR includes changesets to release 9 packages

Name	Type
@db-ux/ngx-core-components	Patch
@db-ux/core-foundations	Patch
@db-ux/core-components	Patch
@db-ux/react-core-components	Patch
@db-ux/v-core-components	Patch
@db-ux/wc-core-components	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	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

… state Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

mfranzke · 2026-02-21T18:16:14Z

@copilot propagating/emiting is perfectly fine, as we might even want to react on incorrect values and handle their validation. So Vue is not even affected by this, but only Angular, and we need to run your code exclusively in front of component.writeValue(event.target[modelValue]); and not the propagation. Please adapt this change, the test, the description in this PR and revert your changes within package-lock.json as those are unrelated.

…e-lock Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot · 2026-02-21T18:21:05Z

@copilot propagating/emiting is perfectly fine, as we might even want to react on incorrect values and handle their validation. So Vue is not even affected by this, but only Angular, and we need to ru...

Done in fee6312:

Angular: propagateChange is always called; only writeValue is guarded by the badInput check
Vue: Change reverted — Vue is not affected
Tests: Updated to reflect that propagateChange IS called but writeValue is NOT called during intermediate decimal input
package-lock.json: Reverted

Copilot

Pull request overview

Fixes an Angular-specific UX issue where type="number" inputs can get cleared/reset during intermediate decimal entry (e.g. 1. / 1,) due to event.target.value === "" while validity.badInput === true.

Changes:

Update Angular framework event handler to skip writeValue for number inputs in badInput intermediate states while still calling propagateChange.
Add unit tests covering Angular/Vue handlers for valid number input, intermediate badInput, cleared values, and non-number inputs.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/components/src/utils/form-components.ts	Avoids writing back empty values during intermediate number input states in Angular.
packages/components/src/utils/form-components.spec.ts	Adds Vitest unit coverage for Angular/Vue framework event handlers (note: ensure these tests are actually executed by CI).

packages/components/src/utils/form-components.spec.ts

packages/components/src/utils/form-components.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…ld-decimal-separator

…vided

…ld-decimal-separator

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 14 comments.

Copilot · 2026-02-26T14:14:15Z

packages/components/src/utils/form-components.spec.ts

+	it('calls propagateChange but skips writeValue when number input has badInput (intermediate state like "1.")', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = {
+			type: 'input',
+			data: '.',
+			inputType: 'insertText',
+			target: { type: 'number', value: '1.' }
+		};
+		handleFrameworkEventAngular(component, event, 'value', '1');
+		expect(component.propagateChange).not.toHaveBeenCalled();
+		expect(component.writeValue).not.toHaveBeenCalled();
+	});


The test description and implementation don't match the actual code in form-components.ts. The test claims to check for badInput (intermediate state like "1."), but the actual implementation in form-components.ts checks event.data === '.' instead of validity.badInput. The test event object doesn't include event.type = 'input' which is required by the implementation logic at line 23. This test would pass but doesn't actually validate the real implementation behavior.

Copilot · 2026-02-26T14:14:15Z

packages/components/src/utils/form-components.spec.ts

+	it('calls propagateChange but skips writeValue when number input value is empty after insertText (e.g. comma "," in browsers where badInput stays false)', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = {
+			type: 'input',
+			data: ',',
+			inputType: 'insertText',
+			target: { type: 'number', value: '' }
+		};
+		handleFrameworkEventAngular(component, event, 'value', '1');
+		expect(component.propagateChange).not.toHaveBeenCalled();
+		expect(component.writeValue).not.toHaveBeenCalled();
+	});


The test description and implementation don't match the actual code in form-components.ts. The test claims to check for the comma scenario, but the actual implementation checks event.data === ',' instead of checking for badInput === false with empty value. The test event object doesn't include event.type = 'input' which is required by the implementation logic at line 23. This test would pass but doesn't actually validate the real implementation behavior.

Copilot · 2026-02-26T14:14:15Z

packages/components/src/utils/form-components.spec.ts

+	it('calls propagateChange and writeValue when number input is cleared via backspace (deleteContentBackward)', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = createNumberEvent('', false, 'deleteContentBackward');
+		handleFrameworkEventAngular(component, event);
+		expect(component.propagateChange).toHaveBeenCalledWith('');
+		expect(component.writeValue).toHaveBeenCalledWith('');
+	});


The test event is missing event.type = 'input' which is required for the implementation to check at line 23 of form-components.ts. Without this property, the implementation would skip the number input handling entirely and proceed to call both propagateChange and writeValue, making this test pass for the wrong reason.

Copilot · 2026-02-26T14:14:16Z

packages/components/src/utils/form-components.ts

+		if (event.type === 'input') {
+			if (
+				['.', ','].includes(event.data) ||
+				(lastValue.toString().includes('.') &&


Potential runtime error: When lastValue is undefined (not provided), calling lastValue.toString() will throw a TypeError. The implementation should check if lastValue exists before calling .toString() on it, or handle the optional parameter properly.

Suggested change

(lastValue.toString().includes('.') &&

(lastValue != null &&

lastValue.toString().includes('.') &&

Copilot · 2026-02-26T14:14:16Z

packages/components/src/utils/form-components.ts

+			if (
+				['.', ','].includes(event.data) ||
+				(lastValue.toString().includes('.') &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and `.` or `,` was typed
+				// or content was deleted but last number had a `.`
+				return;
+			}


The implementation doesn't match the approach described in the PR description. The PR description states the fix checks validity.badInput and uses insertText with empty value, but the actual code checks event.data instead. Using event.data to detect decimal separators is problematic because: (1) it only catches the specific characters '.', ',' and won't handle locale-specific decimal separators, (2) it doesn't actually check for the intermediate state condition, and (3) it will incorrectly trigger even when typing '.' or ',' in a valid context. The approach described in the PR description (checking validity.badInput and event.target.value === '' && event.inputType === 'insertText') would be more robust.

Suggested change

if (

['.', ','].includes(event.data) ||

(lastValue.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.` or `,` was typed

// or content was deleted but last number had a `.`

return;

}

const target = event.target as HTMLInputElement | null;

if (

target?.validity?.badInput &&

target.value === '' &&

event.inputType === 'insertText'

) {

// Skip `writingValue` function if number type and input event,

// and the browser reports a bad intermediate input which results

// in an empty value while inserting text (e.g. locale-specific

// decimal separator handling).

return;

}

if (

lastValue?.toString().includes('.') &&

event.inputType === 'deleteContentBackward'

) {

// Skip `writingValue` function if content was deleted but the

// previous number contained a decimal separator.

return;

}

Copilot · 2026-02-26T14:14:18Z

packages/components/src/utils/form-components.ts

+				['.', ','].includes(event.data) ||
+				(lastValue.toString().includes('.') &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and `.` or `,` was typed


The logic only handles '.' and ',' decimal separators but doesn't account for other valid intermediate states in number inputs, such as typing 'e' or 'E' for scientific notation (e.g., "1e"), typing '+' or '-' for signs, or typing multiple decimals. These will also result in event.target.value === '' but won't be caught by event.data === '.' || event.data === ',', potentially causing the same clearing issue this fix is trying to address.

Suggested change

['.', ','].includes(event.data) ||

(lastValue.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.` or `,` was typed

['.', ',', 'e', 'E', '+', '-'].includes(event.data) ||

(lastValue.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.`, `,`, `e`, `E`, `+` or `-` was typed

Copilot · 2026-02-26T14:14:18Z

packages/components/src/utils/form-components.ts

+				(lastValue.toString().includes('.') &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and `.` or `,` was typed
+				// or content was deleted but last number had a `.`


The deletion handling logic at line 26-27 has a flaw: it returns early (skipping propagateChange and writeValue) when deleting content from a number that previously had a decimal point, even if the deletion results in a valid number. For example, if the user has "1.5" and deletes the "." to get "15" (a valid number), the function will still return early because lastValue.toString().includes('.') is true. This prevents the valid result from being propagated to Angular forms. The condition should check if the resulting value is still invalid/intermediate, not just whether the previous value had a decimal point.

Suggested change

(lastValue.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.` or `,` was typed

// or content was deleted but last number had a `.`

(value?.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.` or `,` was typed

// or content was deleted but resulting number still has a `.`

Copilot · 2026-02-26T14:14:19Z

packages/components/src/utils/form-components.ts

+			if (
+				['.', ','].includes(event.data) ||
+				(lastValue.toString().includes('.') &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and `.` or `,` was typed


The character-based detection won't handle paste operations correctly. If a user pastes "1." into a number input, event.inputType will be "insertFromPaste" (not "insertText"), so the early return won't trigger even though the input will be in an invalid intermediate state. Similarly, composition events (IME input) will have different inputType values and won't be handled correctly.

Suggested change

if (

['.', ','].includes(event.data) ||

(lastValue.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and `.` or `,` was typed

const isInsertOperation =

typeof event.inputType === 'string' &&

event.inputType.startsWith('insert');

const endsWithDecimalSeparator =

typeof value === 'string' &&

(value.endsWith('.') || value.endsWith(','));

if (

(isInsertOperation && endsWithDecimalSeparator) ||

(lastValue?.toString().includes('.') &&

event.inputType === 'deleteContentBackward')

) {

// Skip `writingValue` function if number type and input event

// and a value ending with `.` or `,` was produced (by typing,

// pasting or composition)

Copilot · 2026-02-26T14:14:19Z

packages/components/src/utils/form-components.ts

+	component.propagateChange(value);
+	component.writeValue(value);


The implementation contradicts the PR description's claim that "propagateChange is always called (so Angular forms can react to intermediate values for validation)". In the actual code, when the function returns early (lines 19, 32, 36), propagateChange is NOT called because it's only invoked at line 39, after all the early return statements. This means Angular forms won't receive updates during intermediate states, preventing validation logic from running on partial input, which could be important for certain use cases.

@copilot apply changes based on this feedback

Fixed in 9e5849d. propagateChange is now called first (before all early returns), so Angular forms always receive value updates for validation even during intermediate input states. Key changes:

propagateChange moved to top of function — always executed

writeValue is skipped only for: date/time with null/undefined value, or number inputs in intermediate state (badInput=true or insertText with empty value)

Removed the event.type === 'change' early return — change events (on blur) now go through normally

Removed lastValue parameter — no longer needed with the validity.badInput approach

packages/components/src/utils/form-components.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…ventAngular Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Initial plan

7258d38

Copilot AI assigned Copilot and mfranzke Feb 21, 2026

github-project-automation bot added this to UX Engineering Team Backlog Feb 21, 2026

github-project-automation bot moved this to 🏗 In progress in UX Engineering Team Backlog Feb 21, 2026

Copilot started work on behalf of mfranzke February 21, 2026 06:09 View session

fix: skip value propagation for number inputs in intermediate decimal…

7f98008

… state Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix cursor jump and input clearing in number field~~ fix: prevent number input from clearing on intermediate decimal entry (Angular/Vue) Feb 21, 2026

Copilot AI requested a review from mfranzke February 21, 2026 06:26

Copilot finished work on behalf of mfranzke February 21, 2026 06:26

Copilot started work on behalf of mfranzke February 21, 2026 18:16 View session

fix: only skip writeValue for Angular badInput; revert Vue and packag…

fee6312

…e-lock Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot AI changed the title ~~fix: prevent number input from clearing on intermediate decimal entry (Angular/Vue)~~ fix: prevent number input from clearing on intermediate decimal entry (Angular) Feb 21, 2026

Copilot finished work on behalf of mfranzke February 21, 2026 18:21

mfranzke marked this pull request as ready for review February 21, 2026 18:22

mfranzke enabled auto-merge (squash) February 21, 2026 18:22

mfranzke moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Feb 21, 2026

github-actions bot added the 🏘components label Feb 21, 2026

mfranzke requested review from Copilot and removed request for mfranzke February 21, 2026 18:22

Copilot started reviewing on behalf of mfranzke February 21, 2026 18:23 View session

Copilot AI reviewed Feb 21, 2026

View reviewed changes

packages/components/src/utils/form-components.spec.ts Show resolved Hide resolved

mfranzke changed the title ~~fix: prevent number input from clearing on intermediate decimal entry (Angular)~~ fix(number input): prevent from clearing on intermediate decimal entry (Angular) Feb 23, 2026

nmerget moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Feb 23, 2026

nmerget self-requested a review February 23, 2026 07:30

nmerget reviewed Feb 23, 2026

View reviewed changes

packages/components/src/utils/form-components.ts Outdated Show resolved Hide resolved

nmerget moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Feb 23, 2026

auto-merge was automatically disabled February 24, 2026 08:46
Head branch was pushed to by a user without write access

Copilot AI requested a review from mfranzke February 24, 2026 08:47

Copilot finished work on behalf of mfranzke February 24, 2026 08:47

nmerget linked an issue Feb 25, 2026 that may be closed by this pull request

Cursor jumps to beginning and input is cleared when entering decimal separator in number field #6092

Open

7 tasks

fix: issue with form-components for angular

019869a

nmerget linked an issue Feb 25, 2026 that may be closed by this pull request

DBInput/DBTextarea: Can't set value to undefined #6147

Open

7 tasks

nmerget moved this from 🎶 Waiting for feedback to 🎁 Ready for review in UX Engineering Team Backlog Feb 25, 2026

github-actions bot mentioned this pull request Feb 25, 2026

Automated PR: auto update snapshots #6149

Merged

github-actions bot and others added 3 commits February 25, 2026 09:17

auto update snapshots (#6149)

b1ac2e4

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into copilot/fix-input-fie…

30b34f5

…ld-decimal-separator

fix: ensure input fields default to empty string when no value is pro…

8c3929a

…vided

nmerget moved this from 🎁 Ready for review to 🏗 In progress in UX Engineering Team Backlog Feb 26, 2026

nmerget added 3 commits February 26, 2026 11:44

fix: issue with react value

4f1f5b8

Merge remote-tracking branch 'origin/main' into copilot/fix-input-fie…

b0fd6dd

…ld-decimal-separator

fix: issue with test

11c1f1c

mfranzke requested a review from Copilot February 26, 2026 14:04

Copilot started reviewing on behalf of mfranzke February 26, 2026 14:05 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

mfranzke removed their assignment Mar 2, 2026

mfranzke moved this from 🏗 In progress to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 2, 2026

mfranzke removed their request for review March 2, 2026 17:30

refactor: added changeset

6b8c7e1

github-actions bot added the 📕documentation Improvements or additions to documentation label Mar 3, 2026

github-actions bot mentioned this pull request Mar 3, 2026

Automated PR: auto update snapshots #6231

Merged

auto update snapshots (#6231)

45505d7

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

michaelmkraus added this to Roadmap Mar 5, 2026

Copilot started work on behalf of mfranzke March 13, 2026 20:49 View session

fix: call propagateChange before writeValue guard in handleFrameworkE…

9e5849d

…ventAngular Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot AI requested a review from mfranzke March 13, 2026 20:56

Copilot finished work on behalf of mfranzke March 13, 2026 20:56

	(lastValue.toString().includes('.') &&
	(lastValue != null &&
	lastValue.toString().includes('.') &&

-			if (
-				['.', ','].includes(event.data) ||
-				(lastValue.toString().includes('.') &&
-					event.inputType === 'deleteContentBackward')
-			) {
-				// Skip `writingValue` function if number type and input event
-				// and `.` or `,` was typed
-				// or content was deleted but last number had a `.`
-				return;
-			}
+			const target = event.target as HTMLInputElement | null;
+			if (
+				target?.validity?.badInput &&
+				target.value === '' &&
+				event.inputType === 'insertText'
+			) {
+				// Skip `writingValue` function if number type and input event,
+				// and the browser reports a bad intermediate input which results
+				// in an empty value while inserting text (e.g. locale-specific
+				// decimal separator handling).
+				return;
+			}
+			if (
+				lastValue?.toString().includes('.') &&
+				event.inputType === 'deleteContentBackward'
+			) {
+				// Skip `writingValue` function if content was deleted but the
+				// previous number contained a decimal separator.
+				return;
+			}

-			if (
-				['.', ','].includes(event.data) ||
-				(lastValue.toString().includes('.') &&
-					event.inputType === 'deleteContentBackward')
-			) {
-				// Skip `writingValue` function if number type and input event
-				// and `.` or `,` was typed
+			const isInsertOperation =
+				typeof event.inputType === 'string' &&
+				event.inputType.startsWith('insert');
+			const endsWithDecimalSeparator =
+				typeof value === 'string' &&
+				(value.endsWith('.') || value.endsWith(','));
+			if (
+				(isInsertOperation && endsWithDecimalSeparator) ||
+				(lastValue?.toString().includes('.') &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and a value ending with `.` or `,` was produced (by typing,
+				// pasting or composition)

		component.propagateChange(value);
		component.writeValue(value);

Conversation

Copilot AI commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root cause

Changes

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

mfranzke commented Feb 21, 2026

Uh oh!

Copilot AI commented Feb 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

mfranzke Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Feb 21, 2026 •

edited

Loading

changeset-bot bot commented Feb 21, 2026 •

edited

Loading