fix: focus filter on clear (#110)

fixes #93
ng-select · Oct 28, 2017 · 0faef55 · 0faef55
1 parent fa21804
commit 0faef55
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 15 deletions.
diff --git a/demo/app/examples/reactive-forms.component.ts b/demo/app/examples/reactive-forms.component.ts
@@ -9,7 +9,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
     template: `
         <form [formGroup]="heroForm" novalidate>
             <div class="form-group">
-                <label for="state">Cities</label>
+                <label for="state">Multi select</label>
                 <ng-select *ngIf="isCitiesControlVisible"
                            [items]="cities"
                            bindLabel="name"
@@ -24,7 +24,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
             </div>
             <hr>
             <div class="form-group">
-                <label for="state">Age</label>
+                <label for="state">Single select</label>
                 <ng-select [items]="ages"
                            bindValue="value"
                            placeholder="Select age"
@@ -35,7 +35,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
             </div>
             <hr>
             <div class="form-group">
-                <label for="album">Favorite album</label>
+                <label for="album">Loading async data</label>
                 <ng-select [items]="albums"
                            bindLabel="title"
                            bindValue="id"
@@ -55,7 +55,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
             <hr>
             
             <div class="form-group">
-                <label for="album">Favorite photo</label>
+                <label for="album">Custom templates</label>
                 <ng-select [items]="photos"
                            bindLabel="title"
                            bindValue="thumbnailUrl"

diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -17,15 +17,13 @@
 
         <div *ngIf="showFilter()" class="ng-input">
             <input #filterInput
+                   type="text"
                    [value]="filterValue"
                    (input)="onFilter($event)"
                    (focus)="onInputFocus($event)"
                    (blur)="onInputBlur($event)"
                    (change)="$event.stopPropagation()"
-                   role="combobox"
-                   aria-expanded="false"
-                   aria-owns=""
-                   aria-haspopup="false">
+                   role="combobox">
         </div>
     </div>
 

diff --git a/src/ng-select/ng-select.component.scss b/src/ng-select/ng-select.component.scss
@@ -45,18 +45,12 @@ ng-select {
             border-width: 0 5px 5px;
             &:hover {
                 border-color: transparent transparent #666;
-                ;
             }
         }
         .ng-menu-outer {
             visibility: visible;
         }
     }
-    &:not(.opened) {
-        .ng-control .ng-value-container .ng-input {
-            opacity: 0;
-        }
-    }
     &.focused {
         &:not(.opened)>.ng-control {
             border-color: #007eff;

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -180,6 +180,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
     handleClearClick($event: Event) {
         $event.stopPropagation();
         this.clear();
+        this.focusSearchInput();
     }
 
     clear() {
@@ -190,7 +191,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
         this.clearSearch();
         this.notifyModelChanged();
         if (this.isTypeahead()) {
-            this.typeahead.next(this.filterValue);
+            this.typeahead.next(null);
         }
     }
 
@@ -432,6 +433,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
     private focusSearchInput() {
         setTimeout(() => {
             this.filterInput.nativeElement.focus();
+            this.filterInput.nativeElement.select();
         });
     }