Fix regression with focus and keyboard navigation

- best focus render - show the focus on normal style
plantain-00 · Aug 2, 2017 · c7277a5 · c7277a5
1 parent 738e011
commit c7277a5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/src/angular.template.html b/src/angular.template.html
@@ -1,5 +1,5 @@
 <div [class]="containerStyle">
-    <div class="selection"
+    <div class="selection" #selection
          [attr.tabindex]="!this.isOpen ? tabIndex : '-1'"
          (click)="toggleOpenAndClose()"
          (focus)="focusin()"

diff --git a/src/angular.ts b/src/angular.ts
@@ -52,9 +52,11 @@ export class Select2 implements ControlValueAccessor {
     isSearchboxHidden: boolean;
     searchStyle: string;
 
+    selectionElement: HTMLElement;
     searchInputElement: HTMLElement;
     resultsElement: HTMLElement;
 
+    @ViewChild('selection') selection: ElementRef;
     @ViewChild('searchInput') searchInput: ElementRef;
     @ViewChild('results') results: ElementRef;
 
@@ -197,6 +199,7 @@ export class Select2 implements ControlValueAccessor {
     }
 
     ngAfterViewInit() {
+        this.selectionElement = this.selection.nativeElement as HTMLElement;
         this.searchInputElement = this.searchInput.nativeElement as HTMLElement;
         this.resultsElement = this.results.nativeElement as HTMLElement;
     }
@@ -262,6 +265,7 @@ export class Select2 implements ControlValueAccessor {
     }
 
     focusin() {
+        this.focuskeeper();
         if (!this.disabled) {
             this.focused = true;
         }
@@ -274,14 +278,16 @@ export class Select2 implements ControlValueAccessor {
     focusout(field: string) {
         this.focusoutTimer = setTimeout(() => {
             if (
-                (this.focused && !this.isOpen)
-                || field === 'searchInput'
-                || field === 'option' && this._keeper === false
+                (this.focused && !this.isOpen && this._keeper === false)
+                || (field === 'searchInput' && this._keeper === false)
+                || (field === 'option' && this._keeper === false)
             ) {
                 this.isOpen = false;
                 this.focusoutTimer = undefined;
-                this.focused = false;
-                this._onTouched();
+                if (!this.selectionElement.classList.contains('select2-focus')) {
+                    this.focused = false;
+                    this._onTouched();
+                }
             }
             this._keeper = false;
         }, common.timeout);
@@ -345,6 +351,8 @@ export class Select2 implements ControlValueAccessor {
             } else {
                 this.option = option;
                 this.isOpen = false;
+                this.focuskeeper();
+                this.selectionElement.focus();
             }
         }
 

diff --git a/src/select2.less b/src/select2.less
@@ -297,6 +297,14 @@
     }
   }
 
+  &:not(.select2-container--open) .select2-focused {
+    .select2-selection--single,
+    .select2-selection--multiple {
+      border: solid black 1px;
+      outline: 0;
+    }
+  }
+
   &.select2-container--disabled {
     .select2-selection--multiple {
       background-color: #eee;
@@ -424,7 +432,6 @@ select2.material {
       height: auto;
     }
   }
-
   .select2-container--default {
     .select2-selection--single,
     .select2-selection--multiple {
@@ -485,16 +492,15 @@ select2.material {
       top: 20px;
     }
 
-
     &.select2-container--open,
     .select2-focused {
-      .select2-selection--single::after {
+      .select2-selection--single::after,
+      .select2-selection--multiple::after {
         transition:
           width .3s cubic-bezier(0.12, 1, 0.77, 1),
           left .3s cubic-bezier(0.12, 1, 0.77, 1);
         width: 100%;
         left: 0%;
-
       }
     }
 
@@ -514,7 +520,8 @@ select2.material {
       color: #ff5722;
     }
 
-    &.select2-container--disabled .select2-selection--single {
+    &.select2-container--disabled .select2-selection--single,
+    &.select2-container--disabled .select2-selection--multiple {
       background-color: transparent;
 
       &::before {
@@ -527,26 +534,36 @@ select2.material {
     }
   }
 
-  &.ng-invalid.ng-touched .select2-container--default .select2-selection--single {
+  &.ng-invalid.ng-touched .select2-container--default .select2-selection--single,
+  &.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple {
     &::before,
     &::after {
       background-color: red;
     }
   }
+
+  &:not(.select2-container--open) .select2-focused {
+    .select2-selection--single,
+    .select2-selection--multiple {
+      border: 0;
+    }
+  }
 }
 
 // material fix (firefox)
 
 @supports (-moz-appearance: none) {
-  select2.material .select2-container--default .select2-selection--single {
+  select2.material .select2-container--default .select2-selection--single,
+  select2.material .select2-container--default .select2-selection--multiple {
     height: 26px;
   }
 }
 
 // material fix (ms edge)
 
 @supports (-ms-scroll-limit: 0) {
-  select2.material .select2-container--default .select2-selection--single {
+  select2.material .select2-container--default .select2-selection--single,
+  select2.material .select2-container--default .select2-selection--multiple {
     height: 25px;
   }
 }