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];
+}