Angular Material - Long Textarea Forces Scroll To Top

2.5k Views Asked by At

I'm having some difficulties with text areas and Angular Material.

When there's enough content in the text area to force the bottom "below the fold", typing causes the page to scroll to the top. Continuing to type scrolls the page down and immediately scrolls back up.

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

(I've checked the documentation multiple times trying to see if I did something wrong.)

Code I'm using, stripped of anything unnecessary:

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>

0

There are 0 best solutions below