From be5e93a648dc46bd3a285200cab460502954e0e0 Mon Sep 17 00:00:00 2001
From: Robert Messerle <robertmesserle@gmail.com>
Date: Mon, 16 May 2016 13:19:43 -0700
Subject: [PATCH] fix(input): input element should have a different id from
 outer element (#450)

closes #320
---
 src/components/input/input.html    |  2 +-
 src/components/input/input.spec.ts | 20 ++++++++++++++++++++
 src/components/input/input.ts      |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/input/input.html b/src/components/input/input.html
index d905b20ce6ce..2b0ed7adc9aa 100644
--- a/src/components/input/input.html
+++ b/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"
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 9d4f393b4b8e..6a3e5aadea76 100644
--- a/src/components/input/input.spec.ts
+++ b/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;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 104f63931e87..316bbd031e18 100644
--- a/src/components/input/input.ts
+++ b/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.