Set focus on an input that is in a nested for loop when a button is clicked

@trfletch wrote:

I have a nested for loop and I want to have a hidden input that is only shown when a button is clicked, I also then want the input that is shown to get focus and the keyboard to show. Is there anyway to achieve this?

So far I have the following HTML:

 <ion-list class="checklists">
    <div class="checklist" *ngFor="let checklist of checklists">
      <h2>{{checklist.Name}}</h2>

      <div class="checklistItem" *ngFor="let item of checklist.ChecklistItems">
        <ion-grid>
          <ion-row>
            <ion-col class="checkboxCol">
              <ion-item text-wrap no-padding no-lines>
                <ion-label>{{item.Name}}</ion-label>
                <ion-checkbox [(ngModel)]="item.Checked"></ion-checkbox>
              </ion-item>
            </ion-col>
            <ion-col class="addNoteCol">
              <button ion-button clear (click)="addNote(checklist, item)">Add note</button>
            </ion-col>
          </ion-row>
          <ion-row *ngIf="item.ShowNotes" class="notesRow">
            <ion-col>
              <ion-item no-padding no-lines>
                <ion-input [(ngModel)]="item.Notes" placeholder="Notes"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>

    </div>
  </ion-list>

I have the following in my controller which shows the correct input when the “Add notes” button is clicked but I do not know how to get it to then focus on that input:

    addNote(checklist, item) {

      // Get checklist
      var checklistToEdit = _.find(this.checklists, { Id: checklist.Id });

      // Get checklist item
      var itemToEdit = _.find(checklistToEdit.ChecklistItems, { Id: item.Id });

      itemToEdit.ShowNotes = true;

    }

Can anyone help with this situation? Is this even possible?

Posts: 1

Participants: 1

Read full topic