Zero becomes blank if type="number"

masaoliou commented 9 years ago

I need to show 0 when the value is zero. Is this a feature or am I missing any <iron-input> attribute?

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="proto-element">
    <template>
        <template is="dom-repeat" items="{{ages}}" as="age">
            <input is="iron-input" type="number" bind-value="{{age}}">
        </template>
    </template>
</dom-module>
<script>
    Polymer({
        is: "proto-element",
        properties:{
            ages:{
                type:Array,
                value:function(){ return [1,4,0,5]; }
            }
        }
    });
</script>

fasfsfgs commented 9 years ago

Stumbled on this bug as well.

This happens when you bind a javascript variable of type number, which makes total sense since you are using <input type="number">. If you use string, the bug doesn't happen.

It's probably related to the bind variable becoming string when the binding happens.

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

<dom-module id="my-example">

    <template>
        <input id="example" type="number" is="iron-input" bind-value="{{example}}" on-change="onInputChange">
    </template>

    <script>
        Polymer({
            is: "my-example",

            ready: function () {
                this.example = 1;
                console.log(typeof this.example); // number !!!
            },

            onInputChange: function () {
                console.log(typeof this.example); // string !!!
            }
        });
    </script>

</dom-module>

notwaldorf commented 9 years ago

This has already been fixed

PolymerElements / iron-input

Zero becomes blank if type="number" #37