Search code examples
polymerweb-componentpolymer-1.0

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?


Solution

  • 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;
        }
    });