angularjs - Textarea's height does not change with prepopulate text -

i have little issue here.

i'm working in project need show form after user clicks in call action. far.

the problem when user clicks button show form, textarea not resize height according text , looks incomplete until user focuses textarea , move arrows keys.

here code , example in codepen

<div ng-app="test">   <div class="holder" ng-controller="mainctrl" layout="row" layout-align="center center">     <div class="blocker" ng-show="blocked">       <md-button class="md-raised md-warn" ng-click="toggle()">see me</md-button>     </div>     <div class="form" ng-hide="blocked">       <form name="myform">         <md-input-container flex>             <label>how you</label>             <textarea ng-model="answer1" name='answer1'></textarea>         </md-input-container>         </form>     </div>   </div> </div> 

and javascript part

var app = angular.module('test', ['ngmaterial']);  app.controller( 'mainctrl', function($scope){   $scope.answer1 = "lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu,";   $scope.blocked = true;   $scope.toggle = function(){     $scope.blocked = !$scope.blocked;   } }); 

http://codepen.io/tmeister/pen/wajdge

maybe angular material bug or css issue?

thanks in advance!

well official bug , fix coming.

https://github.com/angular/material/commit/5fdcf905b4355c0385a02f59d2875b93e7a18ce4

if want trigger textarea autogrow use ng-if instead of ng-hide/ng-show

<div ng-app="test">   <div class="holder" ng-controller="mainctrl" layout="row" layout-align="center center">     <div class="blocker" ng-show="blocked">       <md-button class="md-raised md-warn" ng-click="toggle()">see me</md-button>     </div>     <div class="form" ng-if="!blocked">       <form name="myform">         <md-input-container flex>           <label>how you</label>           <textarea ng-model="answer1" name='answer1'></textarea>         </md-input-container>       </form>     </div>   </div> </div> 

working sample: http://codepen.io/tmeister/pen/ejlxym