Skip to content

Commit abaaef1

Browse files
committed
fix(autocomplete): autofill value changes not being propagated to the form control
Currently we skip any `input` events on an autocomplete trigger that have been dispatched while the element is blurre, in order to handle some IE-specific cases. This ends up preventing the autocomplete from picking up any changes to its value that have come as a result of the browser autofill. These changes move some logic around to handle both autofilling and the IE issues. Fixes #9704.
1 parent 444fb38 commit abaaef1

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -364,11 +364,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
364364
// filter out all of the extra events, we save the value on focus and between
365365
// `input` events, and we check whether it changed.
366366
// See: https://connect.microsoft.com/IE/feedback/details/885747/
367-
if (this._previousValue !== value && document.activeElement === event.target) {
367+
if (this._previousValue !== value) {
368368
this._previousValue = value;
369369
this._onChange(value);
370370

371-
if (this._canOpen()) {
371+
if (this._canOpen() && document.activeElement === event.target) {
372372
this.openPanel();
373373
}
374374
}

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -560,6 +560,18 @@ describe('MatAutocomplete', () => {
560560
.toEqual('al', 'Expected control value to be updated as user types.');
561561
});
562562

563+
it('should update control value when autofilling', () => {
564+
// Simulate the browser autofilling the input by setting a value and
565+
// dispatching an `input` event while the input is out of focus.
566+
expect(document.activeElement).not.toBe(input, 'Expected input not to have focus.');
567+
input.value = 'Alabama';
568+
dispatchFakeEvent(input, 'input');
569+
fixture.detectChanges();
570+
571+
expect(fixture.componentInstance.stateCtrl.value)
572+
.toBe('Alabama', 'Expected value to be propagated to the form control.');
573+
});
574+
563575
it('should update control value when option is selected with option value', fakeAsync(() => {
564576
fixture.componentInstance.trigger.openPanel();
565577
fixture.detectChanges();

0 commit comments

Comments
 (0)