Search code examples
javascriptinputpolymerpolymer-1.0

POLYMER: Nesting paper-input under paper-item disables spacebar

I have run into a bizarre issue with polymer. When nesting a paper-input element underneath a paper-item element, the paper-input will not register the spacebar.

Example:

<template>
    <paper-item class="to-do-item">
        <paper-checkbox active="{{done}}"></paper-checkbox>
        <paper-input id="test1" value="Test1"></paper-input>
    </paper-item>
    <paper-input id="test2" value="Test2"></paper-input>
</template>

In this example, both test1 and test2 will take input, but I can not enter spaces in test1 whereas I can enter spaces in test2. If I copy and paste a space character, it works in either input. Bizarre. Anyone know what's going on?

EDIT: The issue is consistent across devices and browsers, desktop and mobile.

Solution

  • As per the github development issue, the problem is that polymer is interpreting the space as a button click, rather than as an input. The issue is being worked on, but in the interim, commenting out the IronButtonState behavior is a feasible work around.

    behaviors: [
  Polymer.IronControlState/*,
  Polymer.IronButtonState*/
]