fix(input): input element should have a different id from outer element (#450)

closes #320

Author: robertmesserle

src/components/input/input.html

@@ -12,7 +12,7 @@
              [attr.aria-disabled]="ariaDisabled"
              [attr.aria-required]="ariaRequired"
              [attr.aria-invalid]="ariaInvalid"
-             [id]="id"
+             [id]="inputId"
              [disabled]="disabled"
              [required]="required"
              [spellcheck]="spellcheck"

src/components/input/input.spec.ts

@@ -54,6 +54,26 @@ export function main() {
         });
     });
 
+    it('should have a different ID for outer element and internal input', () => {
+      return builder
+          .overrideTemplate(MdInputBaseTestController, `
+            <md-input id="test-id"></md-input>
+          `)
+          .createAsync(MdInputBaseTestController)
+          .then(fixture => {
+            fixture.detectChanges();
+            fakeAsync(() => {
+              const componentElement: HTMLElement = fixture.debugElement
+                  .query(By.directive(MdInput)).nativeElement;
+              const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
+                  .nativeElement;
+              expect(componentElement.id).toBe('test-id');
+              expect(inputElement.id).toBeTruthy();
+              expect(inputElement.id).not.toBe(componentElement.id);
+            })();
+          });
+    });
+
     it('counts characters', () => {
       return builder.createAsync(MdInputBaseTestController).then(fixture => {
         let instance = fixture.componentInstance;

src/components/input/input.ts

@@ -128,6 +128,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
   get characterCount(): number {
     return this.empty ? 0 : ('' + this._value).length;
   }
+  get inputId(): string { return `${this.id}-input`; }
 
   /**
    * Bindings.