Merge pull request #243 from PolymerElements/fix-prefilled-prefix-label

fix prefix even moar better

Author: notwaldorf

bower.json

@@ -27,7 +27,7 @@
   "homepage": "https://github.com/PolymerElements/paper-input",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
+    "polymer": "Polymer/polymer#^1.1.0",
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",

paper-input-container.html

@@ -461,21 +461,6 @@
       } else {
         this._handleValue(this._inputElement);
       }
-
-      this._numberOfPrefixNodes = 0;
-      this._prefixObserver = Polymer.dom(this.$.prefix).observeNodes(
-          function(mutations) {
-            // Keep track whether there's at least one prefix node, since it
-            // affects laying out the floating label.
-            this._numberOfPrefixNodes += mutations.addedNodes.length -
-                mutations.removedNodes.length;
-          }.bind(this));
-    },
-
-    detached: function() {
-      if (this._prefixObserver) {
-        Polymer.dom(this.$.prefix).unobserveNodes(this._prefixObserver);
-      }
     },
 
     _onAddonAttached: function(event) {
@@ -567,16 +552,15 @@
 
         if (alwaysFloatLabel || _inputHasContent) {
           cls += ' label-is-floating';
+          // If the label is floating, ignore any offsets that may have been
+          // applied from a prefix element.
+          this.$.labelAndInputContainer.style.position = 'static';
+
           if (invalid) {
             cls += ' is-invalid';
           } else if (focused) {
             cls += " label-is-highlighted";
           }
-          // If a prefix element exists, the label has a horizontal offset
-          // which needs to be undone when displayed as a floating label.
-          if (this._numberOfPrefixNodes > 0) {
-            this.$.labelAndInputContainer.style.position = 'static';
-          }
         } else {
           // When the label is not floating, it should overlap the input element.
           if (label) {

test/paper-input-container.html

@@ -40,6 +40,26 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="prefix">
+    <template>
+      <paper-input-container>
+        <div prefix>$</div>
+        <label id="l">label</label>
+        <input is="iron-input" id="i">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="prefix-has-value">
+    <template>
+      <paper-input-container>
+        <div prefix>$</div>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" value="foo">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
   <test-fixture id="has-value">
     <template>
       <paper-input-container>
@@ -119,9 +139,12 @@
         assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
       });
 
-      test('label is floated if value is initialized to not null', function() {
+      test('label is floated if value is initialized to not null', function(done) {
         var container = fixture('has-value');
-        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+        requestAnimationFrame(function() {
+          assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+          done();
+        });
       });
 
       test('label is invisible if no-label-float and value is initialized to not null', function() {
@@ -132,7 +155,36 @@
       test('label is floated if always-float-label is true', function() {
         var container = fixture('always-float');
         assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
-      })
+      });
+
+      test('label is floated correctly with a prefix', function(done) {
+        var container = fixture('prefix');
+        var label = Polymer.dom(container).querySelector('#l');
+        var input = Polymer.dom(container).querySelector('#i');
+
+        // Label is initially visible.
+        assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible');
+
+        // After entering text, the label floats, and it is not indented.
+        input.bindValue = 'foobar';
+        requestAnimationFrame(function() {
+          assert.notEqual(getTransform(label), 'none', 'label has transform');
+          assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
+          done();
+        });
+      });
+
+      test('label is floated correctly with a prefix and prefilled value', function(done) {
+        var container = fixture('prefix-has-value');
+        var label = Polymer.dom(container).querySelector('#l');
+
+        // The label floats, and it is not indented.
+        requestAnimationFrame(function() {
+          assert.notEqual(getTransform(label), 'none', 'label has transform');
+          assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
+          done();
+        });
+      });
 
     });