Bind jQuery Keypress() to Polymer paper-input

Question

I'm using the Polymer framework for a site I'm working on, and I want to bind jQuery's keypress() to a Polymer <paper-input> element. I tried binding it directly to the element, via

HTML

<paper-input id="whatever" label="Example"></paper-input>

Javascript

$("#whatever").keypress(function(){
     console.log("It worked!");
});

I'm aware of the fact that Polymer uses shadow DOM elements, and so the <input> tag is seperate from the actual <paper-input> tag.

One approach would be something like $("#whatever").children() and somehow filter for an <input> tag, but I feel that is not the best practice for Polymer.

Either way, I need some way of binding that keypress event to the input.

Answer 1

A bit late, but I did had the same issues with web component tester. It turns out Polymer now has a neat component iron-test-helpers which contains a script mock-interactions.js

Use keyEventOn like so:

Javascript

MockInteractions.keyEventOn(
    Polymer.dom(myEl.root).querySelector('#filter-input'), 'keypress', 13);

for firing an keypress event with keycode 13 to the paper input with id 'filter-input'