Polymer element blur event

Question

I am trying to see what is easy to do with polymer and am having a hard time getting the seemingly simplest events to fire.

<polymer-element name="field" attributes=" type name value">
  <template>
    <label>{{name}}
      <input  type={{type}} name={{name}} value={{value}}>
    </label>
  </template>
  <script>
    Polymer('field', {
      onblur: function () {
        console.log('blurred');
      }
    })
  </script>
</polymer-element>

I have created this element and want to do something on blur does anyone know what I am missing or where in the docs I should be looking?

Answer 1

1. name="field" doesn't match Polymer('profile-field', but I assume that's just some kind of typo.

2. blur events do not bubble, so your input blurring is not going to result in a blur event on your host element.

3. it's best not to override on<event> functions, you are better off using Polymer event binding.

I'm not sure if this is actually what you are after, but here is an example that listens to blur on the input itself.

<polymer-element name="profile-field" attributes="type name value">
  <template>
    <label>{{name}}
      <input on-blur="{{inputBlur}}" type="{{type}}" name="{{name}}" value="{{value}}">
    </label>
  </template>
  <script>
    Polymer('profile-field', {
      inputBlur: function () {
        console.log('input blurred');
      }
    })
  </script>
</polymer-element>

Answer 2

For me under Polymer 1.9.1 the blur event doesn't fire if the handler is defined with two way binding. So, I am using the on-blur="inputBlur" definition instead of on-blur="{{inputBlur}}" for blur event.

<paper-input always-float-label
                         label="Some label"
                         required
                         type="number"
                         step="1"
                         min="0"
                         max="4000"
                         value="{{someValueProp}}"        
                         on-blur="inputBlur" 
                         readonly="[[readonly]]"></paper-input>

inputBlur: function () {
     //Some code inside
},