fix: do not use HostBinding for focus state (#461)

ng-select · Apr 16, 2018 · 5de7e30 · 5de7e30
1 parent 829fea5
commit 5de7e30
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
 import { SelectWithTemplatesComponent } from './examples/custom-templates.component';
 import { SelectBindingsComponent } from './examples/bindings.component';
 import { SelectSearchComponent } from './examples/search.component';
-import { ReactiveFormsComponent } from './examples/reactive-forms.component';
+import { ReactiveFormsComponent, ConfirmationComponent } from './examples/reactive-forms.component';
 import { SelectEventsComponent } from './examples/events.component';
 import { SelectMultiComponent } from './examples/multi.component';
 import { SelectTagsComponent } from './examples/tags.component';
@@ -91,8 +91,10 @@ export const appRoutes: Routes = [
         VirtualScrollComponent,
         AppendToComponent,
         DataSourceComponent,
-        SelectGroupsComponent
+        SelectGroupsComponent,
+        ConfirmationComponent
     ],
+    entryComponents: [ConfirmationComponent],
     bootstrap: [AppComponent]
 })
 export class AppModule {

diff --git a/demo/app/examples/reactive-forms.component.ts b/demo/app/examples/reactive-forms.component.ts
@@ -49,6 +49,7 @@ import { delay } from 'rxjs/operators';
                 <ng-select #agesSelect [items]="ages"
                         [selectOnTab]="true"
                         bindValue="value"
+                        (ngModelChange)="showConfirm()"
                         placeholder="Select age"
                         formControlName="age">
                 </ng-select>
@@ -261,6 +262,10 @@ export class ReactiveFormsComponent {
         }
     }
 
+    showConfirm() {
+        this.modalService.open(ConfirmationComponent, { size: 'lg', backdrop: 'static' });
+    }
+
     private loadAlbums() {
         this.dataService.getAlbums().pipe(delay(500)).subscribe(albums => {
             this.allAlbums = albums;
@@ -277,3 +282,27 @@ export class ReactiveFormsComponent {
     }
 }
 
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-confirmation',
+    template: `
+        <div class="modal-header">Next Step</div>
+        <div class="modal-body">Do you wish to continue?</div>
+        <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="clear()">Cancel</button>
+        <button type="button" class="btn btn-primary">Yes</button>
+        </div>
+`
+})
+export class ConfirmationComponent {
+
+  constructor(
+      public activeModal: NgbActiveModal,
+  ) {}
+
+  clear() {
+    this.activeModal.close();
+  }
+
+}
diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -137,7 +137,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     @ViewChild('filterInput') filterInput: ElementRef;
 
     @HostBinding('class.ng-select-opened') isOpen = false;
-    @HostBinding('class.ng-select-focused') isFocused = false;
     @HostBinding('class.ng-select-disabled') isDisabled = false;
     @HostBinding('class.ng-select-filtered') get filtered() { return !!this.filterValue };
 
@@ -331,16 +330,14 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     select(item: NgOption) {
-        if (!item.selected) {
-            this.itemsList.select(item);
-            this._clearSearch();
-            this._updateNgModel();
-            this.addEvent.emit(item.value);
-        }
-
+        this.itemsList.select(item);
+        this._clearSearch();
+        this.addEvent.emit(item.value);
         if (this.closeOnSelect || this.itemsList.noItemsToSelect) {
             this.close();
         }
+
+        this._updateNgModel();
     }
 
     focus() {
@@ -412,12 +409,12 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     onInputFocus() {
-        this.isFocused = true;
+        (<HTMLElement>this.elementRef.nativeElement).classList.add('ng-select-focused');
         this.focusEvent.emit(null);
     }
 
     onInputBlur() {
-        this.isFocused = false;
+        (<HTMLElement>this.elementRef.nativeElement).classList.remove('ng-select-focused');
         this.blurEvent.emit(null);
         if (!this.isOpen && !this.isDisabled) {
             this._onTouched();