CODEWITHSUNDEEP
event-handlingpolymerweb-component
davidbates
davidbates

Reputation: 1792

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>

Upvotes: 0

Views: 1071

Answers (1)

miyamoto
miyamoto

Reputation: 1540

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>

Upvotes: 1

Related Questions