How to close editing of a text input when an alertcontroller comes up

#1

I am using Ionic 3 for a desktop app. I have a page with a list. The user can edit an entry on the list by clicking the edit button by the text input. The user can also add an item to the list by clicking on the Add button above the list. When the Add button is clicked, an Alertcontroller appears. However, if the Edit button on a list item was clicked before clicking the add button and had not been cancelled or saved, then when you close the alertcontroller the edit field on the list item is still open. How do I get the editing of the list item to close without saving changes when the alertcontroller pops up?

Here is what I think is the relevant code:

settings.ts

    addTapped(event, cell, rowIndex) {
        const prompt = this.alertCtrl.create({
          title: "Add " + this.selectedItem.label.slice(0, 
this.selectedItem.label.length-this.selectedItem.trimSingle),
          cssClass: 'buttonCss',
          enableBackdropDismiss: false,
          inputs: [
            {
              name: 'name',
            }
          ],

          buttons: [

            {
              text: 'Cancel',
              cssClass: 'item-button button button-md button-outline button-outline-md'
            },
            {
              text: 'Save',
              handler: data => {
                this.saveNewRow(data);
              },
              cssClass: 'buttonColor item-button button button-md button-default button-default-md button-md-pm-yellow'

            },

          ],

        });
        prompt.present();
        console.log("You clicked on a detail.");
      }

    saveNewRow(data) {
        this.selectedItem.service.findOne({order: "id DESC"}).subscribe(result => {
          console.log('The result is ', result);
          this.editRowId = result.id+1;
          this.editRowData = { id: this.editRowId, name: data.name };
          console.log('editRowData is ', this.editRowData);
          this.selectedItem.service.create(this.editRowData).subscribe(result => {
            this.refreshRows();
          }, error => {
            console.log(error);
            const noSaveNewRow = this.alertCtrl.create({
              title: 'Unable to save ' + this.editRowData + ' new row.',
              buttons: [
                {
                  text: 'Dismiss',
                  cssClass: 'item-button button button-md button-outline button-outline-md'
                }
              ]
            });
            noSaveNewRow.present();
          })
        }, error => {
          console.log(error);
          const noSaveNewRow = this.alertCtrl.create({
            title: 'Unable to save ' + this.editRowData + ' as new row.',
            buttons: [
              {
                text: 'Dismiss',
                cssClass: 'item-button button button-md button-outline button-outline-md'
              }
            ]
          });
          noSaveNewRow.present();
        })
      }

    saveRow(name) {
        let newName = name.nativeElement.value;  
        if (newName !== this.editRowData["name"]) {
          this.editRowData["name"] = newName;
          this.selectedItem.service.updateAttributes(this.editRowData["id"], this.editRowData).subscribe(result => {
            let rows = this.rows;
            this.editRowIndex = null;
            this.rows = [...this.rows];
          }, error => {
            console.log(error);
            const noSaveRow = this.alertCtrl.create({
              title: 'Unable to change row name to ' + this.name + '.',
              buttons: [
                {
                  text: 'Dismiss',
                  cssClass: 'item-button button button-md button-outline button-outline-md'
                }
              ]
            });
            noSaveRow.present();
          });
        }
      }

      editRow(rowIndex) {
        this.editRowData = this.rows[rowIndex];
        this.editRowId = this.rows[rowIndex].id;
        this.editRowName = this.rows[rowIndex].name;
        this.editRowIndex = rowIndex;
        setTimeout(() => this.name.nativeElement.focus(), 50);
      }

      cancelEditRow(rowIndex) {
        this.rows[rowIndex].name = this.editRowName;
        this.editRowIndex = null;
      }

settings.html

    <ion-list inset>
        <ion-list-header>
            <div style="vertical-align: top;">
                <span class="settingsHeader">{{ selectedItem.label }}</span>
                <button ion-button color="pm-yellow" (click)="addTapped($event, item)">Add</button>
                <button ion-button outline (click)="cancelTapped()">Cancel</button>
            </div>
        </ion-list-header>
        <ion-card>
            <ion-card-content>
                <ngx-datatable #mydatatable class="ngx-datatable bootstrap material expandable" 
                columnMode="flex" [headerHeight]="50" [footerHeight]="0" [rowHeight]="50" [scrollbarH]="false" 
                [scrollbarV]="true" [rowHeight]="50" [summaryRow]="false" [summaryPosition]="'bottom'" 
                [loadingIndicator]="loading" [rows]="rows" [columns]="columns">
                    <div>
                        <ngx-datatable-column name="ID" [flexGrow]=".25"></ngx-datatable-column>
                        <ngx-datatable-column name="Name"  [flexGrow]="3">
                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" 
                      let-row="row">
                                <span *ngIf="editRowIndex != rowIndex">
                        {{ value }}
                                </span>
                                <input type="text" #name                          
                      *ngIf="editRowIndex === rowIndex"                          
                      [value]="value"
                        />
                            </ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column name="Edit" prop="Edit" [flexGrow]="1.75">
                            <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
                                <span class="mobile-hidden"></span>
                            </ng-template>
                            <ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                                <span class="mobile-hidden button-spacing">
                                    <button ion-button small *ngIf="editRowIndex !== rowIndex" 
                        (click)="editRow(rowIndex)">Edit</button>
                                    <button ion-button small outline *ngIf="editRowIndex !== rowIndex" 
                        (click)="deleteRow(rowIndex)">Delete</button>
                                    <button ion-button color="pm-yellow" small *ngIf="editRowIndex === rowIndex" 
                        (click)="saveRow(name)">Save</button>
                                    <button ion-button outline small *ngIf="editRowIndex === rowIndex" 
                        (click) = "cancelEditRow(rowIndex)">Cancel</button>
                                </span>
                            </ng-template>
                        </ngx-datatable-column>
                    </div>
                </ngx-datatable>
            </ion-card-content>
        </ion-card>
    </ion-list>
#2

Never mind. I figured it out.