IronControlState _focusBlurHandler not handling focus events of slotted elements.

[gowtham-D]

Description

In Polymer 3 , when a component using iron-control-state behavior has a slotted component that raises a 'focus' event, the parent component's focused property is set. This traps the focus on the _focusableElement in components using paper-input-behavior like 'paper-input'.

Example :

<paper-input label="username">
  <paper-icon-button slot="suffix" icon="clear"></paper-icon-button>
</paper-input>

The user is not able to move the focus to the paper-icon-button using the tab key, as the 'input' gets focused due paper-input-behavior.

Fix could involve checking the event.target before updating the focused property of the component.

_focusBlurHandler: function(event) {
   // Polymer takes care of retargeting events in shadowRoot.
   if(event.target === this){
      this._setFocused(event.type === 'focus');
   }
   return;
}

This issue seems to be the cause of paper-input issue #631.

Expected outcome

Slotted element's focus and blur events should not affect the component.

Actual outcome

Slotted element's 'focus' event sets focused property in the component.

Live Demo

Paper input demo page. Section Inputs can have prefixes and suffixes

Steps to reproduce

Available in paper-input issue #631.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10