diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index d1591c615210..fe7ee76d5d33 100644 --- a/src/lib/input/input.spec.ts +++ b/src/lib/input/input.spec.ts @@ -5,7 +5,7 @@ import { import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; -import {MdInput, MdInputModule} from './input'; +import {MdInput, MdInputModule, TYPES_WITH_MASK} from './input'; function isInternetExplorer11() { return 'ActiveXObject' in window; @@ -53,7 +53,7 @@ describe('MdInput', function () { MdInputWithMin, MdInputWithStep, MdInputWithTabindex, - MdInputDateTestController, + MdInputWithMask, MdInputTextTestController, MdInputPasswordTestController, MdInputNumberTestController, @@ -80,11 +80,11 @@ describe('MdInput', function () { .toBe(true, 'Expected MdInput to default to having floating placeholders turned on'); }); - it('should not be treated as empty if type is date', () => { - if (isInternetExplorer11()) { + it('should not be treated as empty if the input has native masking', () => { + if (!TYPES_WITH_MASK.length) { return; } - let fixture = TestBed.createComponent(MdInputDateTestController); + let fixture = TestBed.createComponent(MdInputWithMask); fixture.componentInstance.placeholder = 'Placeholder'; fixture.detectChanges(); @@ -787,8 +787,9 @@ class MdInputWithStep { } @Component({template: ``}) class MdInputWithTabindex { } -@Component({template: ``}) -class MdInputDateTestController { +@Component({template: + ``}) +class MdInputWithMask { placeholder: string = ''; } diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 3d8b10a3c613..8e8b84a62653 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -40,6 +40,18 @@ const MD_INPUT_INVALID_INPUT_TYPE = [ 'checkbox', ]; +let featureTestInput: HTMLInputElement = document.createElement('input'); + +/** Native input types, supported by the current browser, that have input masking. */ +export const TYPES_WITH_MASK = [ + 'range', 'date', 'month', 'week', 'time', 'datetime', 'datetime-local' +].filter(value => { + featureTestInput.setAttribute('type', value); + return featureTestInput.type === value; +}); + +featureTestInput = null; + let nextUniqueId = 0; @@ -139,7 +151,10 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange /** Readonly properties. */ get focused() { return this._focused; } - get empty() { return (this._value == null || this._value === '') && this.type !== 'date'; } + get empty() { + return (this._value == null || this._value === '') && + TYPES_WITH_MASK.indexOf(this.type) === -1; + } get characterCount(): number { return this.empty ? 0 : ('' + this._value).length; }