Merge pull request #4664 from kshepherd/split_dynamic_tags_on_keychars

Inspect event key characters, not keyCodes on tag keyUp for dynamic tag input

Author: artlowel

src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts

@@ -45,10 +45,10 @@ import { FormFieldMetadataValueObject } from '../../../models/form-field-metadat
 import { DsDynamicTagComponent } from './dynamic-tag.component';
 import { DynamicTagModel } from './dynamic-tag.model';
 
-function createKeyUpEvent(key: number) {
+function createKeyUpEvent(key: string) {
   /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
   const event = {
-    keyCode: key, preventDefault: () => {
+    key: key, preventDefault: () => {
     }, stopPropagation: () => {
     },
   };
@@ -278,8 +278,8 @@ describe('DsDynamicTagComponent test suite', () => {
         expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
       });
 
-      it('should add an item on ENTER or key press is \',\' or \';\'', fakeAsync(() => {
-        let event = createKeyUpEvent(13);
+      it('should add an item on ENTER or key press is \',\'', fakeAsync(() => {
+        let event = createKeyUpEvent('Enter');
         tagComp.currentValue = 'test value';
 
         tagFixture.detectChanges();
@@ -290,7 +290,7 @@ describe('DsDynamicTagComponent test suite', () => {
         expect(tagComp.model.value).toEqual(['test value']);
         expect(tagComp.currentValue).toBeNull();
 
-        event = createKeyUpEvent(188);
+        event = createKeyUpEvent(',');
         tagComp.currentValue = 'test value';
 
         tagFixture.detectChanges();

src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts

@@ -219,13 +219,15 @@ export class DsDynamicTagComponent extends DsDynamicVocabularyComponent implemen
   }
 
   /**
-   * Add a new tag with typed text when typing 'Enter' or ',' or ';'
+   * Add a new tag with typed text when typing 'Enter' or ','
+   * Tests the key rather than keyCode as keyCodes can vary
+   * based on keyboard layout (and do not consider Shift mod)
    * @param event the keyUp event
    */
   onKeyUp(event) {
-    if (event.keyCode === 13 || event.keyCode === 188) {
+    if (event.key === 'Enter' || event.key === ',') {
       event.preventDefault();
-      // Key: 'Enter' or ',' or ';'
+      // Key: 'Enter' or ','
       this.addTagsToChips();
       event.stopPropagation();
     }