fix(core): selector prevent edit selection on keydown

Eugeny · Sep 10, 2023 · 651861c · 651861c
1 parent 3ce2bb6
commit 651861c
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/tabby-core/src/components/selectorModal.component.ts b/tabby-core/src/components/selectorModal.component.ts
@@ -18,17 +18,18 @@ export class SelectorModalComponent<T> {
     @Input() selectedIndex = 0
     hasGroups = false
     @ViewChildren('item') itemChildren: QueryList<ElementRef>
+    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<T> {
                 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<T> {
         }
     }
 
+    @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) {