Search code examples
event-handlingpolymerweb-component

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key


I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this.

<dom-module is="keypress-test">
<template>
<paper-input-container id="input">
     <label>Enter Should Trigger</label>
     <input is="iron-input"></input>
</paper-input-container>
<paper-input label="Enter Won't Trigger"></paper-input>
<paper-button on-tap="_test()"></paper-button>
</template>
</dom-module>

<script>
Polymer({
      is: "keypress-test",
      ready: function(){
      },
      _test: function(){
           console.log("Button Clicked")
      }
 })
 </script>

Solution

  • Use iron-a11y-keys to listen for an enter keypress

    <dom-module is="keypress-test">
    <template>
    <iron-a11y-keys target="[[_target]]" keys="enter" on-keys-pressed="_test"></iron-a11y-keys>
    <paper-input-container id="input">
         <label>Enter Will Trigger</label>
         <input is="iron-input"></input>
    </paper-input-container>
    <paper-input label="Enter Won't Trigger"></paper-input>
    </template>
    </dom-module>
    
    <script>
    Polymer({
          is: "keypress-test",
          ready: function(){
               this.set('_target', this.$.input)
          },
          _test: function(){
               console.log("Enter pressed")
          }
     })
     </script>