fix(cdk/testing): unable to assign value to number inputs using sendKeys (#22395)

Currently the `UnitTestElement` simulates typing into an input by assigning the value character-by-character and dispatching fake events along the way. The problem is that for input types that require the value to be in a particular format (e.g. `number`, `color`, `date`) doing so will temporarily assign an invalid value which will be rejected by the browser with a warning like `The specified value "12." cannot be parsed, or is out of range.`.

This can become a problem for some common use cases like the `ReactiveFormsModule` where a directive might be keeping track of the value by looking at the DOM inside of an `input` event (e.g. the `FormControl` directive does this).

These changes resolve the issue by looking at the type of the input, and if it's a type that requires a specific format, we assign the value immediately.

Fixes #22129.

(cherry picked from commit 2f177b6)

Author: crisbeto

src/cdk/keycodes/keycodes.ts

@@ -116,6 +116,7 @@ export const SEMICOLON = 186;       // Firefox (Gecko) fires 59 for SEMICOLON
 export const EQUALS = 187;          // Firefox (Gecko) fires 61 for EQUALS
 export const COMMA = 188;
 export const DASH = 189;            // Firefox (Gecko) fires 173 for DASH/MINUS
+export const PERIOD = 190;
 export const SLASH = 191;
 export const APOSTROPHE = 192;
 export const TILDE = 192;

src/cdk/testing/testbed/fake-events/type-in-element.ts

@@ -7,16 +7,21 @@
  */
 
 import {ModifierKeys} from '@angular/cdk/testing';
+import {PERIOD} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from './dispatch-events';
 import {triggerFocus} from './element-focus';
 
+/** Input types for which the value can be entered incrementally. */
+const incrementalInputTypes =
+  new Set(['text', 'email', 'hidden', 'password', 'search', 'tel', 'url']);
+
 /**
  * Checks whether the given Element is a text input element.
  * @docs-private
  */
 export function isTextInput(element: Element): element is HTMLInputElement | HTMLTextAreaElement {
   const nodeName = element.nodeName.toLowerCase();
-  return nodeName === 'input' || nodeName === 'textarea' ;
+  return nodeName === 'input' || nodeName === 'textarea';
 }
 
 /**
@@ -51,21 +56,47 @@ export function typeInElement(element: HTMLElement, ...modifiersAndKeys: any) {
     modifiers = {};
     rest = modifiersAndKeys;
   }
+  const isInput = isTextInput(element);
+  const inputType = element.getAttribute('type') || 'text';
   const keys: {keyCode?: number, key?: string}[] = rest
       .map(k => typeof k === 'string' ?
           k.split('').map(c => ({keyCode: c.toUpperCase().charCodeAt(0), key: c})) : [k])
       .reduce((arr, k) => arr.concat(k), []);
 
+  // We simulate the user typing in a value by incrementally assigning the value below. The problem
+  // is that for some input types, the browser won't allow for an invalid value to be set via the
+  // `value` property which will always be the case when going character-by-character. If we detect
+  // such an input, we have to set the value all at once or listeners to the `input` event (e.g.
+  // the `ReactiveFormsModule` uses such an approach) won't receive the correct value.
+  const enterValueIncrementally = inputType === 'number' && keys.length > 0 ?
+    // The value can be set character by character in number inputs if it doesn't have any decimals.
+    keys.every(key => key.key !== '.' && key.keyCode !== PERIOD) :
+    incrementalInputTypes.has(inputType);
+
   triggerFocus(element);
+
+  // When we aren't entering the value incrementally, assign it all at once ahead
+  // of time so that any listeners to the key events below will have access to it.
+  if (!enterValueIncrementally) {
+    (element as HTMLInputElement).value = keys.reduce((value, key) => value + (key.key || ''), '');
+  }
+
   for (const key of keys) {
     dispatchKeyboardEvent(element, 'keydown', key.keyCode, key.key, modifiers);
     dispatchKeyboardEvent(element, 'keypress', key.keyCode, key.key, modifiers);
-    if (isTextInput(element) && key.key && key.key.length === 1) {
-      element.value += key.key;
-      dispatchFakeEvent(element, 'input');
+    if (isInput && key.key && key.key.length === 1) {
+      if (enterValueIncrementally) {
+        (element as HTMLInputElement | HTMLTextAreaElement).value += key.key;
+        dispatchFakeEvent(element, 'input');
+      }
     }
     dispatchKeyboardEvent(element, 'keyup', key.keyCode, key.key, modifiers);
   }
+
+  // Since we weren't dispatching `input` events while sending the keys, we have to do it now.
+  if (!enterValueIncrementally) {
+    dispatchFakeEvent(element, 'input');
+  }
 }
 
 /**

src/cdk/testing/tests/cross-environment.spec.ts

@@ -395,6 +395,15 @@ export function crossEnvironmentSpecs(
       expect(await getActiveElementId()).toBe(await input.getAttribute('id'));
     });
 
+    it('should be able to type in values with a decimal', async () => {
+      const input = await harness.numberInput();
+      const value = await harness.numberInputValue();
+      await input.sendKeys('123.456');
+
+      expect(await input.getProperty('value')).toBe('123.456');
+      expect(await value.text()).toBe('Number value: 123.456');
+    });
+
     it('should be able to retrieve dimensions', async () => {
       const dimensions = await (await harness.title()).getDimensions();
       expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -35,6 +35,8 @@ export class MainComponentHarness extends ComponentHarness {
   readonly multiSelect = this.locatorFor('#multi-select');
   readonly multiSelectValue = this.locatorFor('#multi-select-value');
   readonly multiSelectChangeEventCounter = this.locatorFor('#multi-select-change-counter');
+  readonly numberInput = this.locatorFor('#number-input');
+  readonly numberInputValue = this.locatorFor('#number-input-value');
   readonly contextmenuTestResult = this.locatorFor('.contextmenu-test-result');
   // Allow null for element
   readonly nullItem = this.locatorForOptional('wrong locator');

src/cdk/testing/tests/test-components-module.ts

@@ -8,13 +8,13 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TestMainComponent} from './test-main-component';
 import {TestShadowBoundary, TestSubShadowBoundary} from './test-shadow-boundary';
 import {TestSubComponent} from './test-sub-component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
   declarations: [TestMainComponent, TestSubComponent, TestShadowBoundary, TestSubShadowBoundary],
   exports: [TestMainComponent, TestSubComponent, TestShadowBoundary, TestSubShadowBoundary]
 })

src/cdk/testing/tests/test-main-component.html

@@ -45,6 +45,9 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   <div id="multi-select-change-counter">Change events: {{multiSelectChangeEventCount}}</div>
   <div (myCustomEvent)="basicEvent = basicEvent + 1" id="custom-event-basic">Basic event: {{basicEvent}}</div>
   <div (myCustomEvent)="onCustomEvent($event)" id="custom-event-object">Event with object: {{customEventData}}</div>
+
+  <input id="number-input" type="number" aria-label="Enter a number" [formControl]="numberControl">
+  <div id="number-input-value">Number value: {{numberControl.value}}</div>
 </div>
 <div class="subcomponents">
   <test-sub class="test-special" title="test tools" [items]="testTools"></test-sub>

src/cdk/testing/tests/test-main-component.ts

@@ -8,6 +8,7 @@
 
 import {ENTER} from '@angular/cdk/keycodes';
 import {_supportsShadowDom} from '@angular/cdk/platform';
+import {FormControl} from '@angular/forms';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -45,6 +46,7 @@ export class TestMainComponent implements OnDestroy {
   _shadowDomSupported = _supportsShadowDom();
   clickResult = {x: -1, y: -1};
   rightClickResult = {x: -1, y: -1, button: -1};
+  numberControl = new FormControl();
 
   @ViewChild('clickTestElement') clickTestElement: ElementRef<HTMLElement>;
   @ViewChild('taskStateResult') taskStateResultElement: ElementRef<HTMLElement>;

tools/public_api_guard/cdk/keycodes.d.ts

@@ -176,6 +176,8 @@ export declare const PAGE_UP = 33;
 
 export declare const PAUSE = 19;
 
+export declare const PERIOD = 190;
+
 export declare const PLUS_SIGN = 43;
 
 export declare const PRINT_SCREEN = 44;