dropdown fix.

frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html

@@ -24,14 +24,14 @@
         <label class="col-3 col-form-label">{{ 'schemas.fieldTypes.references.count' | sqxTranslate }}</label>
 
         <div class="col-9">
-            <div class="row">
+            <div class="row no-gutters">
-                <div class="col-6">
+                <div class="col">
                     <input type="number" class="form-control" formControlName="minItems" placeholder="{{ 'schemas.fieldTypes.references.countMin' | sqxTranslate }}">
                 </div>
                 <div class="col-auto">
                     <label class="col-form-label minmax">-</label>
                 </div>
-                <div class="col-6">
+                <div class="col">
                     <input type="number" class="form-control" formControlName="maxItems" placeholder="{{ 'schemas.fieldTypes.references.countMax' | sqxTranslate }}">
                 </div>
             </div>

frontend/app/framework/angular/forms/editors/color-picker.component.ts

@@ -50,7 +50,7 @@ export class ColorPickerComponent extends StatefulControlComponent<State, string
     constructor(changeDetector: ChangeDetectorRef) {
         super(changeDetector, { foreground: 'black' });
 
-        this.modal.isOpen.subscribe(open => {
+        this.modal.isOpenChanges.subscribe(open => {
             if (open) {
                 this.wasOpen = true;
             } else {

frontend/app/framework/angular/forms/editors/dropdown.component.html

@@ -4,7 +4,7 @@
         autocorrect="off"
         autocapitalize="off">
     
-    <div class="control-dropdown-item" *ngIf="selectedItem">
+    <div class="control-dropdown-item" *ngIf="snapshot.selectedItem; let selectedItem">
         <span class="truncate" *ngIf="!templateSelection">{{selectedItem}}</span>
         
         <ng-template *ngIf="templateSelection" [sqxTemplateWrapper]="templateSelection" [item]="selectedItem"></ng-template>

frontend/app/framework/angular/forms/editors/dropdown.component.ts

@@ -25,6 +25,9 @@ interface State {
     // The selected suggested index.
     selectedIndex: number;
 
+    // The selected item.
+    selectedItem?: number;
+
     // The current search query.
     query?: RegExp;
 }
@@ -66,14 +69,11 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
 
     public queryInput = new FormControl();
 
-    public get selectedItem() {
-        return this.items[this.snapshot.selectedIndex];
-    }
-
     constructor(changeDetector: ChangeDetectorRef) {
         super(changeDetector, {
             selectedIndex: -1,
-            suggestedItems: []
+            selectedItem: undefined,
+            suggestedItems: [],
         });
     }
 
@@ -202,7 +202,6 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
     }
 
     public selectIndex(selectedIndex: number, fromUserAction: boolean) {
-        if (fromUserAction) {
         const items = this.snapshot.suggestedItems || [];
 
         if (selectedIndex < 0) {
@@ -215,6 +214,7 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
 
         const selectedItem = items[selectedIndex];
 
+        if (fromUserAction) {
             let selectedValue = selectedItem;
 
             if (this.valueProperty && this.valueProperty.length > 0 && selectedValue) {
@@ -229,7 +229,7 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
             }
         }
 
-        this.next({ selectedIndex });
+        this.next({ selectedIndex, selectedItem });
     }
 
     private getSelectedIndex(value: any) {

frontend/app/framework/angular/modals/dialog-renderer.component.ts

@@ -40,7 +40,7 @@ export class DialogRendererComponent extends StatefulComponent<State> implements
 
     public ngOnInit() {
         this.own(
-            this.dialogView.isOpen.subscribe(isOpen => {
+            this.dialogView.isOpenChanges.subscribe(isOpen => {
                 if (!isOpen) {
                     this.finishRequest(false);
                 }

frontend/app/framework/angular/modals/modal.directive.ts

@@ -110,7 +110,7 @@ export class ModalDirective implements OnDestroy {
         if (isModel(value)) {
             this.currentModel = value;
 
-            this.eventsModel.own(value.isOpen.subscribe(isOpen => this.update(isOpen)));
+            this.eventsModel.own(value.isOpenChanges.subscribe(isOpen => this.update(isOpen)));
         } else {
             this.update(value === true);
         }

frontend/app/framework/utils/keys.ts

@@ -20,32 +20,32 @@ export module Keys {
     }
 
     export function isDelete(event: KeyboardEvent) {
-        const key = event.key || event.keyCode;
+        const key = event.key?.toUpperCase() || event.keyCode;
 
-        return key === 'Delete' || key === DELETE;
+        return key === 'DELETE' || key === DELETE;
     }
 
     export function isEnter(event: KeyboardEvent) {
-        const key = event.key || event.keyCode;
+        const key = event.key?.toUpperCase() || event.keyCode;
 
         return key === 'ENTER' || key === ENTER;
     }
 
     export function isDown(event: KeyboardEvent) {
-        const key = event.key || event.keyCode;
+        const key = event.key?.toUpperCase() || event.keyCode;
 
-        return key === 'ArrowDown' || key === DOWN;
+        return key === 'ARROWDOWN' || key === DOWN;
     }
 
     export function isUp(event: KeyboardEvent) {
-        const key = event.key || event.keyCode;
+        const key = event.key?.toUpperCase() || event.keyCode;
 
-        return key === 'ArrowUp' || key === UP;
+        return key === 'ARROWUP' || key === UP;
     }
 
     export function isEscape(event: KeyboardEvent) {
-        const key = event.key || event.keyCode;
+        const key = event.key?.toUpperCase() || event.keyCode;
 
-        return key === 'Escape' || key === 'Esc' || key === UP;
+        return key === 'ESCAPE' || key === 'ESC' || key === UP;
     }
  }

frontend/app/framework/utils/modal-view.spec.ts

@@ -110,9 +110,10 @@ describe('ModalModel', () => {
 function checkValue(modal: Openable, expected: boolean) {
     let result: boolean;
 
-    modal.isOpen.subscribe(value => {
+    modal.isOpenChanges.subscribe(value => {
         result = value;
     }).unsubscribe();
 
     expect(result!).toBe(expected);
+    expect(modal.isOpen).toBe(expected);
 }

frontend/app/framework/utils/modal-view.ts

@@ -8,16 +8,22 @@
 import { BehaviorSubject, Observable } from 'rxjs';
 
 export interface Openable {
-    isOpen: Observable<boolean>;
+    isOpenChanges: Observable<boolean>;
+
+    isOpen: boolean;
 }
 
 export class DialogModel implements Openable {
     private readonly isOpen$: BehaviorSubject<boolean>;
 
-    public get isOpen(): Observable<boolean> {
+    public get isOpenChanges(): Observable<boolean> {
         return this.isOpen$;
     }
 
+    public get isOpen(): boolean {
+        return this.isOpen$.value;
+    }
+
     constructor(isOpen = false) {
         this.isOpen$ = new BehaviorSubject<boolean>(isOpen);
     }
@@ -44,10 +50,14 @@ export class DialogModel implements Openable {
 export class ModalModel implements Openable {
     private readonly isOpen$: BehaviorSubject<boolean>;
 
-    public get isOpen(): Observable<boolean> {
+    public get isOpenChanges(): Observable<boolean> {
         return this.isOpen$;
     }
 
+    public get isOpen(): boolean {
+        return this.isOpen$.value;
+    }
+
     constructor(isOpen = false) {
         this.isOpen$ = new BehaviorSubject<boolean>(isOpen);
     }