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
This commit is contained in:
Art Lowel
2025-09-04 17:38:01 +02:00
committed by GitHub
2 changed files with 10 additions and 8 deletions

View File

@@ -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();

View File

@@ -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();
}