fix(number input): prevent from clearing on intermediate decimal entry (Angular)

.changeset/wicked-planets-compete.md

@@ -0,0 +1,10 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/wc-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/ngx-core-components": patch
+---
+
+fix(number input): prevent from clearing on intermediate decimal entry
+fix(input,textarea): allow using `undefined` as `value`

packages/components/scripts/post-build/components.ts

@@ -238,7 +238,11 @@ export const getComponents = (): Component[] => [
 			],
 			stencil: [
 				{ from: 'HTMLElement', to: 'HTMLSelectElement' },
-				{ from: 'value={', to: '/* @ts-ignore */\nvalue={' }
+				{ from: 'value={', to: '/* @ts-ignore */\nvalue={' },
+				{
+					from: 'this.value ?? this._value ?? ""',
+					to: 'this.value ?? this._value ?? undefined'
+				}
 			]
 		},
 		config: {
@@ -371,20 +375,7 @@ export const getComponents = (): Component[] => [
 			vue: [{ from: ', index', to: '' }],
 			stencil: [{ from: 'HTMLElement', to: 'HTMLInputElement' }],
 			react: [{ from: /HTMLAttributes/g, to: 'InputHTMLAttributes' }],
-			angular: [
-				{ from: '<HTMLElement>', to: '<HTMLInputElement>' },
-				{
-					from: 'writeValue(value: any) {',
-					to:
-						'writeValue(value: any) {\n' +
-						'if (!value && value !== "" && (this.type() === "date" ||\n' +
-						'			this.type() === "time" ||\n' +
-						'			this.type() === "week" ||\n' +
-						'			this.type() === "month" ||\n' +
-						'			this.type() === "datetime-local"\n' +
-						'			)) return;'
-				}
-			]
+			angular: [{ from: '<HTMLElement>', to: '<HTMLInputElement>' }]
 		},
 		config: {
 			vue: {

packages/components/scripts/post-build/react.ts

@@ -154,7 +154,7 @@ export default DB${upperComponentName};`
 				/* We need to overwrite the internal state._value property just for react to have controlled components.
 				 * It works for Angular & Vue, so we overwrite it only for React.  */
 				{
-					from: 'props.value ?? _value',
+					from: 'props.value ?? _value ?? ""',
 					to: 'props.value'
 				}
 			];

packages/components/src/components/input/input.lite.tsx

@@ -135,7 +135,13 @@ export default function DBInput(props: DBInputProps) {
 			});
 
 			useTarget({
-				angular: () => handleFrameworkEventAngular(state, event),
+				angular: () =>
+					handleFrameworkEventAngular(
+						state,
+						event,
+						'value',
+						state._value
+					),
 				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 			state.handleValidation();
@@ -161,7 +167,13 @@ export default function DBInput(props: DBInputProps) {
 			});
 
 			useTarget({
-				angular: () => handleFrameworkEventAngular(state, event),
+				angular: () =>
+					handleFrameworkEventAngular(
+						state,
+						event,
+						'value',
+						state._value
+					),
 				vue: () => handleFrameworkEventVue(() => {}, event)
 			});
 			state.handleValidation();
@@ -235,9 +247,7 @@ export default function DBInput(props: DBInputProps) {
 	}, [state._id]);
 
 	onUpdate(() => {
-		if (props.value !== undefined) {
-			state._value = props.value;
-		}
+		state._value = props.value;
 	}, [props.value]);
 
 	onUpdate(() => {
@@ -305,7 +315,7 @@ export default function DBInput(props: DBInputProps) {
 				disabled={getBoolean(props.disabled, 'disabled')}
 				required={getBoolean(props.required, 'required')}
 				step={getStep(props.step)}
-				value={props.value ?? state._value}
+				value={props.value ?? state._value ?? ''}
 				maxLength={getNumber(props.maxLength, props.maxlength)}
 				minLength={getNumber(props.minLength, props.minlength)}
 				max={getInputValue(props.max, props.type)}

packages/components/src/components/select/select.lite.tsx

@@ -310,7 +310,7 @@ export default function DBSelect(props: DBSelectProps) {
 				id={state._id}
 				name={props.name}
 				size={props.size}
-				value={props.value ?? state._value}
+				value={props.value ?? state._value ?? ''}
 				autocomplete={props.autocomplete}
 				multiple={props.multiple}
 				onInput={(event: ChangeEvent<HTMLSelectElement>) =>

packages/components/src/components/textarea/textarea.lite.tsx

@@ -206,9 +206,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 	}, [state._id]);
 
 	onUpdate(() => {
-		if (props.value !== undefined) {
-			state._value = props.value;
-		}
+		state._value = props.value;
 	}, [props.value]);
 
 	onUpdate(() => {
@@ -288,7 +286,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				onFocus={(event: InteractionEvent<HTMLTextAreaElement>) =>
 					state.handleFocus(event)
 				}
-				value={props.value ?? state._value}
+				value={props.value ?? state._value ?? ''}
 				aria-describedby={props.ariaDescribedBy ?? state._descByIds}
 				placeholder={props.placeholder ?? DEFAULT_PLACEHOLDER}
 				rows={getNumber(props.rows, DEFAULT_ROWS)}

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

@@ -0,0 +1,172 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+	handleFrameworkEventAngular,
+	handleFrameworkEventVue
+} from './form-components';
+
+const createNumberEvent = (
+	value: string,
+	badInput: boolean,
+	inputType?: string
+) => ({
+	inputType,
+	target: {
+		type: 'number',
+		value,
+		validity: { badInput }
+	}
+});
+
+const createTextEvent = (value: string) => ({
+	target: {
+		type: 'text',
+		value,
+		validity: { badInput: false }
+	}
+});
+
+describe('handleFrameworkEventAngular', () => {
+	it('calls propagateChange and writeValue for valid number value', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = createNumberEvent('1.5', false);
+		handleFrameworkEventAngular(component, event);
+		expect(component.propagateChange).toHaveBeenCalledWith('1.5');
+		expect(component.writeValue).toHaveBeenCalledWith('1.5');
+	});
+
+	it('skips propagateChange and writeValue when "." is typed (intermediate state)', () => {
+		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();
+	});
+
+	it('skips propagateChange and writeValue when "," is typed (intermediate state)', () => {
+		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();
+	});
+
+	it.each(['e', 'E', '+', '-'])(
+		'skips propagateChange and writeValue when "%s" is typed (intermediate state)',
+		(char) => {
+			const component = {
+				propagateChange: vi.fn(),
+				writeValue: vi.fn()
+			};
+			const event = {
+				type: 'input',
+				data: char,
+				inputType: 'insertText',
+				target: { type: 'number', value: '' }
+			};
+			handleFrameworkEventAngular(component, event, 'value', '1');
+			expect(component.propagateChange).not.toHaveBeenCalled();
+			expect(component.writeValue).not.toHaveBeenCalled();
+		}
+	);
+
+	it('skips propagateChange and writeValue when deleting content and lastValue has decimal', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = {
+			type: 'input',
+			data: null,
+			inputType: 'deleteContentBackward',
+			target: { type: 'number', value: '' }
+		};
+		handleFrameworkEventAngular(component, event, 'value', '1.5');
+		expect(component.propagateChange).not.toHaveBeenCalled();
+		expect(component.writeValue).not.toHaveBeenCalled();
+	});
+
+	it('calls propagateChange and writeValue when number input is cleared via backspace (no decimal in lastValue)', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = createNumberEvent('', false, 'deleteContentBackward');
+		handleFrameworkEventAngular(component, event);
+		expect(component.propagateChange).toHaveBeenCalledWith('');
+		expect(component.writeValue).toHaveBeenCalledWith('');
+	});
+
+	it('skips propagateChange and writeValue for number change events', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = {
+			type: 'change',
+			target: { type: 'number', value: '5' }
+		};
+		handleFrameworkEventAngular(component, event);
+		expect(component.propagateChange).not.toHaveBeenCalled();
+		expect(component.writeValue).not.toHaveBeenCalled();
+	});
+
+	it('calls propagateChange and writeValue for text input type', () => {
+		const component = {
+			propagateChange: vi.fn(),
+			writeValue: vi.fn()
+		};
+		const event = createTextEvent('hello');
+		handleFrameworkEventAngular(component, event);
+		expect(component.propagateChange).toHaveBeenCalledWith('hello');
+		expect(component.writeValue).toHaveBeenCalledWith('hello');
+	});
+});
+
+describe('handleFrameworkEventVue', () => {
+	it('emits update:value for valid number value', () => {
+		const emit = vi.fn();
+		const event = createNumberEvent('1.5', false);
+		handleFrameworkEventVue(emit, event);
+		expect(emit).toHaveBeenCalledWith('update:value', '1.5');
+	});
+
+	it('emits update:value with empty string when number input has badInput (intermediate state like "1.")', () => {
+		const emit = vi.fn();
+		const event = createNumberEvent('', true);
+		handleFrameworkEventVue(emit, event);
+		expect(emit).toHaveBeenCalledWith('update:value', '');
+	});
+
+	it('emits update:value when number input is cleared (empty, no badInput)', () => {
+		const emit = vi.fn();
+		const event = createNumberEvent('', false);
+		handleFrameworkEventVue(emit, event);
+		expect(emit).toHaveBeenCalledWith('update:value', '');
+	});
+
+	it('emits update:value for text input type', () => {
+		const emit = vi.fn();
+		const event = createTextEvent('hello');
+		handleFrameworkEventVue(emit, event);
+		expect(emit).toHaveBeenCalledWith('update:value', 'hello');
+	});
+});

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

@@ -1,13 +1,47 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { delay } from './index';
 
+const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
+
 export const handleFrameworkEventAngular = (
 	component: any,
 	event: any,
-	modelValue: string = 'value'
+	modelValue: string = 'value',
+	lastValue?: any
 ): void => {
-	component.propagateChange(event.target[modelValue]);
-	component.writeValue(event.target[modelValue]);
+	const value = event.target[modelValue];
+	const type = event.target?.type;
+
+	if (
+		!value &&
+		value !== '' &&
+		['date', 'time', 'week', 'month', 'datetime-local'].includes(type)
+	) {
+		// If value is empty and type date we skip `writingValue` function
+		return;
+	}
+
+	if (type === 'number') {
+		if (event.type === 'input') {
+			if (
+				specialNumberCharacters.includes(event.data) ||
+				(specialNumberCharacters.some((specialCharacter) =>
+					lastValue?.toString().includes(specialCharacter)
+				) &&
+					event.inputType === 'deleteContentBackward')
+			) {
+				// Skip `writingValue` function if number type and input event
+				// and `.` or `,` or 'e', 'E', '+', '-' was typed
+				// or content was deleted but last number had a `.`
+				return;
+			}
+		} else if (event.type === 'change') {
+			// Skip `writingValue` function if number type and change event
+			return;
+		}
+	}
+	component.propagateChange(value);
+	component.writeValue(value);
 };
 
 export const handleFrameworkEventVue = (