fix: remove input if searchable is false (#442)

#390
ng-select · Apr 12, 2018 · 2149517 · 2149517
1 parent 68b9a7e
commit 2149517
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -21,11 +21,20 @@
                 [ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
         </ng-template>
 
-        <div *ngIf="showFilter()" class="ng-input">
+        <div *ngIf="!isDisabled" class="ng-input">
+            <div *ngIf="!searchable"
+                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>
             <input #filterInput
+                   *ngIf="searchable"
                    type="text"
                    autocomplete="off"
-                   [readOnly]="!searchable"
                    [value]="filterValue"
                    (input)="filter(filterInput.value)"
                    (focus)="onInputFocus()"

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -1772,9 +1772,12 @@ describe('NgSelectComponent', function () {
                     [(ngModel)]="selectedCity">
                 </ng-select>`);
 
-            fixture.componentInstance.select.filter('vilnius');
+            const select = fixture.componentInstance.select;
+            select.filter('vilnius');
             tickAndDetectChanges(fixture);
-            expect(fixture.componentInstance.select.filterValue).toBe(null);
+            const filterInput = select.elementRef.nativeElement.querySelector('input');
+            expect(select.filterValue).toBeNull();
+            expect(filterInput).toBeNull();
         }));
 
         it('should mark first item on filter', fakeAsync(() => {

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -377,10 +377,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
             !this.isLoading;
     }
 
-    showFilter() {
-        return !this.isDisabled;
-    }
-
     showNoItemsFound() {
         const empty = this.itemsList.filteredItems.length === 0;
         return ((empty && !this._isTypeahead && !this.loading) ||
@@ -436,6 +432,9 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     focusSearchInput() {
+        if (!this.filterInput) {
+            return;
+        }
         this.filterInput.nativeElement.focus();
         this.filterInput.nativeElement.select();
     }