change to blur event and add trackby function

puzzle · Mar 25, 2024 · 156fab0 · 156fab0
1 parent 820b89b
commit 156fab0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/frontend/src/app/action-plan/action-plan.component.html b/frontend/src/app/action-plan/action-plan.component.html
@@ -9,7 +9,7 @@
     (cdkDropListDropped)="drop($event)"
     id="actionlist"
   >
-    <div class="action-point-item" *ngFor="let action of (control | async)!; index as i" cdkDrag>
+    <div class="action-point-item" *ngFor="let action of (control | async)!; index as i; trackBy: trackByFn" cdkDrag>
       <div class="drag-drop-dots">
         <img
           class="icons"
@@ -25,7 +25,7 @@
         (focusin)="activeItem = i"
         class="action-input"
         [value]="action.action"
-        (input)="changeActionText($event, i)"
+        (blur)="changeActionText($event, i)"
         [attr.data-testId]="'actionInput'"
       />
       <img

diff --git a/frontend/src/app/action-plan/action-plan.component.ts b/frontend/src/app/action-plan/action-plan.component.ts
@@ -5,7 +5,7 @@ import { ActionService } from '../shared/services/action.service';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../shared/dialog/confirm-dialog/confirm-dialog.component';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { isMobileDevice } from '../shared/common';
+import { isMobileDevice, trackByFn } from '../shared/common';
 import { CONFIRM_DIALOG_WIDTH } from '../shared/constantLibary';
 
 @Component({
@@ -85,7 +85,7 @@ export class ActionPlanComponent implements AfterViewInit {
   }
 
   changeActionText(event: any, index: number) {
-    const actions = Object.values(this.control.getValue()!);
+    const actions = this.control.getValue()!;
     actions[index] = { ...actions[index], action: event.target.value! };
     this.control.next(actions);
   }
@@ -156,4 +156,6 @@ export class ActionPlanComponent implements AfterViewInit {
   preventAddingNewItems(event: Event) {
     event.preventDefault();
   }
+
+  protected readonly trackByFn = trackByFn;
 }