Merge pull request #4669 from DSpace/backport-4664-to-dspace-7_x

[Port dspace-7_x] 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

@@ -22,10 +22,10 @@ import {
   mockDynamicFormValidationService
 } from '../../../../../testing/dynamic-form-mock-services';
 
-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: () => {
     }
   };
@@ -256,8 +256,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();
@@ -268,7 +268,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

@@ -180,13 +180,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();
     }