more wp value

Author: jelbourn

src/demo-app/input/input-demo.html

@@ -178,5 +178,5 @@ <h4>Textarea</h4>
 
 <md-card>
   <h2>textarea autosize</h2>
-  <textarea md-autosize></textarea>
+  <textarea md-autosize class="demo-textarea"></textarea>
 </md-card>

src/demo-app/input/input-demo.scss

@@ -18,3 +18,11 @@
 .demo-card {
   margin: 16px;
 }
+
+.demo-textarea {
+  resize: none;
+  border: none;
+  overflow: auto;
+  padding: 0;
+  background: lightblue;
+}

src/lib/input/autosize.spec.ts

@@ -5,22 +5,22 @@ import {MdInputModule} from './input';
 import {MdTextareaAutosize} from './autosize';
 
 
-describe('MdTextareaAutosize', () => {
-  let fixture: ComponentFixture<TextareaWithAutosize>;
+fdescribe('MdTextareaAutosize', () => {
+  let fixture: ComponentFixture<AutosizeTextAreaWithContent>;
   let textarea: HTMLTextAreaElement;
   let autosize: MdTextareaAutosize;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdInputModule],
-      declarations: [TextareaWithAutosize],
+      declarations: [AutosizeTextAreaWithContent, AutosizeTextAreaWithValue],
     });
 
     TestBed.compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TextareaWithAutosize);
+    fixture = TestBed.createComponent(AutosizeTextAreaWithContent);
     fixture.detectChanges();
 
     textarea = fixture.nativeElement.querySelector('textarea');
@@ -97,22 +97,83 @@ describe('MdTextareaAutosize', () => {
     expect(parseInt(textarea.style.maxHeight))
         .toBeGreaterThan(previousMaxHeight, 'Expected increased max-height with maxRows increase.');
   });
+
+  describe('with value binding', () => {
+    let fixture: ComponentFixture<AutosizeTextAreaWithValue>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(AutosizeTextAreaWithValue);
+      fixture.detectChanges();
+
+      textarea = fixture.nativeElement.querySelector('textarea');
+      autosize = fixture.debugElement.query(
+          By.directive(MdTextareaAutosize)).injector.get(MdTextareaAutosize);
+    });
+
+    it('should resize the textarea when its value property changes', () => {
+      let previousHeight = textarea.offsetHeight;
+
+      fixture.componentInstance.value = `
+      Once upon a midnight dreary, while I pondered, weak and weary,
+      Over many a quaint and curious volume of forgotten lore—
+          While I nodded, nearly napping, suddenly there came a tapping,
+      As of some one gently rapping, rapping at my chamber door.
+      “’Tis some visitor,” I muttered, “tapping at my chamber door—
+                  Only this and nothing more.”`;
+
+      // TODO(jelbourn): remove `resizeToFitContent` call here when we support resizing based
+      // on setting value directly.
+      fixture.detectChanges();
+      autosize.resizeToFitContent();
+
+      expect(textarea.offsetHeight)
+          .toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.');
+      expect(textarea.offsetHeight)
+          .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+
+      previousHeight = textarea.offsetHeight;
+      fixture.componentInstance.value += `
+          Ah, distinctly I remember it was in the bleak December;
+      And each separate dying ember wrought its ghost upon the floor.
+          Eagerly I wished the morrow;—vainly I had sought to borrow
+          From my books surcease of sorrow—sorrow for the lost Lenore—
+      For the rare and radiant maiden whom the angels name Lenore—
+                  Nameless here for evermore.`;
+
+      fixture.detectChanges();
+      autosize.resizeToFitContent();
+
+      expect(textarea.offsetHeight)
+          .toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.');
+      expect(textarea.offsetHeight)
+          .toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
+    });
+  });
 });
 
 
-@Component({
-  template: `<textarea md-autosize [minRows]="minRows" [maxRows]="maxRows">{{content}}</textarea>`,
-  styles: [`
-    /** Reset padding and border to make measurement comparisons easier. */
+// Styles to reset padding and border to make measurement comparisons easier.
+const textareaStyleReset = `
     textarea {
       padding: 0;
       border: none;
       overflow: auto;
-    }
-  `]
+    }`;
+
+@Component({
+  template: `<textarea md-autosize [minRows]="minRows" [maxRows]="maxRows">{{content}}</textarea>`,
+  styles: [textareaStyleReset],
 })
-class TextareaWithAutosize {
+class AutosizeTextAreaWithContent {
   minRows: number = null;
   maxRows: number = null;
   content: string = '';
 }
+
+@Component({
+  template: `<textarea md-autosize [value]="value"></textarea>`,
+  styles: [textareaStyleReset],
+})
+class AutosizeTextAreaWithValue {
+  value: string = '';
+}

src/lib/input/autosize.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input, OnInit, NgZone} from '@angular/core';
+import {Directive, ElementRef, Input, OnInit} from '@angular/core';
 
 
 /**
@@ -19,24 +19,10 @@ export class MdTextareaAutosize implements OnInit {
   /** Maximum number of rows for this textarea. */
   @Input() maxRows: number;
 
-  /** The value of the textarea. */
-  private _value: string;
-
-  @Input()
-  get value() { return this._value }
-  set value(newValue: string) {
-    this._value = newValue;
-
-    // Wait for the DOM to be updated with the new value before resizing.
-    this._ngZone.runOutsideAngular(() => {
-      this._ngZone.onStable.first().subscribe(() => this.resizeToFitContent());
-    });
-  }
-
   /** Cached height of a textarea with a single row. */
   private _cachedLineHeight: number;
 
-  constructor(private _elementRef: ElementRef, private _ngZone: NgZone) { }
+  constructor(private _elementRef: ElementRef) { }
 
   /** The minimum height of the textarea as determined by minRows. */
   get _minHeight() {