CODEWITHSUNDEEP
angular
Arturs Soms
Arturs Soms

Reputation: 489

Angular 2 focus doesn't work if I don't use timeout

As you can see i'm using setTimeout if i'm planning to focus my input. If i remove setTimeout focus doesn't work. 

  <div [hidden]="searchInputHidden">
        <input (blur)="hideInput()" #term (keyup)="search(term.value)" type="text" class="inp_top" name="product_name" id="product_name" />
  </div>  


private showSearchInput(term) {
    this.searchInputHidden = false;
    setTimeout(function(){
      term.focus();
    }, 100);
  }

Upvotes: 13

Views: 6781

Answers (2)

Thu Rein
Thu Rein

Reputation: 127

Probably you could try something like this:

<div class="row col-md-12" [hidden]="messagehide">
{{_result.msgDesc}}
</div>
`this.messagehide=false;
 this.messagealert();   
 messagealert(){
 setTimeout(function() {
 this.messagehide=true;          
 },3000);
 }`

My settimeout function also didn't work . let me know.

Upvotes: -2

Mark Rajcok
Mark Rajcok

Reputation: 364697

The timeout is required because you can't focus() an element that is still hidden. Until Angular change detection has a chance to run (which will be after method showSearchInput() finishes executing), the hidden property in the DOM will not be updated, even though you set searchInputHidden to false in your method.

A setTimeout() with a value of 0 (or no value, which defaults to 0) should work. You just need to set the focus after Angular gets a chance to update the hidden property value.

Note that after the setTimeout() callback function finishes executing, change detection will run again (because Angular monkey-patches all setTimeout() calls that are made in the Angular zone). Since the only thing we are changing in our asynchronous callback function is the focus, we can be more efficient and run our callback function outside the Angular zone, to avoid the additional change detection cycle:

private showSearchInput(term) {
  this.searchInputHidden = false;
  this._ngZone.runOutsideAngular(() => { 
    setTimeout(() => term.focus());
  });
}

Note that you'll have to inject NgZone into your constructor for the above code to work:

export class YourComponent {
   constructor(private _ngZone: NgZone) {}

Upvotes: 26

Related Questions