fix(input): Sizes textareas properly when the container is shown

Added an optional md-detect-hidden attribute for textareas inside of
md-input-containers. This will check on every digest cycle whether the
element was hidden and is now shown, and will auto-size the textarea
properly.

Fixes #1202. Closes #4726.

src/components/input/input.js

@@ -126,6 +126,7 @@ function labelDirective() {
  * @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.
+ * @param md-detect-hidden {boolean=} When present, textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle.
  *
  * @usage
  * <hljs lang="html">
@@ -341,6 +342,31 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
  var height = node.offsetHeight + line;
  node.style.height = height + 'px';
  }
+
+ // Attach a watcher to detect when the textarea gets shown.
+ if (angular.isDefined(element.attr('md-detect-hidden'))) {
+
+ var handleHiddenChange = function() {
+ var wasHidden = false;
+
+ return function() {
+ var isHidden = node.offsetHeight === 0;
+
+ if (isHidden === false && wasHidden === true) {
+ growTextarea();
+ }
+
+ wasHidden = isHidden;
+ };
+ }();
+
+ // Check every digest cycle whether the visibility of the textarea has changed.
+ // Queue up to run after the digest cycle is complete.
+ scope.$watch(function() {
+ $mdUtil.nextTick(handleHiddenChange, false);
+ return true;
+ });
+ }
  }
  }
 }

src/components/input/input.spec.js

@@ -1,5 +1,5 @@
 describe('md-input-container directive', function() {
- var $compile, pageScope;
+ var $rootScope, $compile, $timeout, pageScope;
 
  beforeEach(module('ngAria', 'material.components.input'));
 
@@ -9,6 +9,12 @@ describe('md-input-container directive', function() {
  pageScope = $injector.get('$rootScope').$new();
  }));
 
+ beforeEach(inject(function($injector) {
+ $rootScope = $injector.get('$rootScope');
+ $compile = $injector.get('$compile');
+ $timeout = $injector.get('$timeout');
+ }));
+
  function setup(attrs, isForm) {
  var container;
 
@@ -258,4 +264,75 @@ describe('md-input-container directive', function() {
 
  expect(element.hasClass('md-input-has-value')).toBe(true);
  });
+
+ describe('Textarea auto-sizing', function() {
+ var ngElement, element, ngTextarea, textarea, scope, parentElement;
+
+ function createAndAppendElement(attrs) {
+ scope = $rootScope.$new();
+
+ attrs = attrs || '';
+ var template =
+ '<div ng-hide="parentHidden">' +
+ '<md-input-container>' +
+ '<label>Biography</label>' +
+ '<textarea ' + attrs + '>Single line</textarea>' +
+ '</md-input-container>' +
+ '</div>';
+ parentElement = $compile(template)(scope);
+ ngElement = parentElement.find('md-input-container');
+ element = ngElement[0];
+ ngTextarea = ngElement.find('textarea');
+ textarea = ngTextarea[0];
+ document.body.appendChild(parentElement[0]);
+ }
+
+ afterEach(function() {
+ document.body.removeChild(parentElement[0]);
+ });
+
+ it('should auto-size the textarea as the user types', function() {
+ createAndAppendElement();
+ var oldHeight = textarea.offsetHeight;
+ ngTextarea.val('Multiple\nlines\nof\ntext');
+ ngTextarea.triggerHandler('input');
+ scope.$apply();
+ $timeout.flush();
+ var newHeight = textarea.offsetHeight;
+ expect(newHeight).toBeGreaterThan(oldHeight);
+ });
+
+ it('should not auto-size if md-no-autogrow is present', function() {
+ createAndAppendElement('md-no-autogrow');
+ var oldHeight = textarea.offsetHeight;
+ ngTextarea.val('Multiple\nlines\nof\ntext');
+ ngTextarea.triggerHandler('input');
+ scope.$apply();
+ $timeout.flush();
+ var newHeight = textarea.offsetHeight;
+ expect(newHeight).toEqual(oldHeight);
+ });
+
+ it('should auto-size when revealed if md-detect-hidden is present', function() {
+ createAndAppendElement('md-detect-hidden');
+
+ var oldHeight = textarea.offsetHeight;
+
+ scope.parentHidden = true;
+ ngTextarea.val('Multiple\nlines\nof\ntext');
+ ngTextarea.triggerHandler('input');
+ scope.$apply();
+ $timeout.flush();
+
+ // Textarea should still be hidden.
+ expect(textarea.offsetHeight).toBe(0);
+
+ scope.parentHidden = false;
+ scope.$apply();
+
+ $timeout.flush();
+ var newHeight = textarea.offsetHeight;
+ expect(textarea.offsetHeight).toBeGreaterThan(oldHeight);
+ });
+ });
 });