diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index d83feed11df..740ec0eef06 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -305,7 +305,15 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { // event on focus/blur/load if the input has a placeholder. See: // https://connect.microsoft.com/IE/feedback/details/885747/ if (this._canOpen() && document.activeElement === event.target) { - this._onChange((event.target as HTMLInputElement).value); + let target = event.target as HTMLInputElement; + let value: number | string | null = target.value; + + // Based on `NumberValueAccessor` from forms. + if (target.type === 'number') { + value = value == '' ? null : parseFloat(value); + } + + this._onChange(value); this.openPanel(); } } diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 02ddd3d6551..0f0df3a7cef 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1639,6 +1639,17 @@ describe('MatAutocomplete', () => { expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.'); })); + it('should handle autocomplete being attached to number inputs', fakeAsync(() => { + const fixture = createComponent(AutocompleteWithNumberInputAndNgModel); + fixture.detectChanges(); + const input = fixture.debugElement.query(By.css('input')).nativeElement; + + typeInElement('1337', input); + fixture.detectChanges(); + + expect(fixture.componentInstance.selectedValue).toBe(1337); + })); + }); it('should have correct width when opened', () => { @@ -2072,3 +2083,20 @@ class AutocompleteWithSelectEvent { class PlainAutocompleteInputWithFormControl { formControl = new FormControl(); } + + +@Component({ + template: ` + + + + + + {{value}} + + ` +}) +class AutocompleteWithNumberInputAndNgModel { + selectedValue: number; + values = [1, 2, 3]; +}