Merge branch 'feature/dropdown-bugfixes'

Vastra-Gotalandsregionen · Dec 11, 2020 · 961d5af · 961d5af
2 parents 2ea0f1b + d897265
commit 961d5af
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Change-log](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+# 7.8.2 (2020-12-11)
+- Fixing a bug in `vgr-dropdown-select` where focus got stuck in filter fi deselectable was active.
+# 7.8.1 (2020-11-10)
+- Various bugfixes for `vgr-dropdown-select`.
+
 # 7.8.0 (2020-11-02)
 - Added option for using `vgr-notification` as standalone and new types `warning`, `info`
 

diff --git a/projects/komponentkartan/package.json b/projects/komponentkartan/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "7.8.1",
+  "version": "7.8.2",
   "peerDependencies": {
     "@angular/common": "^9.1.7",
     "@angular/core": "^9.1.7",

diff --git a/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.html b/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.html
@@ -16,9 +16,9 @@
       <div *ngIf="expanded && !readonly && !disabled" class="dropdown-select__menu" role="listbox"
         [attr.aria-labelledby]="labelId" [attr.aria-multiselectable]="multi">
         <div *ngIf="filterVisible || deselectable || multi" class="dropdown-select__menu__header">
-          <vgr-input *ngIf="filterVisible" type="search" (keydown)="onFilterKeydown($event)" [(ngModel)]="searchString" (ngModelChange)="filterItems()" (keyup.enter)="toggleSelectAll()" (focusin)="onFilterFocus()" (focusout)="onFilterBlur()">
+          <vgr-input *ngIf="filterVisible" type="search" (keydown)="onFilterKeydown($event)" [(ngModel)]="searchString" (ngModelChange)="filterItems()" (focusin)="onFilterFocus()" (focusout)="onFilterBlur()">
           </vgr-input>
-          <div *ngIf="filterHasFocus" class="select-all-text">(tryck retur för att välja alla träffar)</div>
+          <div *ngIf="multi" class="select-all-text" [ngStyle]="{'visibility': filterHasFocus ? 'visible' : 'hidden'}">(tryck retur för att välja alla träffar)</div>
           <vgr-button #deselectButton *ngIf="deselectable && !multi" class="dropdown-select__menu__header__deselect"
             [buttonStyle]="'discreet'" [disabled]="deselectDisabled" (click)="deselectItems()"
             (keydown)="onDeselectKeydown($event)">Ta

diff --git a/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.ts b/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.ts
@@ -300,6 +300,7 @@ export class DropdownSelectComponent implements OnChanges, AfterContentInit, Aft
 
   onHeaderKeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
+      event.stopPropagation();
       this.expand();
 
       const selectedItems = this.items.filter(item => item.selected);
@@ -386,10 +387,13 @@ export class DropdownSelectComponent implements OnChanges, AfterContentInit, Aft
 
     if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
       event.stopPropagation();
+      if (event.key === 'Enter') {
+        this.toggleSelectAll();
+      }
     } else if (event.key === 'ArrowDown' || event.key === 'Down') {
       if (this.multi) {
         this.selectAll.nativeElement.focus();
-      } else if (this.deselectable) {
+      } else if (this.deselectable && this.value) {
         this.deselectButton.focus();
       } else if (filteredItems.length) {
         filteredItems[0].focus();
@@ -531,7 +535,7 @@ export class DropdownSelectComponent implements OnChanges, AfterContentInit, Aft
       filteredItems[itemIndex - 1].focus();
     } else if (this.multi) {
       this.selectAll.nativeElement.focus();
-    } else if (this.deselectable) {
+    } else if (this.deselectable && this.value) {
       this.deselectButton.focus();
     } else if (this.filterVisible) {
       this.filter.focus();

diff --git a/src/app/dropdown-select-documentation/dropdown-select-documentation.component.html b/src/app/dropdown-select-documentation/dropdown-select-documentation.component.html
@@ -53,7 +53,7 @@
         </div>
         <div class="one-third">
           <p>Stor, 50 alternativ</p>
-          <vgr-dropdown-select>
+          <vgr-dropdown-select [deselectable]="true">
             <vgr-dropdown-item *ngFor="let item of items50">{{item}}</vgr-dropdown-item>
           </vgr-dropdown-select>
         </div>