From f14e41f1bca6a92fd4b46cfb4702fdfef5927d47 Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 6 Oct 2023 12:36:06 +0200
Subject: [PATCH] Handling the textarea auto resize when the view element is
 removed from DOM

---
 packages/ckeditor5-ui/src/textarea/textareaview.ts  |  8 +++++---
 .../ckeditor5-ui/tests/textarea/textareaview.js     | 13 +++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 4dbc4f3bdda..9ac6784be51 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,7 +7,7 @@
  * @module ui/textarea/textareaview
  */
 
-import { Rect, type Locale, toUnit, getBorderWidths, global, CKEditorError } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths, global, CKEditorError, isVisible } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
@@ -107,8 +107,10 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		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();
-				this.fire<TextareaViewUpdateEvent>( 'update' );
+				if ( isVisible( this.element ) ) {
+					this._updateAutoGrowHeight();
+					this.fire<TextareaViewUpdateEvent>( 'update' );
+				}
 			} );
 		} );
 	}
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 8340f90a6ee..88db596c08c 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -133,6 +133,19 @@ describe( 'TextareaView', () => {
 			expect( view.element.style.height ).to.not.equal( initialHeight );
 		} );
 
+		it( 'should not resize the view on the #value change when the view element is not in DOM', async () => {
+			wrapper.removeChild( view.element );
+
+			const initialHeight = view.element.style.height;
+
+			view.value = 'foo\nbar\nbaz\nqux';
+
+			expect( view.element.style.height ).to.equal( initialHeight );
+
+			await requestAnimationFrame();
+			expect( view.element.style.height ).to.equal( initialHeight );
+		} );
+
 		describe( 'dynamic resizing', () => {
 			it( 'should respect #minRows and #maxRows', async () => {
 				// One row, it's less than default #minRows.