CODEWITHSUNDEEP
polymer
Dan Baker
Dan Baker

Reputation: 1827

Polymer element blur event

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?

Upvotes: 2

Views: 5841

Answers (2)

Taras Pelenio
Taras Pelenio

Reputation: 73

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
},

Upvotes: 1

Scott Miles
Scott Miles

Reputation: 11027

  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>

Upvotes: 7

Related Questions