Angular Material - Long Forces Textarea Scroll Up

Question

Angular Material - Long Forces Textarea Scroll Up

I am having difficulty with textareas and Angular stuff.

When there is enough content in the text area to force the bottom to be "under the fold", typing text causes the page to scroll to the top. When you continue typing, scroll down the page and immediately rewind.

Is this a bug in ngMaterial or am I doing something wrong here?

(I checked the documentation several times trying to see if something was wrong.)

The code I'm using is devoid of anything extra:

angular.module('TestTextarea', [
  'ngMaterial'
])

.controller('AppController', function($scope) {
  $scope.level = {
    title: '',
    content: 'asdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\n'
  };
});

<!DOCTYPE html>
<html ng-app="TestTextarea">

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
</head>

<body ng-controller="AppController">
  <md-content layout-padding layout="column" flex="30">
    <form novalidate flex>
      <div layout>
        <md-input-container flex>
          <label for="title">Title</label>
          <input name="title" id="title" ng-model="level.title" ng-model-options="{ debounce: 500 }" />
        </md-input-container>
      </div>

      <div layout>
        <md-input-container flex>
          <label for="html">Content</label>
          <textarea name="html" id="html" ng-model="level.content" columns="1" ng-model-options="{ debounce: 500 }"></textarea>
        </md-input-container>
      </div>
    </form>
  </md-content>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

  <script src="script.js"></script>
</body>

</html>