fix: use [attr.id] instead of [id] (#605)

fixes #599
ng-select · Jun 8, 2018 · 917ad74 · 917ad74
1 parent 40a6eb7
commit 917ad74
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -25,7 +25,7 @@
             <input #filterInput
                    type="text"
                    autocomplete="{{dropdownId}}"
-                   [id]="labelForId"
+                   [attr.id]="labelForId"
                    [readOnly]="!searchable"
                    [disabled]="isDisabled"
                    [value]="filterValue"

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -2225,6 +2225,7 @@ describe('NgSelectComponent', function () {
             fixture = createTestingModule(
                 NgSelectTestCmp,
                 `<ng-select [items]="cities"
+                        labelForId="lbl"
                         (change)="onChange($event)" 
                         bindLabel="name">
                 </ng-select>`);
@@ -2292,6 +2293,11 @@ describe('NgSelectComponent', function () {
             expect(input.hasAttribute('aria-owns'))
                 .toBe(false);
         }));
+
+        it('should add labelForId on filter input id attribute', fakeAsync(() => {
+            tickAndDetectChanges(fixture);
+            expect(input.getAttribute('id')).toEqual('lbl');
+        }));
     });
 
     describe('Output events', () => {

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -96,7 +96,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     @Input() selectableGroup = false;
     @Input() searchFn = null;
     @Input() clearSearchOnAdd = true;
-    @Input() labelForId = '';
+    @Input() labelForId = null;
     @Input() @HostBinding('class.ng-select-typeahead') typeahead: Subject<string>;
     @Input() @HostBinding('class.ng-select-multiple') multiple = false;
     @Input() @HostBinding('class.ng-select-taggable') addTag: boolean | AddTagFn = false;
@@ -584,7 +584,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         }
     }
 
-    _handleKeyPresses() {
+    private _handleKeyPresses() {
         if (this.searchable) {
             return;
         }
@@ -701,7 +701,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     private _handleArrowDown($event: KeyboardEvent) {
-        if (this.nextItemIsTag(+1)) {
+        if (this._nextItemIsTag(+1)) {
             this.itemsList.unmarkItem();
             this._scrollToTag();
         } else {
@@ -717,7 +717,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
             return;
         }
 
-        if (this.nextItemIsTag(-1)) {
+        if (this._nextItemIsTag(-1)) {
             this.itemsList.unmarkItem();
             this._scrollToTag();
         } else {
@@ -727,7 +727,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         $event.preventDefault();
     }
 
-    private nextItemIsTag(nextStep: number): boolean {
+    private _nextItemIsTag(nextStep: number): boolean {
         const nextIndex = this.itemsList.markedIndex + nextStep;
         return this.addTag && this.filterValue
             && this.itemsList.markedItem