Event on-blur doesn't work

[ghost]

I've got this element:

<link rel="import" href="../bower_components/paper-menu/paper-menu.html">                                                                                                                                                                                                 
<link rel="import" href="../bower_components/paper-item/paper-item.html">                                                                                                                                                                                                 

<dom-module id='test-element'>                                                                                                                                                                                                                                            
  <template>                                                                                                                                                                                                                                                              
    <input id='first'>                                                                                                                                                                                                                                                    
    <input id='second' on-blur='xxx' />                                                                                                                                                                                                                                   
    <input id='third'>                                                                                                                                                                                                                                                    
    <paper-menu id='fourth' on-blur='xxx'>                                                                                                                                                                                                                                
      <paper-item>Item 1</paper-item>                                                                                                                                                                                                                                     
    </paper-menu>                                                                                                                                                                                                                                                         
    <input id='fifth'>                                                                                                                                                                                                                                                    
  </template>                                                                                                                                                                                                                                                             

  <script>                                                                                                                                                                                                                                                                
    Polymer({                                                                                                                                                                                                                                                             
      is: "test-element",                                                                                                                                                                                                                                                 
      properties: {                                                                                                                                                                                                                                                       
        badgesData: {                                                                                                                                                                                                                                                     
          type: Array,                                                                                                                                                                                                                                                    
          value: function(){return [];}                                                                                                                                                                                                                                   
        }                                                                                                                                                                                                                                                                 
      },                                                                                                                                                                                                                                                                  
      xxx: function(evt, obj) {                                                                                                                                                                                                                                           
        console.log('xxx', evt, obj, evt.type, evt.target);                                                                                                                                                                                                               
      },                                                                                                                                                                                                                                                                  
      ready: function() {                                                                                                                                                                                                                                                 
      }                                                                                                                                                                                                                                                                   
    });                                                                                                                                                                                                                                                                   
  </script>                                                                                                                                                                                                                                                               
</dom-module>

Steps:

1. focus on input#first, tab pressed -> nothing
2. focus on input#second, tab pressed -> FocusEvent {isTrusted: true} 0 blur
3. focus on input#third, tab pressed -> FocusEvent {isTrusted: true} 0 blur
4. focus on input#fourth, tab pressed -> nothing

Expected:

3. focus on input#third, tab pressed -> nothing
4. focus on input#fourth, tab pressed -> FocusEvent {isTrusted: true} 0 blur

[kevinpschaaf]

What you are seeing is the result of the blur event (along with focus) being a non-bubbling event per the HTML spec; as such you cannot use event delegation to capture focus leaving the paper-item from a parent container.

Here is a jsBin showing your expected behavior without relying on event delegation: http://jsbin.com/koloteqabo/edit?html,console,output

[ghost]

Great explanation and solution, thank you.