From 81dcfa434151b373e3f55cdb7e435a3b1d030803 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Fri, 15 Nov 2019 16:33:12 +0200
Subject: [PATCH] [ADF-4995] Metadata - edit mode cannot be access via keyboard
 (#5253)

* use keydown over keyup

* fix test

* fix tests
---
 .../card-view-textitem.component.html         |  8 +++---
 .../card-view-textitem.component.spec.ts      | 25 ++++++++++---------
 .../card-view-textitem.component.ts           |  8 ++++--
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
index 5ec01abea2..372b16b6b3 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -38,8 +38,8 @@
             <div class="adf-textitem-editable-controls">
                 <mat-form-field floatPlaceholder="never" class="adf-input-container">
                     <input *ngIf="!property.multiline" #editorInput
-                           (keyup.escape)="reset()"
-                           (keyup.enter)="update()"
+                           (keydown.escape)="reset($event)"
+                           (keydown.enter)="update($event)"
                         matInput
                         class="adf-input"
                         [placeholder]="property.default | translate"
@@ -56,7 +56,7 @@
                         (input)="onTextAreaInputChange()"
                         [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
                 </mat-form-field>
-                <button mat-icon-button class="adf-textitem-action" (click)="update()"
+                <button mat-icon-button class="adf-textitem-action" (click)="update($event)"
                     [attr.aria-label]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                     [attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
                     [attr.data-automation-id]="'card-textitem-update-' + property.key">
@@ -64,7 +64,7 @@
                     <mat-icon class="adf-textitem-icon">done</mat-icon>
                 </button>
 
-                <button mat-icon-button (click)="reset()" class="adf-textitem-action"
+                <button mat-icon-button (click)="reset($event)" class="adf-textitem-action"
                     [attr.aria-label]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                     [attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
                     [attr.data-automation-id]="'card-textitem-reset-' + property.key">
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index df34151c63..7411fd07f2 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -221,6 +221,7 @@ describe('CardViewTextItemComponent', () => {
     });
 
     describe('Update', () => {
+        const event = new MouseEvent('click');
 
         beforeEach(() => {
             component.editable = true;
@@ -234,7 +235,7 @@ describe('CardViewTextItemComponent', () => {
             spyOn(component.property, 'isValid');
             component.editedValue = 'updated-value';
 
-            component.update();
+            component.update(event);
 
             expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
         });
@@ -245,7 +246,7 @@ describe('CardViewTextItemComponent', () => {
             spyOn(cardViewUpdateService, 'update');
             component.editedValue = 'updated-value';
 
-            component.update();
+            component.update(event);
 
             expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, 'updated-value');
         });
@@ -255,7 +256,7 @@ describe('CardViewTextItemComponent', () => {
             const cardViewUpdateService = TestBed.get(CardViewUpdateService);
             spyOn(cardViewUpdateService, 'update');
 
-            component.update();
+            component.update(event);
 
             expect(cardViewUpdateService.update).not.toHaveBeenCalled();
         });
@@ -265,14 +266,14 @@ describe('CardViewTextItemComponent', () => {
             component.property.isValid = () => false;
             component.property.getValidationErrors = () => expectedErrorMessages;
 
-            component.update();
+            component.update(event);
 
             expect(component.errorMessages).toBe(expectedErrorMessages);
         });
 
         it('should update the property value after a successful update attempt', async(() => {
             component.property.isValid = () => true;
-            component.update();
+            component.update(event);
 
             fixture.whenStable().then(() => {
                 expect(component.property.value).toBe(component.editedValue);
@@ -281,7 +282,7 @@ describe('CardViewTextItemComponent', () => {
 
         it('should switch back to readonly mode after an update attempt', async(() => {
             component.property.isValid = () => true;
-            component.update();
+            component.update(event);
 
             fixture.whenStable().then(() => {
                 expect(component.inEdit).toBeFalsy();
@@ -327,7 +328,7 @@ describe('CardViewTextItemComponent', () => {
             );
 
             const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
-            editIcon.triggerEventHandler('click', null);
+            editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 
             const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -336,7 +337,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             const updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
-            updateInput.triggerEventHandler('click', null);
+            updateInput.nativeElement.dispatchEvent(new MouseEvent('click'));
         });
 
         it('should update the value using the enter key', async(() => {
@@ -355,7 +356,7 @@ describe('CardViewTextItemComponent', () => {
             );
 
             const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
-            editIcon.triggerEventHandler('click', null);
+            editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 
             const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -363,7 +364,7 @@ describe('CardViewTextItemComponent', () => {
             editInput.nativeElement.dispatchEvent(new Event('input'));
             fixture.detectChanges();
 
-            const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Enter' });
+            const enterKeyboardEvent = new KeyboardEvent('keydown', { 'key': 'Enter' });
             editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
             fixture.detectChanges();
 
@@ -378,7 +379,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
-            editIcon.triggerEventHandler('click', null);
+            editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 
             const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -386,7 +387,7 @@ describe('CardViewTextItemComponent', () => {
             editInput.nativeElement.dispatchEvent(new Event('input'));
             fixture.detectChanges();
 
-            const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Escape' });
+            const enterKeyboardEvent = new KeyboardEvent('keydown', { 'key': 'Escape' });
             editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
             fixture.detectChanges();
 
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 0ae8acd7ea..68ab80dc0d 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -84,7 +84,9 @@ export class CardViewTextItemComponent implements OnChanges {
         }, 0);
     }
 
-    reset(): void {
+    reset(event: MouseEvent|KeyboardEvent): void {
+        event.stopPropagation();
+
         this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
         this.setEditMode(false);
         this.resetErrorMessages();
@@ -94,7 +96,9 @@ export class CardViewTextItemComponent implements OnChanges {
         this.errorMessages = [];
     }
 
-    update(): void {
+    update(event: MouseEvent|KeyboardEvent): void {
+        event.stopPropagation();
+
         if (this.property.isValid(this.editedValue)) {
             const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
             this.cardViewUpdateService.update(this.property, updatedValue);