Skip to content

Commit be5e93a

Browse files
robertmesserlejelbourn
authored andcommitted
fix(input): input element should have a different id from outer element (#450)
closes #320
1 parent 33a88ac commit be5e93a

File tree

3 files changed

+22
-1
lines changed

3 files changed

+22
-1
lines changed

src/components/input/input.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[attr.aria-disabled]="ariaDisabled"
1313
[attr.aria-required]="ariaRequired"
1414
[attr.aria-invalid]="ariaInvalid"
15-
[id]="id"
15+
[id]="inputId"
1616
[disabled]="disabled"
1717
[required]="required"
1818
[spellcheck]="spellcheck"

src/components/input/input.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,26 @@ export function main() {
5454
});
5555
});
5656

57+
it('should have a different ID for outer element and internal input', () => {
58+
return builder
59+
.overrideTemplate(MdInputBaseTestController, `
60+
<md-input id="test-id"></md-input>
61+
`)
62+
.createAsync(MdInputBaseTestController)
63+
.then(fixture => {
64+
fixture.detectChanges();
65+
fakeAsync(() => {
66+
const componentElement: HTMLElement = fixture.debugElement
67+
.query(By.directive(MdInput)).nativeElement;
68+
const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
69+
.nativeElement;
70+
expect(componentElement.id).toBe('test-id');
71+
expect(inputElement.id).toBeTruthy();
72+
expect(inputElement.id).not.toBe(componentElement.id);
73+
})();
74+
});
75+
});
76+
5777
it('counts characters', () => {
5878
return builder.createAsync(MdInputBaseTestController).then(fixture => {
5979
let instance = fixture.componentInstance;

src/components/input/input.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
128128
get characterCount(): number {
129129
return this.empty ? 0 : ('' + this._value).length;
130130
}
131+
get inputId(): string { return `${this.id}-input`; }
131132

132133
/**
133134
* Bindings.

0 commit comments

Comments
 (0)