diff --git a/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html index 6771a4f94..b77afbe3e 100644 --- a/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html +++ b/frontend/app/features/schemas/pages/schema/fields/types/references-validation.component.html @@ -24,14 +24,14 @@
-
-
+
+
-
+
diff --git a/frontend/app/framework/angular/forms/editors/color-picker.component.ts b/frontend/app/framework/angular/forms/editors/color-picker.component.ts index b7123a3a4..77039eade 100644 --- a/frontend/app/framework/angular/forms/editors/color-picker.component.ts +++ b/frontend/app/framework/angular/forms/editors/color-picker.component.ts @@ -50,7 +50,7 @@ export class ColorPickerComponent extends StatefulControlComponent { + this.modal.isOpenChanges.subscribe(open => { if (open) { this.wasOpen = true; } else { diff --git a/frontend/app/framework/angular/forms/editors/dropdown.component.html b/frontend/app/framework/angular/forms/editors/dropdown.component.html index c8ce3fe5d..8a19ba142 100644 --- a/frontend/app/framework/angular/forms/editors/dropdown.component.html +++ b/frontend/app/framework/angular/forms/editors/dropdown.component.html @@ -4,7 +4,7 @@ autocorrect="off" autocapitalize="off"> -
+
{{selectedItem}} diff --git a/frontend/app/framework/angular/forms/editors/dropdown.component.ts b/frontend/app/framework/angular/forms/editors/dropdown.component.ts index 2405a83d4..1f7f9faeb 100644 --- a/frontend/app/framework/angular/forms/editors/dropdown.component.ts +++ b/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= items.length) { - selectedIndex = items.length - 1; - } + if (selectedIndex >= items.length) { + selectedIndex = items.length - 1; + } - const selectedItem = items[selectedIndex]; + 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 implements public ngOnInit() { this.own( - this.dialogView.isOpen.subscribe(isOpen => { + this.dialogView.isOpenChanges.subscribe(isOpen => { if (!isOpen) { this.finishRequest(false); } diff --git a/frontend/app/framework/angular/modals/modal.directive.ts b/frontend/app/framework/angular/modals/modal.directive.ts index f6ddd9778..5e988679a 100644 --- a/frontend/app/framework/angular/modals/modal.directive.ts +++ b/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); } diff --git a/frontend/app/framework/utils/keys.ts b/frontend/app/framework/utils/keys.ts index 3ef1f339b..b52e5bd48 100644 --- a/frontend/app/framework/utils/keys.ts +++ b/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; } } \ No newline at end of file diff --git a/frontend/app/framework/utils/modal-view.spec.ts b/frontend/app/framework/utils/modal-view.spec.ts index 46780c39c..84f160057 100644 --- a/frontend/app/framework/utils/modal-view.spec.ts +++ b/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); } \ No newline at end of file diff --git a/frontend/app/framework/utils/modal-view.ts b/frontend/app/framework/utils/modal-view.ts index 28c00bc64..267bed8ef 100644 --- a/frontend/app/framework/utils/modal-view.ts +++ b/frontend/app/framework/utils/modal-view.ts @@ -8,16 +8,22 @@ import { BehaviorSubject, Observable } from 'rxjs'; export interface Openable { - isOpen: Observable; + isOpenChanges: Observable; + + isOpen: boolean; } export class DialogModel implements Openable { private readonly isOpen$: BehaviorSubject; - public get isOpen(): Observable { + public get isOpenChanges(): Observable { return this.isOpen$; } + public get isOpen(): boolean { + return this.isOpen$.value; + } + constructor(isOpen = false) { this.isOpen$ = new BehaviorSubject(isOpen); } @@ -44,10 +50,14 @@ export class DialogModel implements Openable { export class ModalModel implements Openable { private readonly isOpen$: BehaviorSubject; - public get isOpen(): Observable { + public get isOpenChanges(): Observable { return this.isOpen$; } + public get isOpen(): boolean { + return this.isOpen$.value; + } + constructor(isOpen = false) { this.isOpen$ = new BehaviorSubject(isOpen); }