From 46ecc7bf80d41f05c643c0345a6c0d494035384f Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 26 Feb 2019 07:36:04 -0700
Subject: [PATCH] SHIBUI: Fixed issue with wrong item being displayed in array
 properties

---
 ui/src/app/schema-form/widget/array/array.component.html | 6 +++---
 ui/src/app/schema-form/widget/array/array.component.ts   | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
index 93fd94525..253fa2af4 100644
--- a/ui/src/app/schema-form/widget/array/array.component.html
+++ b/ui/src/app/schema-form/widget/array/array.component.html
@@ -22,7 +22,7 @@
     <ul class="mt-2"
         [ngClass]="{'bg-light border rounded p-3 list-group': getListType(formProperty) === 'object'}"
         [class.no-style]="getListType(formProperty) !== 'object'">
-        <li *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex"
+        <li *ngFor="let itemProperty of formProperty.properties; let i=index;"
             [class.mt-2]="i > 0"
             [class.list-group-item]="itemProperty.type === 'object'">
             <div [ngClass]="{ 'd-flex justify-content-between': itemProperty.type !== 'object' }">
@@ -30,7 +30,7 @@
                     <ng-container *ngSwitchDefault>
                         <sf-form-element class="flex-grow-1" [formProperty]="itemProperty"></sf-form-element>
                         <div class="py-2">
-                            <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
+                            <button class="btn btn-link pt-1" (click)="removeItem(i, itemProperty); $event.stopPropagation()" role="button">
                                 <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
                                 <span class="sr-only" translate="action.remove">Remove</span>
                             </button>
@@ -48,7 +48,7 @@
                                         <small class="sr-only" *ngIf="itemProperty.value.makeDefault === true" translate="label.default">(default)</small>
                                     </ng-container>
                                 </span>
-                                <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
+                                <button class="btn btn-link pt-1" (click)="removeItem(i, itemProperty); $event.stopPropagation()" role="button">
                                     <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
                                     <span class="sr-only" translate="action.remove">Remove</span>
                                 </button>
diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
index d527bd0b2..698500fca 100644
--- a/ui/src/app/schema-form/widget/array/array.component.ts
+++ b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -3,6 +3,7 @@ import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { ArrayWidget } from 'ngx-schema-form';
 import { map } from 'rxjs/operators';
 import { Observable, Subscription } from 'rxjs';
+import { FormProperty } from 'ngx-schema-form/lib/model/formproperty';
 
 export interface FormError {
     code: string;
@@ -42,6 +43,11 @@ export class CustomArrayComponent extends ArrayWidget implements AfterViewInit,
         this.hasErrorSub.unsubscribe();
     }
 
+    removeItem(index: number, item: FormProperty = null): void {
+        this.formProperty.properties = (<FormProperty[]>this.formProperty.properties).filter(i => i !== item);
+        this.formProperty.updateValueAndValidity(false, true);
+    }
+
     addItem(): void {
         super.addItem();
     }