How to focus a paper-input with Polymer 1.9.1?

Question

I need to focus paper input in a paper dialog box. I have tried all available solution but nothing is working.

this.$.homeSearch.$.input.focus();

this is my markaup

<paper-input  id="homeSearch" class="home-search-btn" placeholder="Where do you want to go?" no-label-float value="{{searchText}}">

</paper-input>

I don't want autofocus when page load. I need to fire focus event from a method.

score 1 · Accepted Answer · answered May 22 '17 at 05:38

1

Instead of

this.$.homeSearch.$.input.focus();

, you can do

this.$.homeSearch.focus();

instead. paper-input inherits from HTMLElement by default so it already has a focus method built-in.

answered May 22 '17 at 05:38

Neil John Ramal

This solution works on paper input but I used the paper input in a paper-dialog. I want to focus the input when dialog is open. I have a method openDialog: function() {this.$.animated.open(); this.$.homeSearch.focus();} but it doesn't focus. – aaron May 22 '17 at 07:10
@aaron it doesn't focus because of render time propably. Just to test it, set for example 2 seconds timeout before calling `this.$.homeSearch.focus()`. if it works, then you can try paper-dialog event `iron-overlay-opened` or `Polymer.renderStatus.afterNextRender`. i haven't tested it. – Kuba Šimonovský May 22 '17 at 07:42

1 Answers1