Components: How to bring focus to an md-input?

Created on 19 May 2016  路  3Comments  路  Source: angular/components

I'm having some trouble figuring out how to programmatically set focus on a <md-input> used as a search bar. My application hides the input (sets a CSS class with display:none) until the user clicks an icon indicating he'd like to perform a search. At this point, the CSS is changed (the class is removed) to reveal the input. I would like to automatically bring focus to it at this point. I've tried:

Template

<md-input [class.hidden]="searchOn" #searchbar>
<button (click)="onSearch(searchbar)">Start Search</button>

Component

onSearch(searchbar){
  searchbar.focus();  // <-- Exception. focus is not a method
  searchbar.focused = true; // <-- Exception. setting a property that has only a getter
}

How do you programmatically set focus on <md-input>?

Most helpful comment

With the focus method we can subscribe to the focus _event_, but we still can't set the focus :(

All 3 comments

A focus method has been added on master and will be in the next release. See #449

With the focus method we can subscribe to the focus _event_, but we still can't set the focus :(

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alanpurple picture alanpurple  路  3Comments

theunreal picture theunreal  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

michaelb-01 picture michaelb-01  路  3Comments

xtianus79 picture xtianus79  路  3Comments