TextareaView should fire #update event whenever its geometry has poss…

…ibly changed.
ckeditor · Sep 25, 2023 · ace53a8 · ace53a8
1 parent 70c8e55
commit ace53a8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
@@ -61,7 +61,7 @@ export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
 
-export { default as TextareaView, type TextareaViewAutoGrowEvent } from './textarea/textareaview';
+export { default as TextareaView, type TextareaViewUpdateEvent } from './textarea/textareaview';
 
 export { default as IframeView } from './iframe/iframeview';
 

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -101,11 +101,15 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		this.on( 'input', () => {
 			this._updateAutoGrowHeight( true );
+			this.fire<TextareaViewUpdateEvent>( 'update' );
 		} );
 
 		this.on( 'change:value', () => {
 			// The content needs to be updated by the browser after the value is changed. It takes a few ms.
-			global.window.requestAnimationFrame( () => this._updateAutoGrowHeight() );
+			global.window.requestAnimationFrame( () => {
+				this._updateAutoGrowHeight();
+				this.fire<TextareaViewUpdateEvent>( 'update' );
+			} );
 		} );
 	}
 
@@ -116,6 +120,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		super.reset();
 
 		this._updateAutoGrowHeight();
+		this.fire<TextareaViewUpdateEvent>( 'update' );
 	}
 
 	/**
@@ -159,8 +164,6 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		singleLineContentClone.remove();
 		fullTextValueClone.remove();
-
-		this.fire<TextareaViewAutoGrowEvent>( 'autoGrow' );
 	}
 
 	/**
@@ -198,14 +201,12 @@ function getTextareaElementClone( element: HTMLTextAreaElement, value: string ):
 }
 
 /**
- * Fired when the logic of {@link module:ui/textarea/textareaview~TextareaView} checks whether
- * the component should be resized upon user interaction.
- *
- * See {@link module:ui/textarea/textareaview~TextareaView#minRows}, {@link module:ui/textarea/textareaview~TextareaView#maxRows}.
+ * Fired every time the layout of the {@link module:ui/textarea/textareaview~TextareaView} possibly changed as a result
+ * of the user input or the value change via {@link module:ui/textarea/textareaview~TextareaView#value}.
  *
- * @eventName ~TextareaView#autoGrow
+ * @eventName ~TextareaView#update
  */
-export type TextareaViewAutoGrowEvent = {
-	name: 'autoGrow';
+export type TextareaViewUpdateEvent = {
+	name: 'update';
 	args: [];
 };
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -164,11 +164,13 @@ describe( 'TextareaView', () => {
 				await requestAnimationFrame();
 				expect( parseFloat( view.element.style.height ) ).to.equal( twoRowsHeight );
 			} );
+		} );
 
-			it( 'should fire the #autoGrow event', () => {
+		describe( '#update event', () => {
+			it( 'should get fired on the user #input', () => {
 				const spy = sinon.spy();
 
-				view.on( 'autoGrow', spy );
+				view.on( 'update', spy );
 
 				view.element.value = '1\n2\n3\n4\n5\n6';
 
@@ -180,6 +182,34 @@ describe( 'TextareaView', () => {
 				// The event gets fired whether the view is changing dimensions or not.
 				sinon.assert.calledTwice( spy );
 			} );
+
+			it( 'should get fired on #value change', async () => {
+				const spy = sinon.spy();
+
+				view.on( 'update', spy );
+
+				view.value = '1\n2\n3\n4\n5\n6';
+
+				await requestAnimationFrame();
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'should be fired upon reset()', async () => {
+				const spy = sinon.spy();
+
+				view.on( 'update', spy );
+
+				view.value = '1\n2\n3\n4\n5\n6';
+
+				await requestAnimationFrame();
+
+				sinon.assert.calledOnce( spy );
+
+				view.reset();
+
+				sinon.assert.calledTwice( spy );
+			} );
 		} );
 	} );