From f891b90ef43b466ccb615b4fba2e0d51ed7e2800 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Mon, 14 Nov 2016 19:43:55 -0800 Subject: [PATCH] more wp value --- src/demo-app/input/input-demo.html | 2 +- src/demo-app/input/input-demo.scss | 8 +++ src/lib/input/autosize.spec.ts | 83 ++++++++++++++++++++++++++---- src/lib/input/autosize.ts | 18 +------ 4 files changed, 83 insertions(+), 28 deletions(-) diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 373a5eed9d79..1bef8bfd2df4 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -178,5 +178,5 @@

Textarea

textarea autosize

- + diff --git a/src/demo-app/input/input-demo.scss b/src/demo-app/input/input-demo.scss index 97a9f93ea2df..b70dd6f1e573 100644 --- a/src/demo-app/input/input-demo.scss +++ b/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; +} diff --git a/src/lib/input/autosize.spec.ts b/src/lib/input/autosize.spec.ts index 0dafe938f819..1e10781595cc 100644 --- a/src/lib/input/autosize.spec.ts +++ b/src/lib/input/autosize.spec.ts @@ -5,22 +5,22 @@ import {MdInputModule} from './input'; import {MdTextareaAutosize} from './autosize'; -describe('MdTextareaAutosize', () => { - let fixture: ComponentFixture; +fdescribe('MdTextareaAutosize', () => { + let fixture: ComponentFixture; 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; + + 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: ``, - 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: ``, + styles: [textareaStyleReset], }) -class TextareaWithAutosize { +class AutosizeTextAreaWithContent { minRows: number = null; maxRows: number = null; content: string = ''; } + +@Component({ + template: ``, + styles: [textareaStyleReset], +}) +class AutosizeTextAreaWithValue { + value: string = ''; +} diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts index e11bfd77f920..458ce88dc855 100644 --- a/src/lib/input/autosize.ts +++ b/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() {