-8

My aim is to set focus on an input via the button click method.

I used a template variable, but doing it via component code seems to give the same result.

This works as expected on all devices where I tested (MacBook and some mobile devices) whatever the browser is, i.e. Safari, Chrome, Firefox, however it doesn't work on iOS supporting devices. Nothing happens.
Here is the snippet of the code which is supposed to set the focus to an input on a button click.

Important: It should be run on an iPhone or an iPad.

HTML

<input #input type="text">

<button type="button" (click)="input.focus()">Click to set focus on the input</button>

Here is a small demo for the issue.

Vega
  • 27,856
  • 27
  • 95
  • 103

1 Answers1

1

You can use the following:

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let item of [1,2,3,4]; let i = index">
      <button type="button" (click)="display(i)">Click to show and set focus</button>
      <input #theInput *ngIf="show === i" type="text" >
    </div>
  `,
})
export class App {
  show = -1; 

  @ViewChild('theInput')
  private theInput;

  constructor() {
  }

  display(i) {
    this.show = i;
    setTimeout(() => this.theInput.nativeElement.focus(), 0);
  }
}

I'm not sure if there is something more elegant than the usage of setTimeout, but since the input is only added to the DOM after the change detection which is triggered by the change of show, theInput is undefined (or the previously shown input) at that time.

Demo: http://plnkr.co/edit/A0ZO0hyuR61nUdiSvzFj?p=preview

Edit:

It turns out there is something more elegant: AfterViewChecked:

export class App {
  show = -1; 
  shouldFocus = false;

  @ViewChild('theInput')
  private theInput;

  constructor() {
  }

  display(i) {
    this.show = i;
    this.shouldFocus = true;
  }

  ngAfterViewChecked() {
    if (this.shouldFocus) {
      this.theInput.nativeElement.focus();
      this.shouldFocus = false;
    }
  }
}

See the updated demo: http://plnkr.co/edit/lXTRDGLKwkAAukEQGQjq?p=preview

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • 1
    I don't have access to any iOS browser, so I can't experiment, sorry. Try just focusing an already visible input to see if that works. Then try increasing the timeout, just in case. Try displaying thhe value of `this.theInput.nativeElement` to see if it's populated correctly. – JB Nizet Jul 03 '17 at 19:38
  • 2
    My collegue found a more elegant way. Maybe it will fix the issue on iOS. See the edited answer. – JB Nizet Jul 03 '17 at 20:38
  • The solution here is good - https://stackoverflow.com/questions/34522306/focus-on-newly-added-input-element Particularly the updated one that suggests using a directive with renderer to apply the focus rather than accessing the nativeElement directly. Using a directive, you could specify custom inputs and only watch those inputs for changes, rather than using ngAfterViewChecked, which is kind of a brute force method that is constantly being called. – diopside Aug 23 '17 at 15:00