CODEWITHSUNDEEP
polymerweb-componentpolymer-1.0
LinusK
LinusK

Reputation: 337

autofocus paper-input in a paper-dialog works only once?

<paper-dialog>
  <h2>Rename</h2>
  <div>
    <paper-input autofocus></paper-input>
  </div>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm on-click="_confirm">Rename</paper-button>
  </div>
</paper-dialog>

This paper-dialog triggers autofocus on it's paper-input only the first time you open it.

How can do trigger the focus every time you open the dialog?

Upvotes: 2

Views: 1027

Answers (2)

Kjell
Kjell

Reputation: 832

If you have a trigger function opening the dialog, you can also use code like this:

this.$.__myDialog__.open();

this.async(function() {
  this.$.__myDialog__.querySelector('[autofocus] input').focus();
});

Upvotes: 1

Kevin Ashcraft
Kevin Ashcraft

Reputation: 581

To fix the autofocusing on dialogs, I had to use an event listener and manually focus the element.

For example:

window.addEventListener('iron-overlay-opened', function(event) {
    // Grab the autofocus input
    var input = event.target.querySelector('[autofocus]');
    // Switch it because some require special treatment
    switch(input.tagName.toLowerCase()) {
        case 'input':
            input.focus();
            break;
        case 'paper-textarea':
        case 'paper-input':
            input.$.input.focus();
            break;
    }
});

Upvotes: 1

Related Questions