VIV-2876 add support to render '+' when long press 'space' on keyboard

SpawnAtis · SpawnAtis · commit 9571da851008 · 2025-11-07T11:36:30.000+01:00
diff --git a/libs/components/src/lib/dial-pad/VARIATIONS.md b/libs/components/src/lib/dial-pad/VARIATIONS.md
@@ -6,7 +6,7 @@
 
 ## International Numbers
 
-To support international numbers, you can use the pattern like `^\+?[0-9#*]*$` which allows an optional `+` at the beginning. Users can **long press** the `0` button to insert a `+` symbol (commonly used for international numbers).
+To support international numbers, you can use the pattern like `^\+?[0-9#*]*$` which allows an optional `+` at the beginning. Users can **long press** the `0` button or **long press the Space key** on the keyboard (when the input field is active) to insert a `+` symbol (commonly used for international numbers).
 
 ```html preview
 <vwc-dial-pad pattern="^\+?[0-9#*]*$"></vwc-dial-pad>
diff --git a/libs/components/src/lib/dial-pad/dial-pad.spec.ts b/libs/components/src/lib/dial-pad/dial-pad.spec.ts
@@ -47,6 +47,91 @@ describe('vwc-dial-pad', () => {
 		return activeEl;
 	}
 
+	function withFakeTimers(callback: () => void) {
+		vi.useFakeTimers();
+		try {
+			callback();
+		} finally {
+			vi.useRealTimers();
+		}
+	}
+
+	function createPointerEvent(
+		type: string,
+		options: EventInit = {}
+	): PointerEvent {
+		// Create a mock PointerEvent for test environment
+		const event = new Event(type, options) as PointerEvent;
+		Object.defineProperty(event, 'pointerType', {
+			value: 'mouse',
+			writable: true,
+		});
+		Object.defineProperty(event, 'pointerId', {
+			value: 1,
+			writable: true,
+		});
+		return event;
+	}
+
+	function simulatePointerLongPress(
+		button: HTMLElement,
+		options: {
+			duration?: number;
+			onComplete?: () => void;
+			onLeave?: () => void;
+		} = {}
+	) {
+		const { duration = 600, onComplete, onLeave } = options;
+		const pointerDown = createPointerEvent('pointerdown', {
+			bubbles: true,
+		});
+		const pointerUp = createPointerEvent('pointerup', {
+			bubbles: true,
+		});
+
+		Object.defineProperty(pointerDown, 'currentTarget', {
+			value: button,
+			writable: true,
+		});
+		button.dispatchEvent(pointerDown);
+		vi.advanceTimersByTime(duration);
+
+		if (onLeave) {
+			onLeave();
+		}
+		button.dispatchEvent(pointerUp);
+
+		if (onComplete) {
+			onComplete();
+		}
+		vi.runAllTimers();
+	}
+
+	function simulateKeyboardLongPress(
+		input: HTMLInputElement,
+		options: {
+			pressDuration?: number;
+			releaseAfter?: number;
+		} = {}
+	) {
+		const { pressDuration = 650, releaseAfter: providedReleaseAfter } = options;
+		const releaseAfter =
+			providedReleaseAfter !== undefined ? providedReleaseAfter : pressDuration;
+		const keyDown = new KeyboardEvent('keydown', {
+			key: ' ',
+			bubbles: true,
+			repeat: false,
+		});
+		input.dispatchEvent(keyDown);
+		vi.advanceTimersByTime(releaseAfter);
+		const keyUp = new KeyboardEvent('keyup', {
+			key: ' ',
+			bubbles: true,
+		});
+		input.dispatchEvent(keyUp);
+		vi.runAllTimers();
+	}
+
 	beforeEach(async () => {
 		element = (await fixture(
 			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
@@ -479,23 +564,6 @@ describe('vwc-dial-pad', () => {
 			return getDigitButtons(component)[10] as Button;
 		}
 
-		function createPointerEvent(
-			type: string,
-			options: EventInit = {}
-		): PointerEvent {
-			// Create a mock PointerEvent for test environment
-			const event = new Event(type, options) as PointerEvent;
-			Object.defineProperty(event, 'pointerType', {
-				value: 'mouse',
-				writable: true,
-			});
-			Object.defineProperty(event, 'pointerId', {
-				value: 1,
-				writable: true,
-			});
-			return event;
-		}
-
 		it('should add "0" when tapping 0', async () => {
 			getZeroButton(element).click();
 			await Updates.next();
@@ -506,30 +574,16 @@ describe('vwc-dial-pad', () => {
 			element.pattern = '^\\+?[0-9#*]*$';
 			await Updates.next();
 			const btn = getZeroButton(element);
-			vi.useFakeTimers();
-			try {
-				const pointerDown = createPointerEvent('pointerdown', {
-					bubbles: true,
-				});
-				Object.defineProperty(pointerDown, 'currentTarget', {
-					value: btn,
-					writable: true,
+			withFakeTimers(() => {
+				simulatePointerLongPress(btn, {
+					duration: 600,
+					onComplete: () => {
+						btn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+					},
 				});
-				btn.dispatchEvent(pointerDown);
-				vi.advanceTimersByTime(600);
-				btn.dispatchEvent(
-					createPointerEvent('pointerup', {
-						bubbles: true,
-					})
-				);
-				vi.runAllTimers();
-			} finally {
-				vi.useRealTimers();
-			}
+			});
 			await Updates.next();
 
-			// Simulate potential click following pointerup; should be suppressed
-			btn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await Updates.next();
 			expect(getTextField(element).value).toEqual('+');
 		});
@@ -539,21 +593,9 @@ describe('vwc-dial-pad', () => {
 			element.disabled = true;
 			await Updates.next();
 			const btn = getZeroButton(element);
-			vi.useFakeTimers();
-			try {
-				const pointerDown = createPointerEvent('pointerdown', {
-					bubbles: true,
-				});
-				Object.defineProperty(pointerDown, 'currentTarget', {
-					value: btn,
-					writable: true,
-				});
-				btn.dispatchEvent(pointerDown);
-				vi.advanceTimersByTime(600);
-				vi.runAllTimers();
-			} finally {
-				vi.useRealTimers();
-			}
+			withFakeTimers(() => {
+				simulatePointerLongPress(btn, { duration: 600 });
+			});
 			await Updates.next();
 			expect(getTextField(element).value).toEqual('');
 		});
@@ -562,28 +604,20 @@ describe('vwc-dial-pad', () => {
 			element.pattern = '^\\+?[0-9#*]*$';
 			await Updates.next();
 			const btn = getZeroButton(element);
-			vi.useFakeTimers();
-			try {
-				const pointerDown = createPointerEvent('pointerdown', {
-					bubbles: true,
+			withFakeTimers(() => {
+				simulatePointerLongPress(btn, {
+					duration: 300,
+					onLeave: () => {
+						// Leave before long press completes
+						btn.dispatchEvent(
+							createPointerEvent('pointerleave', {
+								bubbles: true,
+							})
+						);
+					},
 				});
-				Object.defineProperty(pointerDown, 'currentTarget', {
-					value: btn,
-					writable: true,
-				});
-				btn.dispatchEvent(pointerDown);
 				vi.advanceTimersByTime(300);
-				// Leave before long press completes
-				btn.dispatchEvent(
-					createPointerEvent('pointerleave', {
-						bubbles: true,
-					})
-				);
-				vi.advanceTimersByTime(300);
-				vi.runAllTimers();
-			} finally {
-				vi.useRealTimers();
-			}
+			});
 			await Updates.next();
 			expect(getTextField(element).value).toEqual('');
 		});
@@ -833,4 +867,30 @@ describe('vwc-dial-pad', () => {
 			expect(element._errorAnnouncement).toBe('');
 		});
 	});
+
+	describe('keyboard events', function () {
+		it('should add "+" when long pressing Space in input field', async () => {
+			element.pattern = '^\\+?[0-9#*]*$';
+			await Updates.next();
+			const inputEl = getInput(element);
+			withFakeTimers(() => {
+				simulateKeyboardLongPress(inputEl, { pressDuration: 650 });
+			});
+			await Updates.next();
+
+			expect(getTextField(element).value).toEqual('+');
+		});
+
+		it('should add space when short pressing Space in input field', async () => {
+			element.pattern = '^\\+?[0-9#*]*$';
+			await Updates.next();
+			const inputEl = getInput(element);
+			withFakeTimers(() => {
+				simulateKeyboardLongPress(inputEl, { pressDuration: 300 });
+			});
+			await Updates.next();
+
+			expect(getTextField(element).value).toEqual(' ');
+		});
+	});
 });
diff --git a/libs/components/src/lib/dial-pad/dial-pad.template.ts b/libs/components/src/lib/dial-pad/dial-pad.template.ts
@@ -77,6 +77,16 @@ function handleKeyDown(x: DialPad, e: KeyboardEvent) {
 		e.target instanceof HTMLInputElement
 	) {
 		x._onDial();
+	} else if (e.key === ' ' || e.key === 'Space') {
+		// Handle long-press Space for '0' button when input is active
+		if (e.target instanceof HTMLInputElement) {
+			e.preventDefault();
+			// Only start on first keydown, ignore repeat events
+			// keydown events repeat while key is held, so we only start the timer once
+			if (!e.repeat) {
+				x._startKeyboardLongPress();
+			}
+		}
 	} else {
 		const elementIndex = DIAL_PAD_BUTTONS.findIndex((x) => x.value === e.key);
 		if (elementIndex > -1) {
@@ -93,6 +103,23 @@ function handleKeyDown(x: DialPad, e: KeyboardEvent) {
 	return true;
 }
 
+function handleKeyUp(x: DialPad, e: KeyboardEvent) {
+	if (e.key === ' ' || e.key === 'Space') {
+		if (e.target instanceof HTMLInputElement) {
+			e.preventDefault();
+
+			const wasLongPress = x._endKeyboardLongPress();
+			if (!wasLongPress) {
+				// Short press - add space character (normal space input)
+				x.value += ' ';
+				x.$emit('input');
+				x.$emit('change');
+			}
+		}
+	}
+	return true;
+}
+
 function syncFieldAndPadValues(x: DialPad) {
 	x.value = x._textFieldEl.value;
 }
@@ -122,6 +149,7 @@ function renderTextField(
 		x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
             @keydown="${(x, c) => handleKeyDown(x, c.event as KeyboardEvent)}"
+            @keyup="${(x, c) => handleKeyUp(x, c.event as KeyboardEvent)}"
             @input="${syncFieldAndPadValues}"
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
@@ -157,11 +185,6 @@ function onDigitClick(
 	dialPad.$emit('keypad-click', event.currentTarget);
 	dialPad.$emit('input');
 	dialPad.$emit('change');
-	// Reset suppress flag after a delay to handle cases where click doesn't fire.
-	// This ensures the next click won't be incorrectly suppressed
-	window.setTimeout(() => {
-		dialPad._suppressNextClick = false;
-	}, 0);
 }
 
 function renderDigits(
diff --git a/libs/components/src/lib/dial-pad/dial-pad.ts b/libs/components/src/lib/dial-pad/dial-pad.ts
@@ -157,6 +157,11 @@ export class DialPad extends Localized(VividElement) {
 	 * @internal
 	 */
 	_suppressNextClick = false;
+	/**
+	 * Tracks if long press completed for keyboard events
+	 * @internal
+	 */
+	private _keyboardLongPressCompleted = false;
 
 	/**
 	 * @internal
@@ -176,14 +181,51 @@ export class DialPad extends Localized(VividElement) {
 		}, 600);
 	}
 
+	/**
+	 * @internal
+	 */
+	_startKeyboardLongPress() {
+		if (this.disabled || this.callActive) return;
+		// If timer is already running, don't restart it (keydown events repeat while key is held)
+		if (this._longPressTimeoutId !== null) return;
+
+		this._keyboardLongPressCompleted = false;
+
+		this._longPressTimeoutId = window.setTimeout(() => {
+			this._keyboardLongPressCompleted = true;
+
+			this.value += '+';
+			this.$emit('input');
+			this.$emit('change');
+		}, 650);
+	}
+
 	/**
 	 * @internal
 	 */
 	_endLongPress() {
 		this._clearLongPressTimer();
-		// Don't reset suppress flag here - let the click handler reset it
-		// This ensures the click event can check the flag and suppress if needed
-		// If click doesn't fire, the flag will be reset on the next click
+		// Reset suppress flag after a delay to handle cases where click doesn't fire.
+		// This ensures the next click won't be incorrectly suppressed.
+		window.setTimeout(() => {
+			if (this._suppressNextClick) {
+				this._suppressNextClick = false;
+			}
+		}, 0);
+	}
+
+	/**
+	 * @internal
+	 * @returns true if long press completed (timer fired), false otherwise
+	 */
+	_endKeyboardLongPress(): boolean {
+		const wasLongPress = this._keyboardLongPressCompleted;
+		this._clearLongPressTimer();
+
+		window.setTimeout(() => {
+			this._keyboardLongPressCompleted = false;
+		}, 0);
+		return wasLongPress;
 	}
 
 	/**
