Fixes AB#465: "Unselect All" navigable by keyboard

src/@batch-flask/ui/select/select-dropdown/select-dropdown.component.ts

@@ -2,6 +2,7 @@ import {
     ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef,
     HostBinding, Inject, forwardRef,
 } from "@angular/core";
+import { ListKeyNavigator } from "@batch-flask/core";
 import { SelectOptionComponent } from "@batch-flask/ui/select/option";
 import { SelectComponent } from "../select.component";
 
@@ -64,6 +65,8 @@ export class SelectDropdownComponent {
     }
 
     public rows: any;
+    public keyNavigator: ListKeyNavigator<SelectOptionComponent>;
+
     private _displayedOptions: SelectOptionComponent[] = [];
     private _focusedOption: any;
     private _multiple: any;
@@ -110,9 +113,15 @@ export class SelectDropdownComponent {
     private _computeOptions() {
         let fixedOptions = [];
         if (this.multiple) {
-            fixedOptions = [{ value: unselectAllOptionId, label: "Unselect all", cssClass: "unselect-all-option" }];
+            fixedOptions = [{
+                id: unselectAllOptionId,
+                value: unselectAllOptionId,
+                label: "Unselect all",
+                cssClass: "unselect-all-option"
+            }];
         }
         this.rows = fixedOptions.concat(this._displayedOptions);
+        this.keyNavigator.items = this.rows;
         this.changeDetector.markForCheck();
     }
 }

src/@batch-flask/ui/select/select.component.ts

@@ -132,8 +132,9 @@ export class SelectComponent<TValue = any> implements FormFieldControl<any>, Opt
 
     public set displayedOptions(displayedOptions: SelectOptionComponent[]) {
         this._displayedOptions = displayedOptions;
-        if (this._dropdownRef) { this._dropdownRef.instance.displayedOptions = displayedOptions; }
-        this._keyNavigator.items = displayedOptions;
+        if (this._dropdownRef) {
+            this._dropdownRef.instance.displayedOptions = displayedOptions;
+        }
     }
     public get displayedOptions() { return this._displayedOptions; }
 
@@ -295,6 +296,7 @@ export class SelectComponent<TValue = any> implements FormFieldControl<any>, Opt
         const injector = new SelectInjector(this, this.injector);
         const portal = new ComponentPortal(SelectDropdownComponent, null, injector);
         const ref = this._dropdownRef = this._overlayRef.attach(portal);
+        ref.instance.keyNavigator = this._keyNavigator;
         ref.instance.id = this.dropdownId;
         ref.instance.displayedOptions = this.displayedOptions;
         ref.instance.focusedOption = this.focusedOption;
@@ -318,6 +320,7 @@ export class SelectComponent<TValue = any> implements FormFieldControl<any>, Opt
                 this._filterInputEl.nativeElement.focus();
             });
         }
+
         this.changeDetector.markForCheck();
     }
 
@@ -455,6 +458,8 @@ export class SelectComponent<TValue = any> implements FormFieldControl<any>, Opt
         // If the filter makes it that we don't see the currently focusesd option fallback to focussing the first item
         if (!focusedOptionIncluded && this.dropdownOpen && this.filterable && this.filter) {
             this.focusFirstOption();
+        } else {
+            this._keyNavigator.items = options;
         }
         this.changeDetector.markForCheck();
     }

src/app/components/pool/action/add/os-picker/data-disk-picker/data-disk-picker.component.spec.ts

@@ -89,7 +89,7 @@ describe("DataDiskPickerComponent", () => {
         });
     });
 
-    it("udpates the editable table with changes", () => {
+    it("updates the editable table with changes", () => {
         testComponent.disks.setValue([new DataDiskDto({
             caching: CachingType.Readonly,
             diskSizeGB: 1024,