diff --git a/tabby-core/src/components/selectorModal.component.ts b/tabby-core/src/components/selectorModal.component.ts index a1160cc92d..19182caf0c 100644 --- a/tabby-core/src/components/selectorModal.component.ts +++ b/tabby-core/src/components/selectorModal.component.ts @@ -18,17 +18,18 @@ export class SelectorModalComponent { @Input() selectedIndex = 0 hasGroups = false @ViewChildren('item') itemChildren: QueryList + private preventEdit: boolean - constructor ( - public modalInstance: NgbActiveModal, - ) { } + constructor (public modalInstance: NgbActiveModal) { + this.preventEdit = false + } ngOnInit (): void { this.onFilterChange() this.hasGroups = this.options.some(x => x.group) } - @HostListener('keydown', ['$event']) onKeyUp (event: KeyboardEvent): void { + @HostListener('keydown', ['$event']) onKeyDown (event: KeyboardEvent): void { if (event.key === 'Escape') { this.close() } else if (this.filteredOptions.length > 0) { @@ -46,10 +47,14 @@ export class SelectorModalComponent { event.preventDefault() } else if (event.key === 'Enter') { this.selectOption(this.filteredOptions[this.selectedIndex]) - } else if (event.key === 'Backspace' && this.canEditSelected()) { - event.preventDefault() - this.filter = this.filteredOptions[this.selectedIndex].freeInputEquivalent! - this.onFilterChange() + } else if (event.key === 'Backspace' && !this.preventEdit) { + if (this.canEditSelected()) { + event.preventDefault() + this.filter = this.filteredOptions[this.selectedIndex].freeInputEquivalent! + this.onFilterChange() + } else { + this.preventEdit = true + } } this.selectedIndex = (this.selectedIndex + this.filteredOptions.length) % this.filteredOptions.length @@ -61,6 +66,12 @@ export class SelectorModalComponent { } } + @HostListener('keyup', ['$event']) onKeyUp (event: KeyboardEvent): void { + if (event.key === 'Backspace' && this.preventEdit) { + this.preventEdit = false + } + } + onFilterChange (): void { const f = this.filter.trim().toLowerCase() if (!f) {