Description
Affected Package
@angular/material - MatInputHarness: setValue(newValue: string): Promise<void>;
Is this a regression?
No, it was thought as a fix for matInputs of e.g. color type (#19561), but did not test nor fix decimals in detail, only mentioned they should also be fixed.
Description
When having a FormControl (in a formGroup) which is a matInput of type "number", matInputHarnessInstance.setValue() sets and displays the value, but the formControl's value in the formGroup is the wrong one, namely the decimal value ignoring all numbers before the separator: 12.345 is then 345 only.
After investigation, I found out that this originates in the implemenation of the setValue method:
In the sendKeys, the single keys are sent in this order: 1-12-null-3-34-345, so 345 is the last value emitted to the reactive form.
Afterwards, through the setInputValue (see above in image), the correct value is assigned, but not caught by change detection.
When asking for matInputHarness.getValue(), the correct value is retrieved (123.456), but when asking for the formControl's value, the value is the last emitted one from sendKeys.
This issue could also affect inputs of other types than type "number" which rely on the setInputValue() part.
In order to fix this, I needed to add
await (await matInputHarnessInstance.host()).dispatchEvent('input');
after calling matInputHarnessInstance.setValue(newValue) in all of my tests.
And it doesn't matter if the formControl has "updateOn: blur" or "updateOn: change".
🔬 Minimal Reproduction
- Tests proving that the formGroup really has only values after decimal,
- tests proving that the formGroup doesn't have the correct value
- test proving that the "input" event dispatching fixes the problem, at least for matInput of type "number"
🔥 Exception or Error
No exception, but failing tests, or tests proving that setValue doesn't emit the new value correctly.
🌍 Your Environment
Angular Version:
11.2.0