paper-input underline breaks if a paper-dialog is opened as an on-focus event

[ebidel]

From @ianbitts on November 30, 2015 15:38

The animated underline of a paper-input element becomes becomes stuck in the "focused" state if a paper-dialog is toggled as an on-focus event of the paper-input element.

Example code:

<paper-input id="myInput" on-focus="_toggleDialog"></paper-input>
<paper-input id="myOtherInput"></paper-input>
<paper-dialog id="myDialog></paper-dialog>
<script>
_toggleDialog: function() {
    this.$.myDialog.toggle();   
}
</script>

Copied from original issue: Polymer/polymer#3104

[notwaldorf]

I think this is happening because the dialog doesn't take the focus away from whatever is being focused. Here's a jsbin with the repro steps:http://jsbin.com/vuhekex/12/edit?html

/cc-ing @valdrinkoshi since he's looked at paper-dialog recently, and might have a better idea about what's going on.

[valdrinkoshi]

Hi @ianbitts, when you click on an element, first the event focus is triggered, then click. paper-dialog will capture click events and call cancel (aka close the dialog) if the click is outside the dialog. That's why the click on the input (or on any element for that matter) is closing the dialog.

In this jsbin I'm delaying the opening of the dialog and stopping the click event propagation: http://jsbin.com/tahido/5/edit?html,console,output

<paper-input id="myInput" on-focus="_toggleDialog" on-click="_onClick"></paper-input>
<paper-dialog id="myDialog"></paper-dialog>
<script>
_toggleDialog: function() {
    this.$.myDialog.async(this.$.myDialog.open, 1);   
},
_onClick: function(e) {
   e.stopPropagation();
}
</script>

Consider also using the element paper-toast if your use case is to only show a message (in the jsbin as well) Notice that i used open() instead of toggle() since there are 2 focus events when we Tab to a paper-input (instead of only 1) - toggle would be called twice.

@notwaldorf, when we Tab through paper-inputs we get 2 focus events, while on a native input only one. Shift+Tab instead triggers only 1 focus event. Could you check this? http://jsbin.com/leqili/edit?html,output

[notwaldorf]

@valdrinkoshi I think you only get the two events in the shady DOM, because you get one from the paper-input, and one from the embedded input, which bubbles up. If you change it to the shadow DOM (http://jsbin.com/bowoba/edit?html,console,output), you only get the one event you expect.

[notwaldorf]

@valdrinkoshi I think the original question wasn't about why the dialog closes if you try to open it by clicking on the input, it's rather why when the dialog is opened, the paper-input still looks focused (since the paper-dialog is the one that has focus)

[valdrinkoshi]

@notwaldorf seems like focused doesn't get updated properly (see the logs) http://jsbin.com/dabove/1/edit?html,console,output If I set it imperatively it works with Tab:

myInput._setFocused(false);
myDialog.open();

But with click it doesn't, because the internal paper-input-container's focused will still be true..