feat: label for support

README.md

@@ -121,6 +121,7 @@ map: {
 | [items] | `Array<any>` | `[]` | yes | Items array |
 | loading | `boolean` |  `-` | no | You can set the loading state from the outside (e.g. async items loading) |
 | loadingText | `string` | `Loading...` | no | Set custom text when for loading items |
+| labelForId | `string` | `-` | no | Id to associate control with label. |
 | [markFirst] | `boolean` | `true` | no | Marks first item as focused when opening/filtering. Default `true`|
 | maxSelectedItems | `number` | none | no | When multiple = true, allows to set a limit number of selection. |
 | hideSelected | `boolean` | `false` | no | Allows to hide selected items. |

demo/app/examples/reactive-forms.component.ts

@@ -20,7 +20,7 @@ import { delay } from 'rxjs/operators';
             <div class="form-row">
                 <div class="form-group col-md-6">
                     <label for="yesno">Not searchable</label>
-                    <ng-select #agreeSelect [searchable]="false" formControlName="agree">
+                    <ng-select #agreeSelect labelForId="yesno" [searchable]="false" formControlName="agree">
                         <ng-option [value]="true">Yes</ng-option>
                         <ng-option [value]="false">No</ng-option>
                     </ng-select>
@@ -29,7 +29,7 @@ import { delay } from 'rxjs/operators';
                 </div>
                 <div class="form-group col-md-6">
                     <label for="heroId">Basic select</label>
-                    <ng-select [searchable]="false" formControlName="heroId">
+                    <ng-select [searchable]="false" labelForId="heroId" formControlName="heroId">
                         <ng-template ng-label-tmp let-item="item" let-label="label">
                             <img src="{{basePath}}/assets/{{item}}.png" width="20px" height="20px" /> {{label}}
                         </ng-template>
@@ -41,11 +41,12 @@ import { delay } from 'rxjs/operators';
             </div>
             <hr>
             <div class="form-group">
-                <label for="state">Single select</label>
+                <label for="age">Single select</label>
                 ---html,true
                 <ng-select #agesSelect [items]="ages"
                         [selectOnTab]="true"
                         bindValue="value"
+                        labelForId="age"
                         (ngModelChange)="showConfirm()"
                         placeholder="Select age"
                         formControlName="age">
@@ -64,6 +65,7 @@ import { delay } from 'rxjs/operators';
                            [items]="cities"
                            bindLabel="name"
                            bindValue="id"
+                           labelForId="state"
                            [multiple]="true"
                            placeholder="Select cities"
                            clearAllText="Clear"
@@ -83,6 +85,7 @@ import { delay } from 'rxjs/operators';
                            bindLabel="title"
                            dropdownPosition="auto"
                            bindValue="id"
+                           labelForId="album"
                            placeholder="Select album"
                            [virtualScroll]="true"
                            formControlName="album">
@@ -102,11 +105,12 @@ import { delay } from 'rxjs/operators';
             <hr>
 
             <div class="form-group">
-                <label for="album">Custom templates</label>
+                <label for="photos">Custom templates</label>
                 <ng-select [items]="photos"
                            bindLabel="title"
                            bindValue="thumbnailUrl"
                            placeholder="Select photo"
+                           labelForId="photos"
                            [virtualScroll]="true"
                            formControlName="photo">
                     <ng-template ng-label-tmp let-item="item">

demo/style/styles.scss

@@ -40,3 +40,7 @@ ng-select.ng-invalid.ng-touched .ng-select-container {
     border-color: #dc3545;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
 }
+
+.btn+.btn {
+    margin-left: 5px
+}

src/ng-select/ng-select.component.html

@@ -21,21 +21,13 @@
                 [ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
         </ng-template>
 
-        <div *ngIf="!isDisabled" class="ng-input">
-            <div *ngIf="!searchable"
-                #filterInput
-                tabindex="0"
-                (focus)="onInputFocus()"
-                (blur)="onInputBlur()"
-                role="combobox"
-                [attr.aria-expanded]="isOpen"
-                [attr.aria-owns]="isOpen ? dropdownId : null"
-                [attr.aria-activedescendant]="isOpen ? itemsList?.markedItem?.htmlId : null">
-            </div>
+        <div class="ng-input">
             <input #filterInput
-                   *ngIf="searchable"
                    type="text"
                    autocomplete="{{dropdownId}}"
+                   [id]="labelForId"
+                   [readOnly]="!searchable"
+                   [disabled]="isDisabled"
                    [value]="filterValue"
                    (input)="filter(filterInput.value)"
                    (focus)="onInputFocus()"

src/ng-select/ng-select.component.scss

@@ -73,6 +73,9 @@
                     &::-ms-clear {
                         display: none;
                     }
+                    &[readonly] {
+                        user-select: none;
+                    }
                 }
             }
         }

src/ng-select/ng-select.component.spec.ts

@@ -1,26 +1,35 @@
 import {
-    async, ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick
+    async,
+    ComponentFixture,
+    discardPeriodicTasks,
+    fakeAsync,
+    TestBed,
+    tick
 } from '@angular/core/testing';
-
 import { By } from '@angular/platform-browser';
 import {
-    DebugElement,
     Component,
-    ViewChild,
-    Type,
+    DebugElement,
     ErrorHandler,
-    NgZone
+    NgZone,
+    Type,
+    ViewChild
 } from '@angular/core';
+import { ConsoleService } from './console.service';
 import { FormsModule } from '@angular/forms';
-
-import { NgSelectModule } from './ng-select.module';
-import { NgSelectComponent } from './ng-select.component';
+import {
+    getNgSelectElement,
+    selectOption,
+    TestsErrorHandler,
+    tickAndDetectChanges,
+    triggerKeyDownEvent
+} from '../testing/helpers';
 import { KeyCode, NgOption } from './ng-select.types';
 import { Subject } from 'rxjs/Subject';
+import { MockConsole, MockNgWindow, MockNgZone } from '../testing/mocks';
+import { NgSelectComponent } from './ng-select.component';
+import { NgSelectModule } from './ng-select.module';
 import { WindowService } from './window.service';
-import { TestsErrorHandler, tickAndDetectChanges, triggerKeyDownEvent, getNgSelectElement, selectOption } from '../testing/helpers';
-import { MockNgZone, MockNgWindow, MockConsole } from '../testing/mocks';
-import { ConsoleService } from './console.service';
 
 describe('NgSelectComponent', function () {
 
@@ -1887,10 +1896,14 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             const select = fixture.componentInstance.select;
-            tickAndDetectChanges(fixture);
-            const filterInput = select.elementRef.nativeElement.querySelector('input');
+            triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
+            triggerKeyDownEvent(getNgSelectElement(fixture), 97, 'v');
+            tick(200);
+            fixture.detectChanges();
+
+            const input: HTMLInputElement = select.elementRef.nativeElement.querySelector('input');
             expect(select.filterValue).toBeNull();
-            expect(filterInput).toBeNull();
+            expect(input.readOnly).toBeTruthy();
         }));
 
         it('should mark first item on filter', fakeAsync(() => {

src/ng-select/ng-select.component.ts

@@ -99,6 +99,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     @Input() selectableGroup = false;
     @Input() searchFn = null;
     @Input() clearSearchOnAdd = true;
+    @Input() labelForId = '';
     @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;