feat(mdInput): Add support for both labels and placeholders.

Previously, if a user supplied both a placeholder and a label,
the label would float on top of the placeholder when the input
did not have a value.

Fix by adding styles/code to support both at the same time.

**Note:** If the users provides both a label and a placeholder,
the label will no longer animate.

Also fix input styles so transition does not happen if input
already has a value to avoid unneccessary and eratic-looking
animations.

Fixes #4462. Fixes #4258. Closes #4623.

Author: topherfangio

src/components/input/demoBasicUsage/index.html

@@ -53,7 +53,7 @@
         </md-input-container>
         <md-input-container flex>
           <label>Postal Code</label>
-          <input ng-model="user.postalCode">
+          <input ng-model="user.postalCode" placeholder="12345">
         </md-input-container>
       </div>
 

src/components/input/input.js

@@ -27,8 +27,10 @@ angular.module('material.components.input', [
  * Input and textarea elements will not behave properly unless the md-input-container
  * parent is provided.
  *
- * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid.
- * @param md-no-float {boolean=} When present, placeholders will not be converted to floating labels
+ * @param md-is-error {expression=} When the given expression evaluates to true, the input container
+ *   will go into error state. Defaults to erroring if the input has been touched and is invalid.
+ * @param md-no-float {boolean=} When present, placeholders will not be converted to floating
+ *   labels.
  *
  * @usage
  * <hljs lang="html">
@@ -55,6 +57,7 @@ function mdInputContainerDirective($mdTheming, $parse) {
   function postLink(scope, element, attr) {
     $mdTheming(element);
   }
+
   function ContainerCtrl($scope, $element, $attrs) {
     var self = this;
 
@@ -73,6 +76,9 @@ function mdInputContainerDirective($mdTheming, $parse) {
     self.setHasMessages = function(hasMessages) {
       $element.toggleClass('md-input-has-messages', !!hasMessages);
     };
+    self.setHasPlaceholder = function(hasPlaceholder) {
+      $element.toggleClass('md-input-has-placeholder', !!hasPlaceholder);
+    };
     self.setInvalid = function(isInvalid) {
       $element.toggleClass('md-input-invalid', !!isInvalid);
     };
@@ -110,10 +116,15 @@ function labelDirective() {
  * @description
  * Use the `<input>` or the  `<textarea>` as a child of an `<md-input-container>`.
  *
- * @param {number=} md-maxlength The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input.<br/><br/>
- * The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength` or maxlength attributes.
- * @param {string=} aria-label Aria-label is required when no label is present.  A warning message will be logged in the console if not present.
- * @param {string=} placeholder An alternative approach to using aria-label when the label is not present.  The placeholder text is copied to the aria-label attribute.
+ * @param {number=} md-maxlength The maximum number of characters allowed in this input. If this is
+ *   specified, a character counter will be shown underneath the input.<br/><br/>
+ *   The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't
+ *   want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength`
+ *   or maxlength attributes.
+ * @param {string=} aria-label Aria-label is required when no label is present.  A warning message
+ *   will be logged in the console if not present.
+ * @param {string=} placeholder An alternative approach to using aria-label when the label is not
+ *   PRESENT. The placeholder text is copied to the aria-label attribute.
  * @param md-no-autogrow {boolean=} When present, textareas will not grow automatically.
  *
  * @usage
@@ -172,13 +183,13 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
     var isReadonly = angular.isDefined(attr.readonly);
 
-    if ( !containerCtrl ) return;
+    if (!containerCtrl) return;
     if (containerCtrl.input) {
       throw new Error("<md-input-container> can only have *one* <input>, <textarea> or <md-select> child element!");
     }
     containerCtrl.input = element;
 
-    if(!containerCtrl.label) {
+    if (!containerCtrl.label) {
       $mdAria.expect(element, 'aria-label', element.attr('placeholder'));
     }
 
@@ -199,8 +210,8 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
     }
 
     var isErrorGetter = containerCtrl.isErrorGetter || function() {
-      return ngModelCtrl.$invalid && ngModelCtrl.$touched;
-    };
+        return ngModelCtrl.$invalid && ngModelCtrl.$touched;
+      };
     scope.$watch(isErrorGetter, containerCtrl.setInvalid);
 
     ngModelCtrl.$parsers.push(ngModelPipelineCheckValue);
@@ -236,14 +247,15 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
       containerCtrl.setHasValue(!ngModelCtrl.$isEmpty(arg));
       return arg;
     }
+
     function inputCheckValue() {
       // An input's value counts if its length > 0,
       // or if the input's validity state says it has bad input (eg string in a number input)
-      containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput);
+      containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity || {}).badInput);
     }
 
     function setupTextarea() {
-      if(angular.isDefined(element.attr('md-no-autogrow'))) {
+      if (angular.isDefined(element.attr('md-no-autogrow'))) {
         return;
       }
 
@@ -254,7 +266,7 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
       var lineHeight = null;
       // can't check if height was or not explicity set,
       // so rows attribute will take precedence if present
-      if(node.hasAttribute('rows')) {
+      if (node.hasAttribute('rows')) {
         min_rows = parseInt(node.getAttribute('rows'));
       }
 
@@ -273,7 +285,7 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
       }
       element.on('keydown input', onChangeTextarea);
 
-      if(isNaN(min_rows)) {
+      if (isNaN(min_rows)) {
         element.attr('rows', '1');
 
         element.on('scroll', onScroll);
@@ -292,15 +304,15 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
         // temporarily disables element's flex so its height 'runs free'
         element.addClass('md-no-flex');
 
-        if(isNaN(min_rows)) {
+        if (isNaN(min_rows)) {
           node.style.height = "auto";
           node.scrollTop = 0;
           var height = getHeight();
           if (height) node.style.height = height + 'px';
         } else {
           node.setAttribute("rows", 1);
 
-          if(!lineHeight) {
+          if (!lineHeight) {
             node.style.minHeight = '0';
 
             lineHeight = element.prop('clientHeight');
@@ -317,7 +329,7 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
         container.style.height = 'auto';
       }
 
-      function getHeight () {
+      function getHeight() {
         var line = node.scrollHeight - node.offsetHeight;
         return node.offsetHeight + (line > 0 ? line : 0);
       }
@@ -378,7 +390,7 @@ function mdMaxlengthDirective($animate) {
     };
 
     function renderCharCount(value) {
-      charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );
+      charCountEl.text(( element.val() || value || '' ).length + '/' + maxlength);
       return value;
     }
   }
@@ -393,23 +405,29 @@ function placeholderDirective($log) {
   };
 
   function postLink(scope, element, attr, inputContainer) {
+    // If there is no input container, just return
     if (!inputContainer) return;
-    if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return;
 
+    // Add a placeholder class so we can target it in the CSS
+    inputContainer.setHasPlaceholder(true);
+
+    var label = inputContainer.element.find('label');
+    var hasNoFloat = angular.isDefined(inputContainer.element.attr('md-no-float'));
+
+    // If we have a label, or they specify the md-no-float attribute, just return
+    if ((label && label.length) || hasNoFloat) return;
+
+    // Otherwise, grab/remove the placeholder
     var placeholderText = attr.placeholder;
     element.removeAttr('placeholder');
 
-    if ( inputContainer.element.find('label').length == 0 ) {
-      if (inputContainer.input && inputContainer.input[0].nodeName != 'MD-SELECT') {
-        var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>';
+    // And add the placeholder text as a separate label
+    if (inputContainer.input && inputContainer.input[0].nodeName != 'MD-SELECT') {
+      var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>';
 
-        inputContainer.element.addClass('md-icon-float');
-        inputContainer.element.prepend(placeholder);
-      }
-    } else if (element[0].nodeName != 'MD-SELECT') {
-      $log.warn("The placeholder='" + placeholderText + "' will be ignored since this md-input-container has a child label element.");
+      inputContainer.element.addClass('md-icon-float');
+      inputContainer.element.prepend(placeholder);
     }
-
   }
 }
 

src/components/input/input.scss

@@ -227,12 +227,21 @@ md-input-container {
   }
 
   &.md-input-focused,
+  &.md-input-has-placeholder,
   &.md-input-has-value {
-    label:not(.md-no-float)  {
+    label:not(.md-no-float) {
       transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
     }
   }
 
+  // If we have an existing value; don't animate the transform as it happens on page load and
+  // causes erratic/unnecessary animation
+  &.md-input-has-value {
+    label {
+      transition: none;
+    }
+  }
+
   // Use wide border in error state or in focused state
   &.md-input-focused .md-input,
   .md-input.ng-invalid.ng-dirty {

src/components/input/input.spec.js

@@ -7,8 +7,8 @@ describe('md-input-container directive', function() {
     var container;
     inject(function($rootScope, $compile) {
       container = $compile((isForm ? '<form>' : '') +
-                           '<md-input-container><input ' +(attrs||'')+ '><label></label></md-input-container>' +
-                           (isForm ? '<form>' : ''))($rootScope);
+        '<md-input-container><input ' + (attrs || '') + '><label></label></md-input-container>' +
+        (isForm ? '<form>' : ''))($rootScope);
       $rootScope.$apply();
     });
     return container;
@@ -107,10 +107,10 @@ describe('md-input-container directive', function() {
 
     it('should work with a constant', inject(function($rootScope, $compile) {
       var el = $compile('<form name="form">' +
-                        ' <md-input-container>' +
-                        '   <input md-maxlength="5" ng-model="foo" name="foo">' +
-                        ' </md-input-container>' +
-                        '</form>')($rootScope);
+        ' <md-input-container>' +
+        '   <input md-maxlength="5" ng-model="foo" name="foo">' +
+        ' </md-input-container>' +
+        '</form>')($rootScope);
       $rootScope.$apply();
       expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
       expect(getCharCounter(el).text()).toBe('0/5');
@@ -132,10 +132,10 @@ describe('md-input-container directive', function() {
 
     it('should add and remove maxlength element & error with expression', inject(function($rootScope, $compile) {
       var el = $compile('<form name="form">' +
-                        ' <md-input-container>' +
-                        '   <input md-maxlength="max" ng-model="foo" name="foo">' +
-                        ' </md-input-container>' +
-                        '</form>')($rootScope);
+        ' <md-input-container>' +
+        '   <input md-maxlength="max" ng-model="foo" name="foo">' +
+        ' </md-input-container>' +
+        '</form>')($rootScope);
 
       $rootScope.$apply();
       expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
@@ -165,21 +165,26 @@ describe('md-input-container directive', function() {
   }));
 
   it('should ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
-      var el = $compile('<md-input-container><label>Hello</label><input ng-model="foo" placeholder="some placeholder"></md-input-container>')($rootScope);
-      var placeholder = el[0].querySelector('.md-placeholder');
-      var label = el.find('label')[0];
+    var el = $compile(
+      '<md-input-container>' +
+      '  <label>Hello</label>' +
+      '  <input ng-model="foo" placeholder="some placeholder" />' +
+      '</md-input-container>'
+    )($rootScope);
 
-      expect(el.find('input')[0].hasAttribute('placeholder')).toBe(false);
-      expect(label).toBeTruthy();
-      expect(label.textContent).toEqual('Hello');
-    }));
+    var label = el.find('label')[0];
+
+    expect(el.find('input')[0].hasAttribute('placeholder')).toBe(true);
+    expect(label).toBeTruthy();
+    expect(label.textContent).toEqual('Hello');
+  }));
 
   it('should put an aria-label on the input when no label is present', inject(function($rootScope, $compile) {
     var el = $compile('<form name="form">' +
-                      ' <md-input-container md-no-float>' +
-                      '   <input placeholder="baz" md-maxlength="max" ng-model="foo" name="foo">' +
-                      ' </md-input-container>' +
-                      '</form>')($rootScope);
+      ' <md-input-container md-no-float>' +
+      '   <input placeholder="baz" md-maxlength="max" ng-model="foo" name="foo">' +
+      ' </md-input-container>' +
+      '</form>')($rootScope);
 
     $rootScope.$apply();
 
@@ -190,10 +195,10 @@ describe('md-input-container directive', function() {
   it('should put the container in "has value" state when input has a static value', inject(function($rootScope, $compile) {
     var scope = $rootScope.$new();
     var template =
-        '<md-input-container>' +
-          '<label>Name</label>' +
-          '<input value="Larry">' +
-        '</md-input-container>';
+      '<md-input-container>' +
+      '<label>Name</label>' +
+      '<input value="Larry">' +
+      '</md-input-container>';
 
     var element = $compile(template)(scope);
     scope.$apply();