feat: changes the separators when the user is typing

johannesjo · Nov 6, 2024 · a6c813b · a6c813b
1 parent 1c25c7f
commit a6c813b
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/src/app/ui/chip-list-input/chip-list-input.component.ts b/src/app/ui/chip-list-input/chip-list-input.component.ts
@@ -20,6 +20,8 @@ import { map, startWith } from 'rxjs/operators';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { T } from '../../t.const';
 
+const DEFAULT_SEPARATOR_KEY_CODES: number[] = [ENTER, COMMA];
+
 interface Suggestion {
   id: string;
   title: string;
@@ -51,7 +53,7 @@ export class ChipListInputComponent implements OnDestroy {
   suggestionsIn: Suggestion[] = [];
   modelItems: Suggestion[] = [];
   inputCtrl: UntypedFormControl = new UntypedFormControl();
-  separatorKeysCodes: number[] = [ENTER, COMMA];
+  separatorKeysCodes: number[] = DEFAULT_SEPARATOR_KEY_CODES;
   isAutoFocus = false;
   @ViewChild('inputElRef', { static: true }) inputEl?: ElementRef<HTMLInputElement>;
   @ViewChild('autoElRef', { static: true }) matAutocomplete?: MatAutocomplete;
@@ -133,6 +135,8 @@ export class ChipListInputComponent implements OnDestroy {
   }
 
   triggerCtrlEnterSubmit(ev: KeyboardEvent): void {
+    this._detectKeyboardLayout(ev);
+
     if (ev.code === 'Enter' && ev.ctrlKey) {
       this.ctrlEnterSubmit.next();
     }
@@ -178,4 +182,14 @@ export class ChipListInputComponent implements OnDestroy {
         !this._modelIds.includes(suggestion.id),
     );
   }
+
+  private _detectKeyboardLayout(event: KeyboardEvent): void {
+    const isCyrillic = /^[А-яёЁ]$/.test(event.key);
+
+    if (isCyrillic) {
+      this.separatorKeysCodes = [ENTER];
+    } else {
+      this.separatorKeysCodes = DEFAULT_SEPARATOR_KEY_CODES;
+    }
+  }
 }