Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
When using autocompletion on a field together with updateOn: 'blur' on the FormControl / FormGroup, selecting an option from the autocompletion panel should neither trigger an update of the form nor a field validation. The update should only be triggered when the user moves on to the next field or submits the form.
What is the current behavior?
When clicking on an option in the autocompletion panel, the FormControl is updated with the old, incomplete value and the validation triggered. Then the new value is inserted into the field and the autocompletion panel is closed.
Depending on the validation, the field is now marked to be in error even though the shown value is valid. This is because the validation was run on the old, incomplete value. No update or validation should have occurred as the field was not left.
What are the steps to reproduce?
A simple StackBlitz example can be used to reproduce it. Enter "23" in the first text field and then select "ABC23" by clicking with the mouse.
What is the use-case or motivation for changing an existing behavior?
Technically, the behavior is ok because clicking in the autocompletion panel triggers a blur event. From a UI perspective however, it's complete nonsense: the user selects a valid value and is shown an error.
The text field and the associated autocompletion panel should be treated as a single element. Therefore, changing the focus between them should not be treated as a blur event and should not trigger a FormControl update or validation.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular 6.0.4
- Angular Material 6..2.1
- MacOS X 10.13.5
- Google Chrome 67