Search code examples
polymerbowerweb-componentpaper-elements

Polymer paper-input not working


I´m a polymer beginner. I´ve installed Polymer v1.7, and i´m trying to build a simple form. In my application tried to put a paper-input, but is not displayed at all. Checking the DOM, noticed the element is there, but is not rendered. And, in the console some paper related messages are shown. I´ve decided to build a completely new basic project just for testing that single element, but again, the element is not working and the messages persist.

My current code is:

bower.json

{
    "name": "test001",  
    "main": "index.html",  
    "dependencies": {  
        "polymer": "Polymer/polymer#^1.4.0",  
        "iron-elements": "PolymerElements/iron-elements#^1.0.10",  
        "iron-form": "PolymerElements/iron-form#^1.1.4",  
        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",  
        "paper-elements": "PolymerElements/paper-elements#^1.0.7"  
    },  
    "devDependencies": {  
        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",  
        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",  
        "web-component-tester": "^4.0.0",  
        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"  
    }  
}

test001-app:

<link rel="import" href="../../bower_components/polymer/polymer.html">  
<link rel="import" href="../../bower_components/paper-input">  
<dom-module id="test001-app">  
    <template>  
        <style>  
            :host {  
            display: block;  
            }  
        </style>  
        <h2>Hello [[prop1]]</h2>  
        <paper-input label="Etiqueta"></paper-input>  
    </template>  
    <script>  
        Polymer({  
           is: 'test001-app',  
           properties: {  
               prop1: {  
                   type: String,  
                   value: 'test001-app',  
               },  
           },  
        });  
    </script>  
</dom-module>

console messages:

Behavior Polymer.IronA11yKeysBehavior not found when mixing properties into paper-input! docs.js:126

Behavior Polymer.IronFormElementBehavior not found when mixing properties into paper-input! docs.js:126

Behavior Polymer.IronFormElementBehavior not found when mixing properties into paper-textarea! docs.js:126

Behavior Polymer.IronA11yKeysBehavior not found when mixing properties into Polymer.PaperInputBehavior!

I tried putting some content between open and close paper tag (ie: abc) and is displayed, but not as input element (just as a basic text)


Solution

  • Your HTML import for <paper-input> is incorrect:

    <!-- wrong -->
    <link rel="import" href="../../bower_components/paper-input">
    

    It should be:

    <link rel="import" href="../../bower_components/paper-input/paper-input.html">