From 2e2a8dd60616d758c6b788592ab640b943c78c5b Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 24 Jul 2024 16:39:06 +0300
Subject: [PATCH 01/27] textarea component enhancement

---
 src/entries/core-wo-model.ts                  |   1 +
 src/entries/react-ui-model.ts                 |   1 +
 src/knockout/templates/comment.html           |  54 ++++++++-
 src/knockout/templates/question-comment.html  |   6 +-
 src/question.ts                               |  21 ++++
 src/question_baseselect.ts                    |  21 ++++
 src/question_comment.ts                       |  25 ++++
 src/react/components/textarea.tsx             |  77 +++++++++++++
 src/react/reactquestion_comment.tsx           | 107 ++++++++++--------
 src/utils/textarea.ts                         |  94 +++++++++++++++
 .../snapshots/checkbox-comment-V2.snap.html   |   2 +-
 ...nt-into-question-commentAreaRows.snap.html |   2 +-
 tests/surveyquestiontests.ts                  |  69 +++++++++++
 13 files changed, 421 insertions(+), 59 deletions(-)
 create mode 100644 src/react/components/textarea.tsx
 create mode 100644 src/utils/textarea.ts

diff --git a/src/entries/core-wo-model.ts b/src/entries/core-wo-model.ts
index b8d614011c..7519dfc402 100644
--- a/src/entries/core-wo-model.ts
+++ b/src/entries/core-wo-model.ts
@@ -18,3 +18,4 @@ export * from "../utils/animation";
 export * from "../actions/adaptive-container";
 export * from "../actions/container";
 export * from "../utils/dragOrClickHelper";
+export * from "../utils/textarea";
diff --git a/src/entries/react-ui-model.ts b/src/entries/react-ui-model.ts
index b3f1f75484..207371b762 100644
--- a/src/entries/react-ui-model.ts
+++ b/src/entries/react-ui-model.ts
@@ -1,4 +1,5 @@
 // react
+export { TextAreaComponent } from "../react/components/textarea";
 export { Survey, attachKey2click } from "../react/reactSurvey";
 export { ReactSurveyElementsWrapper } from "../react/reactsurveymodel";
 export { SurveyNavigationBase } from "../react/reactSurveyNavigationBase";
diff --git a/src/knockout/templates/comment.html b/src/knockout/templates/comment.html
index b97b538cf4..cd1164a4b7 100644
--- a/src/knockout/templates/comment.html
+++ b/src/knockout/templates/comment.html
@@ -1,12 +1,20 @@
 <script type="text/html" id="survey-comment">
-  <!--ko if: !question.isReadOnlyRenderDiv() -->
-<textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, 'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, placeholder: question.renderedCommentPlaceholder }, 
+  <!-- ko if: !question.isReadOnlyRenderDiv() -->
+  <!-- ko template: { name: 'survey-textarea',  data: question.getCommentTextArea() } -->
+  <!-- /ko -->
+<!-- <textarea data-bind="attr: { 
+    id: question.commentId, 
+    maxLength: question.getOthersMaxLength(), 
+    rows: question.commentAreaRows, 
+    'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 
+    'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, 
+    placeholder: question.renderedCommentPlaceholder }, 
         event: { input: function(s, e) { $data.question.onCommentInput(e); } }, 
         value: $data.question.comment, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,
         style: { resize: question.resizeStyle },
-        css: $data.question.cssClasses.other"></textarea>
+        css: $data.question.cssClasses.other"></textarea> -->
 <!--/ko-->
 
 <!--ko if: question.isReadOnlyRenderDiv() -->
@@ -14,17 +22,51 @@
 <!--/ko-->
 </script>
 <script type="text/html" id="survey-other">
-  <!--ko if: !question.isReadOnlyRenderDiv() -->
-<textarea data-bind="attr: { id: question.otherId, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, 'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, placeholder: question.otherPlaceholder }, 
+  <!-- ko if: !question.isReadOnlyRenderDiv() -->
+  <!-- ko template: { name: 'survey-textarea',  data: question.getOtherTextArea() } -->
+  <!-- /ko -->
+<!-- <textarea data-bind="attr: { 
+    id: question.otherId, 
+    maxLength: question.getOthersMaxLength(), 
+    rows: question.commentAreaRows, 
+    'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 
+    'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, 
+    placeholder: question.otherPlaceholder }, 
         event: { input: function(s, e) { $data.question.onOtherValueInput(e); } }, 
         value: $data.question.otherValue, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,
         style: { resize: question.resizeStyle },
-        css: $data.question.cssClasses.other"></textarea>
+        css: $data.question.cssClasses.other"></textarea> -->
 <!--/ko-->
 
 <!--ko if: question.isReadOnlyRenderDiv() -->
 <div data-bind="text: question.otherValue"></div>
 <!--/ko-->
+</script>
+
+<script type="text/html" id="survey-textarea">
+  <textarea data-bind="
+  attr: { 
+    id: $data.id, 
+    'readonly': $data.isReadOnlyAttr, 
+    'disabled': $data.isDisabledAttr, 
+    maxLength: $data.maxLength, 
+    cols: $data.cols, 
+    rows: $data.rows, 
+    placeholder: $data.placeholder, 
+    'aria-required': $data.ariaRequired,
+    'aria-label': $data.ariaLabel,
+    'aria-labelledby': $data.ariaLabelledBy, 
+    'aria-describedby': $data.ariaDescribedBy, 
+    'aria-invalid': $data.ariaInvalid, 
+    'aria-errormessage': $data.ariaErrormessage
+  }, 
+  event: { 
+    blur: function(s, e) { $data.onTextAreaChange(e); },
+    input: function(s, e) { $data.onTextAreaInput(e); } 
+  }, 
+  css: $data.className,
+  style: { resize: $data.question.resizeStyle },
+"></textarea>
 </script>
\ No newline at end of file
diff --git a/src/knockout/templates/question-comment.html b/src/knockout/templates/question-comment.html
index c983a3a16e..1849883e93 100644
--- a/src/knockout/templates/question-comment.html
+++ b/src/knockout/templates/question-comment.html
@@ -1,10 +1,12 @@
 <script type="text/html" id="survey-question-comment">
 <!--ko if: !question.isReadOnlyRenderDiv() -->
-<textarea data-bind="attr: {'readonly': question.isReadOnlyAttr, 'disabled': question.isDisabledAttr, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.a11y_input_ariaLabel, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage}, 
+  <!-- ko template: { name: 'survey-textarea',  data: question.getTextArea() } -->
+  <!-- /ko -->
+<!-- <textarea data-bind="attr: {'readonly': question.isReadOnlyAttr, 'disabled': question.isDisabledAttr, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.a11y_input_ariaLabel, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage}, 
   event: { input: function(s, e) { question.onInput(e); }, keydown: function(s, e) { question.onKeyDown(e); return true; } }, 
   value: question.value, 
   style: { resize: question.resizeStyle },
-  css: question.className"></textarea>
+  css: question.className"></textarea> -->
   <!--ko if: question.getMaxLength() -->
   <!-- ko component: { name: 'sv-character-counter', params: { counter: question.characterCounter, remainingCharacterCounter: question.cssClasses.remainingCharacterCounter } } -->
   <!-- /ko -->
diff --git a/src/question.ts b/src/question.ts
index 609796b4a4..d4ab65b465 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -22,6 +22,7 @@ import { ConsoleWarnings } from "./console-warnings";
 import { ProcessValue } from "./conditionProcessValue";
 import { ITheme } from "./themes";
 import { DomWindowHelper } from "./global_variables_utils";
+import { ITextArea, TextAreaViewModel } from "./utils/textarea";
 
 export interface IConditionObject {
   name: string;
@@ -2483,6 +2484,26 @@ export class Question extends SurveyElement<Question>
     );
   }
 
+  public getCommentTextArea(): ITextArea {
+    const options: ITextArea = {
+      question: this,
+      id: this.commentId,
+      className: this.cssClasses.comment,
+      isDisabledAttr: this.isInputReadOnly || false,
+      placeholder: this.renderedCommentPlaceholder,
+      rows: this.commentAreaRows,
+      maxLength: this.getOthersMaxLength(),
+      getTextValue: () => { return this.comment; },
+      setTextValue: (newValue) => { this.comment = newValue; },
+      ariaRequired: this.a11y_input_ariaRequired,
+      ariaLabel: this.a11y_input_ariaLabel,
+
+      onTextAreaChange: (e) => { this.onCommentChange(e); },
+      onTextAreaInput: (e) => { this.onCommentInput(e); },
+    };
+    return new TextAreaViewModel(options);
+  }
+
   @property() renderAs: string;
 
   @property({ defaultValue: false }) inMatrixMode: boolean;
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index 3646056c86..f711485883 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -13,6 +13,7 @@ import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { classesToSelector, mergeValues } from "./utils/utils";
+import { ITextArea, TextAreaViewModel } from "./utils/textarea";
 
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
@@ -1980,6 +1981,26 @@ export class QuestionSelectBase extends Question {
     }
     return classes;
   }
+
+  public getOtherTextArea(): ITextArea {
+    const options: ITextArea = {
+      question: this,
+      id: this.otherId,
+      className: this.cssClasses.other,
+      isDisabledAttr: this.isInputReadOnly || false,
+      placeholder: this.otherPlaceholder,
+      rows: this.commentAreaRows,
+      maxLength: this.getOthersMaxLength(),
+      ariaRequired: this.ariaRequired || this.a11y_input_ariaRequired,
+      ariaLabel: this.ariaLabel || this.a11y_input_ariaLabel,
+      getTextValue: () => { return this.otherValue; },
+      setTextValue: (newValue) => { this.otherValue = newValue; },
+
+      onTextAreaChange: (e) => { this.onOtherValueChange(e); },
+      onTextAreaInput: (e) => { this.onOtherValueInput(e); },
+    };
+    return new TextAreaViewModel(options);
+  }
 }
 /**
  * A base class for multiple-selection question types that can display choice items in multiple columns ([Checkbox](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Radiogroup](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), [Image Picker](https://surveyjs.io/form-library/documentation/questionimagepickermodel)).
diff --git a/src/question_comment.ts b/src/question_comment.ts
index f3ab230ea4..f2cf3bec99 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -3,6 +3,7 @@ import { QuestionFactory } from "./questionfactory";
 import { QuestionTextBase } from "./question_textbase";
 import { increaseHeightByContent } from "./utils/utils";
 import { settings } from "./settings";
+import { ITextArea, TextAreaViewModel } from "./utils/textarea";
 
 /**
  * A class that describes the Long Text question type.
@@ -125,7 +126,31 @@ export class QuestionCommentModel extends QuestionTextBase {
   public get className() {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
+  public getTextArea(): ITextArea {
+    const options: ITextArea = {
+      question: this,
+      id: this.inputId,
+      className: this.className,
+      isDisabledAttr: this.isDisabledAttr,
+      isReadOnlyAttr: this.isReadOnlyAttr,
+      placeholder: this.renderedPlaceholder,
+      maxLength: this.getMaxLength(),
+      rows: this.rows,
+      cols: this.cols,
+      ariaRequired: this.a11y_input_ariaRequired,
+      ariaLabel: this.a11y_input_ariaLabel,
+      ariaLabelledBy: this.a11y_input_ariaLabelledBy,
+      ariaDescribedBy: this.a11y_input_ariaDescribedBy,
+      ariaInvalid: this.a11y_input_ariaInvalid,
+      ariaErrormessage: this.a11y_input_ariaErrormessage,
 
+      // onTextAreaChange: onBlur,
+      // onTextAreaInput: onInput,
+      onTextAreaInput: (event) => { this.onInput(event); },
+      onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
+    };
+    return new TextAreaViewModel(options);
+  }
 }
 Serializer.addClass(
   "comment",
diff --git a/src/react/components/textarea.tsx b/src/react/components/textarea.tsx
new file mode 100644
index 0000000000..1d0bf04119
--- /dev/null
+++ b/src/react/components/textarea.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { Helpers, TextAreaViewModel } from "survey-core";
+import { ReactElementFactory } from "../element-factory";
+import { SurveyElementBase } from "../reactquestion_element";
+
+interface ITextAreaProps {
+  viewModelOptions: TextAreaViewModel;
+}
+
+export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
+  private control: HTMLElement;
+
+  constructor(props: ITextAreaProps) {
+    super(props);
+    this.state = { comment: this.viewModel.getTextValue() || "" };
+  }
+  get viewModel(): TextAreaViewModel {
+    return this.props.viewModelOptions;
+  }
+  componentDidUpdate(prevProps: any, prevState: any): void {
+    super.componentDidUpdate(prevProps, prevState);
+    this.updateDomElement();
+  }
+  componentDidMount(): void {
+    super.componentDidMount();
+    this.updateDomElement();
+  }
+  protected updateDomElement(): void {
+    if (!!this.control) {
+      const control: any = this.control;
+      const newValue = this.viewModel.getTextValue() || "";
+      if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
+        control.value = newValue;
+      }
+    }
+  }
+  protected setControl(element: HTMLElement | null): void {
+    if(!!element) {
+      this.control = element;
+    }
+  }
+  protected canRender(): boolean {
+    return !!this.viewModel.question;
+  }
+
+  protected renderElement(): JSX.Element {
+    return (
+      <textarea
+        id={this.viewModel.id}
+        className={this.viewModel.className}
+        ref={(textarea) => (this.setControl(textarea))}
+        disabled={this.viewModel.isDisabledAttr}
+        readOnly={this.viewModel.isReadOnlyAttr}
+        rows={this.viewModel.rows}
+        cols={this.viewModel.cols}
+        placeholder={this.viewModel.placeholder}
+        maxLength={this.viewModel.maxLength}
+        onBlur={this.viewModel.onTextAreaChange}
+        onInput={this.viewModel.onTextAreaInput}
+        onKeyDown={this.viewModel.onTextAreaKeyDown}
+        aria-required={this.viewModel.ariaRequired}
+        aria-label={this.viewModel.ariaLabel}
+
+        aria-labelledby={this.viewModel.ariaLabelledBy}
+        aria-describedby={this.viewModel.ariaDescribedBy}
+        aria-invalid={this.viewModel.ariaInvalid}
+        aria-errormessage={this.viewModel.ariaErrormessage}
+        style={{ resize: this.viewModel.question.resizeStyle }}
+      />
+    );
+  }
+
+}
+
+ReactElementFactory.Instance.registerElement("sv-textarea", (props) => {
+  return React.createElement(TextAreaComponent, props);
+});
\ No newline at end of file
diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index a3f5163940..53c9ca214e 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -1,14 +1,29 @@
 import * as React from "react";
 import { ReactSurveyElement, SurveyQuestionUncontrolledElement } from "./reactquestion_element";
-import { QuestionCommentModel, Helpers } from "survey-core";
+import { QuestionCommentModel, Helpers, TextAreaViewModel } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { CharacterCounterComponent } from "./components/character-counter";
+import { TextAreaComponent } from "./components/textarea";
 
 export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<QuestionCommentModel> {
+  private renderCharacterCounter() : JSX.Element | null {
+    let counter = null;
+    if(!!this.question.getMaxLength()) {
+      <CharacterCounterComponent
+        counter={this.question.characterCounter}
+        remainingCharacterCounter={this.question.cssClasses.remainingCharacterCounter}>
+      </CharacterCounterComponent>;
+    }
+    return counter;
+  }
   constructor(props: any) {
     super(props);
   }
   protected renderElement(): JSX.Element {
+    if (this.question.isReadOnlyRenderDiv()) {
+      return <div>{this.question.value}</div>;
+    }
+
     const onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
     const onInput = (event: any) => {
       if (this.question.isInputTextUpdate) {
@@ -20,14 +35,31 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
       const newValue = event.target.value;
       this.question.updateRemainingCharacterCounter(newValue);
     };
-    const placeholder = this.question.renderedPlaceholder;
-    if (this.question.isReadOnlyRenderDiv()) {
-      return <div>{this.question.value}</div>;
-    }
-    const counter = !!this.question.getMaxLength() ? (<CharacterCounterComponent counter={this.question.characterCounter} remainingCharacterCounter={this.question.cssClasses.remainingCharacterCounter}></CharacterCounterComponent>) : null;
+
+    let counter = this.renderCharacterCounter();
+
+    const textAreaOptions: TextAreaViewModel = this.props.question.getTextArea();
+    /*{
+      question: this.question,
+      id: this.question.inputId,
+      className: this.question.className,
+      isDisabledAttr: this.question.isDisabledAttr,
+      isReadOnlyAttr: this.question.isReadOnlyAttr,
+      placeholder: this.question.renderedPlaceholder,
+      maxLength: this.question.getMaxLength(),
+      rows: this.question.rows,
+      cols: this.question.cols,
+      onTextAreaChange: onBlur,
+      onTextAreaInput: onInput,
+      onTextAreaKeyDown: (event) => { this.question.onKeyDown(event); }
+    };*/
+
     return (
       <>
-        <textarea
+        <TextAreaComponent viewModelOptions={textAreaOptions}></TextAreaComponent>
+        {counter}
+      </>
+    /* <textarea
           id={this.question.inputId}
           className={this.question.className}
           disabled={this.question.isDisabledAttr}
@@ -40,25 +72,28 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
           onKeyDown={(event) => { this.question.onKeyDown(event); }}
           cols={this.question.cols}
           rows={this.question.rows}
+
           aria-required={this.question.a11y_input_ariaRequired}
           aria-label={this.question.a11y_input_ariaLabel}
+
           aria-labelledby={this.question.a11y_input_ariaLabelledBy}
           aria-describedby={this.question.a11y_input_ariaDescribedBy}
           aria-invalid={this.question.a11y_input_ariaInvalid}
           aria-errormessage={this.question.a11y_input_ariaErrormessage}
           style={{ resize: this.question.resizeStyle }}
-        />
-        {counter}
-      </>
+          */
     );
   }
 }
 
 export class SurveyQuestionCommentItem extends ReactSurveyElement {
   private control: HTMLElement;
+  private textAreaOptions: TextAreaViewModel;
+
   constructor(props: any) {
     super(props);
-    this.state = { comment: this.getComment() || "" };
+    this.textAreaOptions = this.getTextArea();
+    this.state = { comment: this.textAreaOptions.getTextValue() || "" };
   }
   componentDidUpdate(prevProps: any, prevState: any): void {
     super.componentDidUpdate(prevProps, prevState);
@@ -71,7 +106,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
   protected updateDomElement(): void {
     if (!!this.control) {
       const control: any = this.control;
-      const newValue = this.getComment() || "";
+      const newValue = this.textAreaOptions.getTextValue() || "";
       if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
         control.value = newValue;
       }
@@ -85,32 +120,20 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
   protected canRender(): boolean {
     return !!this.props.question;
   }
-  protected onCommentChange(event: any): void {
-    this.props.question.onCommentChange(event);
-  }
-  protected onCommentInput(event: any): void {
-    this.props.question.onCommentInput(event);
-  }
-  protected getComment(): string {
-    return this.props.question.comment;
-  }
-  protected setComment(value: any): void {
-    this.props.question.comment = value;
-  }
-  protected getId(): string {
-    return this.props.question.commentId;
-  }
-  protected getPlaceholder(): string {
-    return this.props.question.renderedCommentPlaceholder;
+
+  protected getTextArea(): TextAreaViewModel {
+    return this.props.question.getCommentTextArea();
   }
   protected renderElement(): JSX.Element {
     const question = this.props.question;
-    let className = this.props.otherCss || this.cssClasses.comment;
     if (question.isReadOnlyRenderDiv()) {
-      const comment = this.getComment() || "";
+      const comment = this.textAreaOptions.getTextValue() || "";
       return <div>{comment}</div>;
     }
+
     return (
+      <TextAreaComponent viewModelOptions={this.textAreaOptions}></TextAreaComponent>
+      /*
       <textarea
         id={this.getId()}
         className={className}
@@ -121,31 +144,17 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
         placeholder={this.getPlaceholder()}
         onBlur={(e) => { this.onCommentChange(e); }}
         onInput={(e) => this.onCommentInput(e)}
-        aria-required={question.isRequired || question.a11y_input_ariaRequired}
+        aria-required={question.ariaRequired || question.a11y_input_ariaRequired}
         aria-label={question.ariaLabel || question.a11y_input_ariaLabel}
         style={{ resize: question.resizeStyle }}
       />
+      */
     );
   }
 }
 export class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
-  protected onCommentChange(event: any): void {
-    this.props.question.onOtherValueChange(event);
-  }
-  protected onCommentInput(event: any): void {
-    this.props.question.onOtherValueInput(event);
-  }
-  protected getComment(): string {
-    return this.props.question.otherValue;
-  }
-  protected setComment(value: any): void {
-    this.props.question.otherValue = value;
-  }
-  protected getId(): string {
-    return this.props.question.otherId;
-  }
-  protected getPlaceholder(): string {
-    return this.props.question.otherPlaceholder;
+  protected getTextArea(): TextAreaViewModel {
+    return this.props.question.getOtherTextArea();
   }
 }
 
diff --git a/src/utils/textarea.ts b/src/utils/textarea.ts
new file mode 100644
index 0000000000..a1c1680470
--- /dev/null
+++ b/src/utils/textarea.ts
@@ -0,0 +1,94 @@
+export interface ITextArea {
+  question: any;
+  id: string;
+  className: string;
+  isDisabledAttr: boolean;
+  isReadOnlyAttr?: boolean;
+  placeholder: string;
+  maxLength: number;
+  rows: number;
+  cols?: number;
+  setTextValue?: (newValue: any) => void;
+  getTextValue?: () => any;
+  onTextAreaChange?: (event: any) => void;
+  onTextAreaInput?: (event: any) => void;
+  onTextAreaKeyDown?: (event: any) => void;
+
+  ariaRequired: "true" | "false";
+  ariaLabel: string;
+  ariaInvalid?: "true" | "false";
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+  ariaErrormessage?: string;
+}
+
+export class TextAreaViewModel {
+  constructor(private options: ITextArea) { }
+
+  public getTextValue(): string {
+    if (!!this.options.getTextValue)
+      return this.options.getTextValue();
+    return "";
+  }
+  public setTextValue(value: any): void {
+    if (!!this.options.setTextValue)
+      this.options.setTextValue(value);
+  }
+  public onTextAreaChange(event: any): void {
+    if (!!this.options.onTextAreaChange)
+      this.options.onTextAreaChange(event);
+  }
+  public onTextAreaInput(event: any): void {
+    if (!!this.options.onTextAreaInput)
+      this.options.onTextAreaInput(event);
+  }
+  public onTextAreaKeyDown(event: any): void {
+    if (!!this.options.onTextAreaKeyDown)
+      this.options.onTextAreaKeyDown(event);
+  }
+  get question(): any {
+    return this.options.question;
+  }
+  get id(): string {
+    return this.options.id;
+  }
+  get placeholder(): string {
+    return this.options.placeholder;
+  }
+  get className(): string {
+    return this.options.className;
+  }
+  get maxLength(): number {
+    return this.options.maxLength;
+  }
+  get rows(): number {
+    return this.options.rows;
+  }
+  get cols(): number | undefined {
+    return this.options.cols;
+  }
+  get isDisabledAttr(): boolean {
+    return this.options.isDisabledAttr;
+  }
+  get isReadOnlyAttr(): boolean | undefined {
+    return this.options.isReadOnlyAttr;
+  }
+  get ariaRequired(): "true" | "false" {
+    return this.options.ariaRequired;
+  }
+  get ariaLabel(): string {
+    return this.options.ariaLabel;
+  }
+  get ariaInvalid(): "true" | "false" {
+    return this.options.ariaInvalid;
+  }
+  get ariaLabelledBy(): string {
+    return this.options.ariaLabelledBy;
+  }
+  get ariaDescribedBy(): string {
+    return this.options.ariaDescribedBy;
+  }
+  get ariaErrormessage(): string {
+    return this.options.ariaErrormessage;
+  }
+}
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-comment-V2.snap.html b/tests/markup/snapshots/checkbox-comment-V2.snap.html
index 9076cfa569..eca5213d8d 100644
--- a/tests/markup/snapshots/checkbox-comment-V2.snap.html
+++ b/tests/markup/snapshots/checkbox-comment-V2.snap.html
@@ -19,6 +19,6 @@
 	<div>
 		<span class="sv-string-viewer">Other (describe)</span>
 	</div>
-	<textarea aria-label="name" class="sd-comment sd-input sd-selectbase__other" id="testid0_comment" placeholder="" style="resize:both;">
+	<textarea aria-label="name" class="sd-comment sd-input" id="testid0_comment" placeholder="" style="resize:both;">
 	</textarea>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
index 56349a5e0b..1341860d89 100644
--- a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
+++ b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
@@ -40,6 +40,6 @@
 	<div>
 		<span class="sv-string-viewer">Other (describe)</span>
 	</div>
-	<textarea aria-label="name" aria-required="false" class="sv_q_other sv_q_radiogroup_other" id="testid0_comment" placeholder="" rows="3" style="resize:both;">
+	<textarea aria-label="name" aria-required="false" id="testid0_comment" placeholder="" rows="3" style="resize:both;">
 	</textarea>
 </div>
\ No newline at end of file
diff --git a/tests/surveyquestiontests.ts b/tests/surveyquestiontests.ts
index 90625501bb..97e6665dc0 100644
--- a/tests/surveyquestiontests.ts
+++ b/tests/surveyquestiontests.ts
@@ -7852,3 +7852,72 @@ QUnit.test("question.isDefaultValue", function (assert) {
   assert.equal(q3.isValueDefault, false, "q3 #4");
   assert.equal(q4.isValueDefault, false, "q4 #4");
 });
+
+QUnit.test("TextAreaOptions", function (assert) {
+  StylesManager.applyTheme("defaultV2");
+  Question["questionCounter"] = 101;
+
+  const survey = new SurveyModel({
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "dropdown",
+            "name": "q1",
+            "defaultValue": "other",
+            "showCommentArea": true,
+            "commentPlaceholder": "Comment placeholder",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ],
+            "showOtherItem": true,
+            "otherPlaceholder": "Other placeholder"
+          },
+          {
+            "type": "comment",
+            "name": "q2"
+          }
+        ]
+      }
+    ]
+  });
+
+  const q1 = <QuestionDropdownModel>survey.getQuestionByName("q1");
+  const otherOptions = q1.getOtherTextArea();
+  const commentOptions = q1.getCommentTextArea();
+
+  const q2 = <QuestionCommentModel>survey.getQuestionByName("q2");
+  const textAreaOptions = q2.getTextArea();
+
+  assert.equal(otherOptions.id, "sq_101_other", "otherOptions id");
+  assert.equal(otherOptions.className, "sd-input sd-comment sd-selectbase__other", "otherOptions className");
+  assert.equal(otherOptions.isDisabledAttr, "", "otherOptions isDisabledAttr");
+  assert.equal(otherOptions.isReadOnlyAttr, undefined, "otherOptions isReadOnlyAttr");
+  assert.equal(otherOptions.placeholder, "Other placeholder", "otherOptions placeholder");
+  assert.equal(otherOptions.maxLength, undefined, "otherOptions maxLength");
+  assert.equal(otherOptions.cols, undefined, "otherOptions cols");
+  assert.equal(otherOptions.rows, undefined, "otherOptions rows");
+
+  assert.equal(commentOptions.id, "sq_101_comment", "commentOptions id");
+  assert.equal(commentOptions.className, "sd-input sd-comment", "commentOptions className");
+  assert.equal(commentOptions.isDisabledAttr, "", "commentOptions isDisabledAttr");
+  assert.equal(commentOptions.isReadOnlyAttr, undefined, "commentOptions isReadOnlyAttr");
+  assert.equal(commentOptions.placeholder, "Comment placeholder", "commentOptions placeholder");
+  assert.equal(commentOptions.maxLength, undefined, "commentOptions maxLength");
+  assert.equal(commentOptions.cols, undefined, "commentOptions cols");
+  assert.equal(commentOptions.rows, undefined, "commentOptions rows");
+
+  assert.equal(textAreaOptions.id, "sq_102i", "textAreaOptions id");
+  assert.equal(textAreaOptions.className, "sd-input sd-comment", "textAreaOptions className");
+  assert.equal(textAreaOptions.isDisabledAttr, "", "textAreaOptions isDisabledAttr");
+  assert.equal(textAreaOptions.isReadOnlyAttr, false, "textAreaOptions isReadOnlyAttr");
+  assert.equal(textAreaOptions.placeholder, "", "textAreaOptions placeholder");
+  assert.equal(textAreaOptions.maxLength, undefined, "textAreaOptions maxLength");
+  assert.equal(textAreaOptions.cols, 50, "textAreaOptions cols");
+  assert.equal(textAreaOptions.rows, 4, "textAreaOptions rows");
+
+  StylesManager.applyTheme("default");
+});
\ No newline at end of file

From 28d8f06825bbeca0ba60fb2b5557939b19efcff8 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 26 Jul 2024 17:20:06 +0300
Subject: [PATCH 02/27] work for textarea component enhancement

---
 src/entries/core-wo-model.ts                  |   2 +-
 src/entries/knockout-ui-model.ts              |   1 +
 src/entries/react-ui-model.ts                 |   2 +-
 .../components/text-area/text-area.html       |  25 ++++
 .../components/text-area/text-area.ts         |  15 +++
 src/knockout/templates/comment.html           |  76 ++----------
 src/knockout/templates/question-comment.html  |  15 +--
 src/question.ts                               |   6 +-
 src/question_baseselect.ts                    |   4 +-
 src/question_comment.ts                       |  15 ++-
 .../{textarea.tsx => text-area.tsx}           |  42 ++-----
 src/react/reactquestion_comment.tsx           | 113 ++----------------
 src/utils/{textarea.ts => text-area.ts}       |   5 -
 13 files changed, 93 insertions(+), 228 deletions(-)
 create mode 100644 src/knockout/components/text-area/text-area.html
 create mode 100644 src/knockout/components/text-area/text-area.ts
 rename src/react/components/{textarea.tsx => text-area.tsx} (55%)
 rename src/utils/{textarea.ts => text-area.ts} (93%)

diff --git a/src/entries/core-wo-model.ts b/src/entries/core-wo-model.ts
index 7519dfc402..c8364fe68d 100644
--- a/src/entries/core-wo-model.ts
+++ b/src/entries/core-wo-model.ts
@@ -18,4 +18,4 @@ export * from "../utils/animation";
 export * from "../actions/adaptive-container";
 export * from "../actions/container";
 export * from "../utils/dragOrClickHelper";
-export * from "../utils/textarea";
+export * from "../utils/text-area";
diff --git a/src/entries/knockout-ui-model.ts b/src/entries/knockout-ui-model.ts
index 54af86d7a8..77315c987c 100644
--- a/src/entries/knockout-ui-model.ts
+++ b/src/entries/knockout-ui-model.ts
@@ -41,6 +41,7 @@ export { QuestionSignaturePad } from "../knockout/koquestion_signaturepad";
 export { QuestionCustom } from "../knockout/koquestion_custom";
 export { QuestionButtonGroup } from "../knockout/koquestion_buttongroup";
 
+export * from "../knockout/components/text-area/text-area";
 export * from "../knockout/components/action-bar/action-bar";
 export * from "../knockout/components/boolean-checkbox/boolean-checkbox";
 export * from "../knockout/components/boolean-radio/boolean-radio";
diff --git a/src/entries/react-ui-model.ts b/src/entries/react-ui-model.ts
index 207371b762..f59ae40611 100644
--- a/src/entries/react-ui-model.ts
+++ b/src/entries/react-ui-model.ts
@@ -1,5 +1,5 @@
 // react
-export { TextAreaComponent } from "../react/components/textarea";
+export { TextAreaComponent } from "../react/components/text-area";
 export { Survey, attachKey2click } from "../react/reactSurvey";
 export { ReactSurveyElementsWrapper } from "../react/reactsurveymodel";
 export { SurveyNavigationBase } from "../react/reactSurveyNavigationBase";
diff --git a/src/knockout/components/text-area/text-area.html b/src/knockout/components/text-area/text-area.html
new file mode 100644
index 0000000000..d9c0acc0dd
--- /dev/null
+++ b/src/knockout/components/text-area/text-area.html
@@ -0,0 +1,25 @@
+<textarea data-bind="
+  attr: { 
+    id: $data.model.id, 
+    'readonly': $data.model.isReadOnlyAttr, 
+    'disabled': $data.model.isDisabledAttr, 
+    maxLength: $data.model.maxLength, 
+    cols: $data.model.cols, 
+    rows: $data.model.rows, 
+    placeholder: $data.model.placeholder, 
+    'aria-required': $data.model.ariaRequired,
+    'aria-label': $data.model.ariaLabel,
+    'aria-labelledby': $data.model.ariaLabelledBy, 
+    'aria-describedby': $data.model.ariaDescribedBy, 
+    'aria-invalid': $data.model.ariaInvalid, 
+    'aria-errormessage': $data.model.ariaErrormessage
+  }, 
+  event: { 
+    blur: function(s, e) { $data.model.onTextAreaChange(e); },
+    input: function(s, e) { $data.model.onTextAreaInput(e); },
+    keydown: function(s, e) { $data.model.onTextAreaKeyDown(e); return true; }
+  }, 
+  value: $data.value, 
+  css: $data.model.className,
+  style: { resize: $data.model.question.resizeStyle },
+"></textarea>
diff --git a/src/knockout/components/text-area/text-area.ts b/src/knockout/components/text-area/text-area.ts
new file mode 100644
index 0000000000..6151045834
--- /dev/null
+++ b/src/knockout/components/text-area/text-area.ts
@@ -0,0 +1,15 @@
+import * as ko from "knockout";
+const template = require("./text-area.html");
+
+export var TextAreaViewModel: any;
+
+ko.components.register("sv-text-area", {
+  viewModel: {
+    createViewModel: (params: any, componentInfo: any) => {
+      return {
+        model: params, value: ko.observable(params.getTextValue() || "")
+      };
+    },
+  },
+  template: template,
+});
diff --git a/src/knockout/templates/comment.html b/src/knockout/templates/comment.html
index cd1164a4b7..6f57cca318 100644
--- a/src/knockout/templates/comment.html
+++ b/src/knockout/templates/comment.html
@@ -1,72 +1,18 @@
 <script type="text/html" id="survey-comment">
-  <!-- ko if: !question.isReadOnlyRenderDiv() -->
-  <!-- ko template: { name: 'survey-textarea',  data: question.getCommentTextArea() } -->
-  <!-- /ko -->
-<!-- <textarea data-bind="attr: { 
-    id: question.commentId, 
-    maxLength: question.getOthersMaxLength(), 
-    rows: question.commentAreaRows, 
-    'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 
-    'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, 
-    placeholder: question.renderedCommentPlaceholder }, 
-        event: { input: function(s, e) { $data.question.onCommentInput(e); } }, 
-        value: $data.question.comment, 
-        visible: $data.visible,
-        disable: $data.question.isInputReadOnly,
-        style: { resize: question.resizeStyle },
-        css: $data.question.cssClasses.other"></textarea> -->
-<!--/ko-->
-
-<!--ko if: question.isReadOnlyRenderDiv() -->
+<!-- ko if: !question.isReadOnlyRenderDiv() -->
+<!-- ko component: { name: 'sv-text-area', params: question.getCommentTextArea() } -->
+<!-- /ko -->
+<!-- /ko-->
+<!-- ko if: question.isReadOnlyRenderDiv() -->
 <div data-bind="text: question.comment"></div>
 <!--/ko-->
 </script>
 <script type="text/html" id="survey-other">
-  <!-- ko if: !question.isReadOnlyRenderDiv() -->
-  <!-- ko template: { name: 'survey-textarea',  data: question.getOtherTextArea() } -->
-  <!-- /ko -->
-<!-- <textarea data-bind="attr: { 
-    id: question.otherId, 
-    maxLength: question.getOthersMaxLength(), 
-    rows: question.commentAreaRows, 
-    'aria-required': question.ariaRequired || question.a11y_input_ariaRequired, 
-    'aria-label': question.ariaLabel || question.a11y_input_ariaLabel, 
-    placeholder: question.otherPlaceholder }, 
-        event: { input: function(s, e) { $data.question.onOtherValueInput(e); } }, 
-        value: $data.question.otherValue, 
-        visible: $data.visible,
-        disable: $data.question.isInputReadOnly,
-        style: { resize: question.resizeStyle },
-        css: $data.question.cssClasses.other"></textarea> -->
-<!--/ko-->
-
-<!--ko if: question.isReadOnlyRenderDiv() -->
+<!-- ko if: !question.isReadOnlyRenderDiv() -->
+<!-- ko component: { name: 'sv-text-area', params: question.getOtherTextArea() } -->
+<!-- /ko -->
+<!-- /ko-->
+<!-- ko if: question.isReadOnlyRenderDiv() -->
 <div data-bind="text: question.otherValue"></div>
-<!--/ko-->
-</script>
-
-<script type="text/html" id="survey-textarea">
-  <textarea data-bind="
-  attr: { 
-    id: $data.id, 
-    'readonly': $data.isReadOnlyAttr, 
-    'disabled': $data.isDisabledAttr, 
-    maxLength: $data.maxLength, 
-    cols: $data.cols, 
-    rows: $data.rows, 
-    placeholder: $data.placeholder, 
-    'aria-required': $data.ariaRequired,
-    'aria-label': $data.ariaLabel,
-    'aria-labelledby': $data.ariaLabelledBy, 
-    'aria-describedby': $data.ariaDescribedBy, 
-    'aria-invalid': $data.ariaInvalid, 
-    'aria-errormessage': $data.ariaErrormessage
-  }, 
-  event: { 
-    blur: function(s, e) { $data.onTextAreaChange(e); },
-    input: function(s, e) { $data.onTextAreaInput(e); } 
-  }, 
-  css: $data.className,
-  style: { resize: $data.question.resizeStyle },
-"></textarea>
+<!-- /ko-->
 </script>
\ No newline at end of file
diff --git a/src/knockout/templates/question-comment.html b/src/knockout/templates/question-comment.html
index 1849883e93..3f843a807f 100644
--- a/src/knockout/templates/question-comment.html
+++ b/src/knockout/templates/question-comment.html
@@ -1,19 +1,14 @@
 <script type="text/html" id="survey-question-comment">
 <!--ko if: !question.isReadOnlyRenderDiv() -->
-  <!-- ko template: { name: 'survey-textarea',  data: question.getTextArea() } -->
+  <!-- ko component: { name: 'sv-text-area', params: question.getTextArea() } -->
   <!-- /ko -->
-<!-- <textarea data-bind="attr: {'readonly': question.isReadOnlyAttr, 'disabled': question.isDisabledAttr, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.a11y_input_ariaLabel, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage}, 
-  event: { input: function(s, e) { question.onInput(e); }, keydown: function(s, e) { question.onKeyDown(e); return true; } }, 
-  value: question.value, 
-  style: { resize: question.resizeStyle },
-  css: question.className"></textarea> -->
-  <!--ko if: question.getMaxLength() -->
+  <!-- ko if: question.getMaxLength() -->
   <!-- ko component: { name: 'sv-character-counter', params: { counter: question.characterCounter, remainingCharacterCounter: question.cssClasses.remainingCharacterCounter } } -->
   <!-- /ko -->
-  <!--/ko-->
+  <!-- /ko-->
 <!--/ko-->
 
-<!--ko if: question.isReadOnlyRenderDiv() -->
+<!-- ko if: question.isReadOnlyRenderDiv() -->
 <div data-bind="text: question.value"></div>
-<!--/ko-->
+<!-- /ko-->
 </script>
\ No newline at end of file
diff --git a/src/question.ts b/src/question.ts
index d4ab65b465..8326dea2bb 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -22,7 +22,7 @@ import { ConsoleWarnings } from "./console-warnings";
 import { ProcessValue } from "./conditionProcessValue";
 import { ITheme } from "./themes";
 import { DomWindowHelper } from "./global_variables_utils";
-import { ITextArea, TextAreaViewModel } from "./utils/textarea";
+import { ITextArea, TextAreaViewModel } from "./utils/text-area";
 
 export interface IConditionObject {
   name: string;
@@ -2493,11 +2493,9 @@ export class Question extends SurveyElement<Question>
       placeholder: this.renderedCommentPlaceholder,
       rows: this.commentAreaRows,
       maxLength: this.getOthersMaxLength(),
-      getTextValue: () => { return this.comment; },
-      setTextValue: (newValue) => { this.comment = newValue; },
       ariaRequired: this.a11y_input_ariaRequired,
       ariaLabel: this.a11y_input_ariaLabel,
-
+      getTextValue: () => { return this.comment; },
       onTextAreaChange: (e) => { this.onCommentChange(e); },
       onTextAreaInput: (e) => { this.onCommentInput(e); },
     };
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index f711485883..f29759c0e7 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -13,7 +13,7 @@ import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { classesToSelector, mergeValues } from "./utils/utils";
-import { ITextArea, TextAreaViewModel } from "./utils/textarea";
+import { ITextArea, TextAreaViewModel } from "./utils/text-area";
 
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
@@ -1994,8 +1994,6 @@ export class QuestionSelectBase extends Question {
       ariaRequired: this.ariaRequired || this.a11y_input_ariaRequired,
       ariaLabel: this.ariaLabel || this.a11y_input_ariaLabel,
       getTextValue: () => { return this.otherValue; },
-      setTextValue: (newValue) => { this.otherValue = newValue; },
-
       onTextAreaChange: (e) => { this.onOtherValueChange(e); },
       onTextAreaInput: (e) => { this.onOtherValueInput(e); },
     };
diff --git a/src/question_comment.ts b/src/question_comment.ts
index f2cf3bec99..cd2bd8b4eb 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -3,7 +3,8 @@ import { QuestionFactory } from "./questionfactory";
 import { QuestionTextBase } from "./question_textbase";
 import { increaseHeightByContent } from "./utils/utils";
 import { settings } from "./settings";
-import { ITextArea, TextAreaViewModel } from "./utils/textarea";
+import { ITextArea, TextAreaViewModel } from "./utils/text-area";
+import { Helpers } from "./helpers";
 
 /**
  * A class that describes the Long Text question type.
@@ -127,6 +128,13 @@ export class QuestionCommentModel extends QuestionTextBase {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
   public getTextArea(): ITextArea {
+    const _this = this;
+    const updateQuestionValue = (newValue: any) => {
+      if (!Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
+        _this.value = newValue;
+      }
+    };
+
     const options: ITextArea = {
       question: this,
       id: this.inputId,
@@ -143,9 +151,8 @@ export class QuestionCommentModel extends QuestionTextBase {
       ariaDescribedBy: this.a11y_input_ariaDescribedBy,
       ariaInvalid: this.a11y_input_ariaInvalid,
       ariaErrormessage: this.a11y_input_ariaErrormessage,
-
-      // onTextAreaChange: onBlur,
-      // onTextAreaInput: onInput,
+      getTextValue: () => { return this.value; },
+      onTextAreaChange: (e) => { updateQuestionValue(e.target.value); },
       onTextAreaInput: (event) => { this.onInput(event); },
       onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
     };
diff --git a/src/react/components/textarea.tsx b/src/react/components/text-area.tsx
similarity index 55%
rename from src/react/components/textarea.tsx
rename to src/react/components/text-area.tsx
index 1d0bf04119..273e68dd82 100644
--- a/src/react/components/textarea.tsx
+++ b/src/react/components/text-area.tsx
@@ -1,43 +1,19 @@
 import React from "react";
-import { Helpers, TextAreaViewModel } from "survey-core";
+import { TextAreaViewModel } from "survey-core";
 import { ReactElementFactory } from "../element-factory";
 import { SurveyElementBase } from "../reactquestion_element";
 
 interface ITextAreaProps {
-  viewModelOptions: TextAreaViewModel;
+  viewModel: TextAreaViewModel;
 }
 
 export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
-  private control: HTMLElement;
-
   constructor(props: ITextAreaProps) {
     super(props);
     this.state = { comment: this.viewModel.getTextValue() || "" };
   }
   get viewModel(): TextAreaViewModel {
-    return this.props.viewModelOptions;
-  }
-  componentDidUpdate(prevProps: any, prevState: any): void {
-    super.componentDidUpdate(prevProps, prevState);
-    this.updateDomElement();
-  }
-  componentDidMount(): void {
-    super.componentDidMount();
-    this.updateDomElement();
-  }
-  protected updateDomElement(): void {
-    if (!!this.control) {
-      const control: any = this.control;
-      const newValue = this.viewModel.getTextValue() || "";
-      if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
-        control.value = newValue;
-      }
-    }
-  }
-  protected setControl(element: HTMLElement | null): void {
-    if(!!element) {
-      this.control = element;
-    }
+    return this.props.viewModel;
   }
   protected canRender(): boolean {
     return !!this.viewModel.question;
@@ -48,19 +24,18 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
       <textarea
         id={this.viewModel.id}
         className={this.viewModel.className}
-        ref={(textarea) => (this.setControl(textarea))}
         disabled={this.viewModel.isDisabledAttr}
         readOnly={this.viewModel.isReadOnlyAttr}
         rows={this.viewModel.rows}
         cols={this.viewModel.cols}
         placeholder={this.viewModel.placeholder}
         maxLength={this.viewModel.maxLength}
-        onBlur={this.viewModel.onTextAreaChange}
-        onInput={this.viewModel.onTextAreaInput}
-        onKeyDown={this.viewModel.onTextAreaKeyDown}
+        value={this.state.comment}
+        onChange={(event: any) => { this.viewModel.onTextAreaInput(event); this.setState({ comment: event.target.value }); }}
+        onBlur={(event: any) => { this.viewModel.onTextAreaChange(event); }}
+        onKeyDown={(event: any) => { this.viewModel.onTextAreaKeyDown(event); }}
         aria-required={this.viewModel.ariaRequired}
         aria-label={this.viewModel.ariaLabel}
-
         aria-labelledby={this.viewModel.ariaLabelledBy}
         aria-describedby={this.viewModel.ariaDescribedBy}
         aria-invalid={this.viewModel.ariaInvalid}
@@ -69,9 +44,8 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
       />
     );
   }
-
 }
 
-ReactElementFactory.Instance.registerElement("sv-textarea", (props) => {
+ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
   return React.createElement(TextAreaComponent, props);
 });
\ No newline at end of file
diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index 53c9ca214e..7bc995aaed 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -3,7 +3,7 @@ import { ReactSurveyElement, SurveyQuestionUncontrolledElement } from "./reactqu
 import { QuestionCommentModel, Helpers, TextAreaViewModel } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { CharacterCounterComponent } from "./components/character-counter";
-import { TextAreaComponent } from "./components/textarea";
+import { TextAreaComponent } from "./components/text-area";
 
 export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<QuestionCommentModel> {
   private renderCharacterCounter() : JSX.Element | null {
@@ -24,136 +24,47 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
       return <div>{this.question.value}</div>;
     }
 
-    const onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
-    const onInput = (event: any) => {
-      if (this.question.isInputTextUpdate) {
-        this.updateValueOnEvent(event);
-      } else {
-        this.question.updateElement();
-      }
-
-      const newValue = event.target.value;
-      this.question.updateRemainingCharacterCounter(newValue);
-    };
-
-    let counter = this.renderCharacterCounter();
-
-    const textAreaOptions: TextAreaViewModel = this.props.question.getTextArea();
-    /*{
-      question: this.question,
-      id: this.question.inputId,
-      className: this.question.className,
-      isDisabledAttr: this.question.isDisabledAttr,
-      isReadOnlyAttr: this.question.isReadOnlyAttr,
-      placeholder: this.question.renderedPlaceholder,
-      maxLength: this.question.getMaxLength(),
-      rows: this.question.rows,
-      cols: this.question.cols,
-      onTextAreaChange: onBlur,
-      onTextAreaInput: onInput,
-      onTextAreaKeyDown: (event) => { this.question.onKeyDown(event); }
-    };*/
-
+    const counter = this.renderCharacterCounter();
+    const textAreaModel: TextAreaViewModel = this.props.question.getTextArea();
     return (
       <>
-        <TextAreaComponent viewModelOptions={textAreaOptions}></TextAreaComponent>
+        <TextAreaComponent viewModel={textAreaModel}></TextAreaComponent>
         {counter}
       </>
-    /* <textarea
-          id={this.question.inputId}
-          className={this.question.className}
-          disabled={this.question.isDisabledAttr}
-          readOnly={this.question.isReadOnlyAttr}
-          ref={(textarea) => (this.setControl(textarea))}
-          maxLength={this.question.getMaxLength()}
-          placeholder={placeholder}
-          onBlur={onBlur}
-          onInput={onInput}
-          onKeyDown={(event) => { this.question.onKeyDown(event); }}
-          cols={this.question.cols}
-          rows={this.question.rows}
-
-          aria-required={this.question.a11y_input_ariaRequired}
-          aria-label={this.question.a11y_input_ariaLabel}
-
-          aria-labelledby={this.question.a11y_input_ariaLabelledBy}
-          aria-describedby={this.question.a11y_input_ariaDescribedBy}
-          aria-invalid={this.question.a11y_input_ariaInvalid}
-          aria-errormessage={this.question.a11y_input_ariaErrormessage}
-          style={{ resize: this.question.resizeStyle }}
-          */
     );
   }
 }
 
 export class SurveyQuestionCommentItem extends ReactSurveyElement {
-  private control: HTMLElement;
-  private textAreaOptions: TextAreaViewModel;
+  private textAreaModel: TextAreaViewModel;
 
   constructor(props: any) {
     super(props);
-    this.textAreaOptions = this.getTextArea();
-    this.state = { comment: this.textAreaOptions.getTextValue() || "" };
-  }
-  componentDidUpdate(prevProps: any, prevState: any): void {
-    super.componentDidUpdate(prevProps, prevState);
-    this.updateDomElement();
-  }
-  componentDidMount(): void {
-    super.componentDidMount();
-    this.updateDomElement();
-  }
-  protected updateDomElement(): void {
-    if (!!this.control) {
-      const control: any = this.control;
-      const newValue = this.textAreaOptions.getTextValue() || "";
-      if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
-        control.value = newValue;
-      }
-    }
-  }
-  protected setControl(element: HTMLElement | null): void {
-    if(!!element) {
-      this.control = element;
-    }
+    this.textAreaModel = this.getTextAreaModel();
   }
+
   protected canRender(): boolean {
     return !!this.props.question;
   }
 
-  protected getTextArea(): TextAreaViewModel {
+  protected getTextAreaModel(): TextAreaViewModel {
     return this.props.question.getCommentTextArea();
   }
+
   protected renderElement(): JSX.Element {
     const question = this.props.question;
     if (question.isReadOnlyRenderDiv()) {
-      const comment = this.textAreaOptions.getTextValue() || "";
+      const comment = this.textAreaModel.getTextValue() || "";
       return <div>{comment}</div>;
     }
 
     return (
-      <TextAreaComponent viewModelOptions={this.textAreaOptions}></TextAreaComponent>
-      /*
-      <textarea
-        id={this.getId()}
-        className={className}
-        ref={(textarea) => (this.setControl(textarea))}
-        disabled={this.isDisplayMode}
-        maxLength={question.getOthersMaxLength()}
-        rows={question.commentAreaRows}
-        placeholder={this.getPlaceholder()}
-        onBlur={(e) => { this.onCommentChange(e); }}
-        onInput={(e) => this.onCommentInput(e)}
-        aria-required={question.ariaRequired || question.a11y_input_ariaRequired}
-        aria-label={question.ariaLabel || question.a11y_input_ariaLabel}
-        style={{ resize: question.resizeStyle }}
-      />
-      */
+      <TextAreaComponent viewModel={this.textAreaModel}></TextAreaComponent>
     );
   }
 }
 export class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
-  protected getTextArea(): TextAreaViewModel {
+  protected getTextAreaModel(): TextAreaViewModel {
     return this.props.question.getOtherTextArea();
   }
 }
diff --git a/src/utils/textarea.ts b/src/utils/text-area.ts
similarity index 93%
rename from src/utils/textarea.ts
rename to src/utils/text-area.ts
index a1c1680470..9599930366 100644
--- a/src/utils/textarea.ts
+++ b/src/utils/text-area.ts
@@ -8,7 +8,6 @@ export interface ITextArea {
   maxLength: number;
   rows: number;
   cols?: number;
-  setTextValue?: (newValue: any) => void;
   getTextValue?: () => any;
   onTextAreaChange?: (event: any) => void;
   onTextAreaInput?: (event: any) => void;
@@ -30,10 +29,6 @@ export class TextAreaViewModel {
       return this.options.getTextValue();
     return "";
   }
-  public setTextValue(value: any): void {
-    if (!!this.options.setTextValue)
-      this.options.setTextValue(value);
-  }
   public onTextAreaChange(event: any): void {
     if (!!this.options.onTextAreaChange)
       this.options.onTextAreaChange(event);

From a83d7ec2df9d89bc93cf1bb1d1d0ee30cef99788 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 26 Jul 2024 18:34:42 +0300
Subject: [PATCH 03/27] rename TextAreaViewModel -> TextAreaModel

---
 src/question.ts                     |  4 ++--
 src/question_baseselect.ts          |  4 ++--
 src/question_comment.ts             |  4 ++--
 src/react/components/text-area.tsx  |  6 +++---
 src/react/reactquestion_comment.tsx | 10 +++++-----
 src/utils/text-area.ts              |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/question.ts b/src/question.ts
index 8326dea2bb..16beb01f98 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -22,7 +22,7 @@ import { ConsoleWarnings } from "./console-warnings";
 import { ProcessValue } from "./conditionProcessValue";
 import { ITheme } from "./themes";
 import { DomWindowHelper } from "./global_variables_utils";
-import { ITextArea, TextAreaViewModel } from "./utils/text-area";
+import { ITextArea, TextAreaModel } from "./utils/text-area";
 
 export interface IConditionObject {
   name: string;
@@ -2499,7 +2499,7 @@ export class Question extends SurveyElement<Question>
       onTextAreaChange: (e) => { this.onCommentChange(e); },
       onTextAreaInput: (e) => { this.onCommentInput(e); },
     };
-    return new TextAreaViewModel(options);
+    return new TextAreaModel(options);
   }
 
   @property() renderAs: string;
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index f29759c0e7..84a7f43e0a 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -13,7 +13,7 @@ import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { classesToSelector, mergeValues } from "./utils/utils";
-import { ITextArea, TextAreaViewModel } from "./utils/text-area";
+import { ITextArea, TextAreaModel } from "./utils/text-area";
 
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
@@ -1997,7 +1997,7 @@ export class QuestionSelectBase extends Question {
       onTextAreaChange: (e) => { this.onOtherValueChange(e); },
       onTextAreaInput: (e) => { this.onOtherValueInput(e); },
     };
-    return new TextAreaViewModel(options);
+    return new TextAreaModel(options);
   }
 }
 /**
diff --git a/src/question_comment.ts b/src/question_comment.ts
index cd2bd8b4eb..cd0021edf2 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -3,7 +3,7 @@ import { QuestionFactory } from "./questionfactory";
 import { QuestionTextBase } from "./question_textbase";
 import { increaseHeightByContent } from "./utils/utils";
 import { settings } from "./settings";
-import { ITextArea, TextAreaViewModel } from "./utils/text-area";
+import { ITextArea, TextAreaModel } from "./utils/text-area";
 import { Helpers } from "./helpers";
 
 /**
@@ -156,7 +156,7 @@ export class QuestionCommentModel extends QuestionTextBase {
       onTextAreaInput: (event) => { this.onInput(event); },
       onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
     };
-    return new TextAreaViewModel(options);
+    return new TextAreaModel(options);
   }
 }
 Serializer.addClass(
diff --git a/src/react/components/text-area.tsx b/src/react/components/text-area.tsx
index 273e68dd82..bdbe31f5fc 100644
--- a/src/react/components/text-area.tsx
+++ b/src/react/components/text-area.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { TextAreaViewModel } from "survey-core";
+import { TextAreaModel } from "survey-core";
 import { ReactElementFactory } from "../element-factory";
 import { SurveyElementBase } from "../reactquestion_element";
 
 interface ITextAreaProps {
-  viewModel: TextAreaViewModel;
+  viewModel: TextAreaModel;
 }
 
 export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
@@ -12,7 +12,7 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
     super(props);
     this.state = { comment: this.viewModel.getTextValue() || "" };
   }
-  get viewModel(): TextAreaViewModel {
+  get viewModel(): TextAreaModel {
     return this.props.viewModel;
   }
   protected canRender(): boolean {
diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index 7bc995aaed..3a6d566b31 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactSurveyElement, SurveyQuestionUncontrolledElement } from "./reactquestion_element";
-import { QuestionCommentModel, Helpers, TextAreaViewModel } from "survey-core";
+import { QuestionCommentModel, TextAreaModel } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { CharacterCounterComponent } from "./components/character-counter";
 import { TextAreaComponent } from "./components/text-area";
@@ -25,7 +25,7 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
     }
 
     const counter = this.renderCharacterCounter();
-    const textAreaModel: TextAreaViewModel = this.props.question.getTextArea();
+    const textAreaModel: TextAreaModel = this.props.question.getTextArea();
     return (
       <>
         <TextAreaComponent viewModel={textAreaModel}></TextAreaComponent>
@@ -36,7 +36,7 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
 }
 
 export class SurveyQuestionCommentItem extends ReactSurveyElement {
-  private textAreaModel: TextAreaViewModel;
+  private textAreaModel: TextAreaModel;
 
   constructor(props: any) {
     super(props);
@@ -47,7 +47,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
     return !!this.props.question;
   }
 
-  protected getTextAreaModel(): TextAreaViewModel {
+  protected getTextAreaModel(): TextAreaModel {
     return this.props.question.getCommentTextArea();
   }
 
@@ -64,7 +64,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
   }
 }
 export class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
-  protected getTextAreaModel(): TextAreaViewModel {
+  protected getTextAreaModel(): TextAreaModel {
     return this.props.question.getOtherTextArea();
   }
 }
diff --git a/src/utils/text-area.ts b/src/utils/text-area.ts
index 9599930366..81586a244a 100644
--- a/src/utils/text-area.ts
+++ b/src/utils/text-area.ts
@@ -21,7 +21,7 @@ export interface ITextArea {
   ariaErrormessage?: string;
 }
 
-export class TextAreaViewModel {
+export class TextAreaModel {
   constructor(private options: ITextArea) { }
 
   public getTextValue(): string {

From 5ee22ed9544ab105f8bc4602177f6f0e942708d1 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 29 Jul 2024 14:01:24 +0300
Subject: [PATCH 04/27] work for textarea component enhancement: fix autoGrow

---
 src/knockout/components/text-area/text-area.ts |  2 ++
 src/question.ts                                |  6 +-----
 src/question_baseselect.ts                     |  1 +
 src/question_comment.ts                        |  1 +
 src/react/components/text-area.tsx             |  1 +
 src/utils/text-area.ts                         | 18 ++++++++++++++++++
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/knockout/components/text-area/text-area.ts b/src/knockout/components/text-area/text-area.ts
index 6151045834..a9a8d5acff 100644
--- a/src/knockout/components/text-area/text-area.ts
+++ b/src/knockout/components/text-area/text-area.ts
@@ -6,6 +6,8 @@ export var TextAreaViewModel: any;
 ko.components.register("sv-text-area", {
   viewModel: {
     createViewModel: (params: any, componentInfo: any) => {
+      const element = componentInfo.element.querySelector && componentInfo.element.querySelector("textarea") || componentInfo.element.nextElementSibling;
+      params.setElement(element);
       return {
         model: params, value: ko.observable(params.getTextValue() || "")
       };
diff --git a/src/question.ts b/src/question.ts
index 16beb01f98..38eab791fa 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -907,11 +907,6 @@ export class Question extends SurveyElement<Question>
   }
   public get isContainer(): boolean { return false; }
   protected updateCommentElements(): void {
-    if (!this.autoGrowComment || !Array.isArray(this.commentElements)) return;
-    for (let i = 0; i < this.commentElements.length; i++) {
-      const el = this.commentElements[i];
-      if (el) increaseHeightByContent(el);
-    }
   }
   public onCommentInput(event: any): void {
     if (this.isInputTextUpdate) {
@@ -2492,6 +2487,7 @@ export class Question extends SurveyElement<Question>
       isDisabledAttr: this.isInputReadOnly || false,
       placeholder: this.renderedCommentPlaceholder,
       rows: this.commentAreaRows,
+      autoGrow: this.autoGrowComment,
       maxLength: this.getOthersMaxLength(),
       ariaRequired: this.a11y_input_ariaRequired,
       ariaLabel: this.a11y_input_ariaLabel,
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index 84a7f43e0a..1d9d9e802f 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -1991,6 +1991,7 @@ export class QuestionSelectBase extends Question {
       placeholder: this.otherPlaceholder,
       rows: this.commentAreaRows,
       maxLength: this.getOthersMaxLength(),
+      autoGrow: this.survey.autoGrowComment,
       ariaRequired: this.ariaRequired || this.a11y_input_ariaRequired,
       ariaLabel: this.ariaLabel || this.a11y_input_ariaLabel,
       getTextValue: () => { return this.otherValue; },
diff --git a/src/question_comment.ts b/src/question_comment.ts
index cd0021edf2..35ea54d593 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -142,6 +142,7 @@ export class QuestionCommentModel extends QuestionTextBase {
       isDisabledAttr: this.isDisabledAttr,
       isReadOnlyAttr: this.isReadOnlyAttr,
       placeholder: this.renderedPlaceholder,
+      autoGrow: this.renderedAutoGrow,
       maxLength: this.getMaxLength(),
       rows: this.rows,
       cols: this.cols,
diff --git a/src/react/components/text-area.tsx b/src/react/components/text-area.tsx
index bdbe31f5fc..4a03e989c7 100644
--- a/src/react/components/text-area.tsx
+++ b/src/react/components/text-area.tsx
@@ -24,6 +24,7 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
       <textarea
         id={this.viewModel.id}
         className={this.viewModel.className}
+        ref={(textarea) => (this.viewModel.setElement(textarea))}
         disabled={this.viewModel.isDisabledAttr}
         readOnly={this.viewModel.isReadOnlyAttr}
         rows={this.viewModel.rows}
diff --git a/src/utils/text-area.ts b/src/utils/text-area.ts
index 81586a244a..40781ceea3 100644
--- a/src/utils/text-area.ts
+++ b/src/utils/text-area.ts
@@ -1,3 +1,5 @@
+import { increaseHeightByContent } from "./utils";
+
 export interface ITextArea {
   question: any;
   id: string;
@@ -5,6 +7,7 @@ export interface ITextArea {
   isDisabledAttr: boolean;
   isReadOnlyAttr?: boolean;
   placeholder: string;
+  autoGrow: boolean;
   maxLength: number;
   rows: number;
   cols?: number;
@@ -22,8 +25,16 @@ export interface ITextArea {
 }
 
 export class TextAreaModel {
+  private element: HTMLElement;
+
   constructor(private options: ITextArea) { }
 
+  public setElement(element: HTMLElement | null): void {
+    if (!!element) {
+      this.element = element;
+    }
+  }
+
   public getTextValue(): string {
     if (!!this.options.getTextValue)
       return this.options.getTextValue();
@@ -36,6 +47,10 @@ export class TextAreaModel {
   public onTextAreaInput(event: any): void {
     if (!!this.options.onTextAreaInput)
       this.options.onTextAreaInput(event);
+
+    if (this.element && this.autoGrow) {
+      increaseHeightByContent(this.element);
+    }
   }
   public onTextAreaKeyDown(event: any): void {
     if (!!this.options.onTextAreaKeyDown)
@@ -56,6 +71,9 @@ export class TextAreaModel {
   get maxLength(): number {
     return this.options.maxLength;
   }
+  get autoGrow(): boolean {
+    return this.options.autoGrow;
+  }
   get rows(): number {
     return this.options.rows;
   }

From 5241878967dd3a4280ec132fe19a36ab3a824dba Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 29 Jul 2024 17:45:47 +0300
Subject: [PATCH 05/27] work for textarea component enhancement: update
 textarea if property is changed

---
 src/question.ts               | 11 +++++++++--
 src/question_baseselect.ts    | 11 +++++++++--
 src/question_comment.ts       | 14 ++++++++++++--
 src/utils/text-area.ts        | 27 ++++++++++++++++++++++-----
 testCafe/questions/comment.ts | 11 ++++-------
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/question.ts b/src/question.ts
index 38eab791fa..87d5c928d1 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -95,6 +95,7 @@ export class Question extends SurveyElement<Question>
   private isReadyValue: boolean = true;
   private commentElements: Array<HTMLElement>;
   private dependedQuestions: Array<Question> = [];
+  private commentTextAreaModel: TextAreaModel;
 
   /**
    * An event that is raised when the question's ready state has changed (expressions are evaluated, choices are loaded from a web resource specified by the `choicesByUrl` property, etc.).
@@ -2479,10 +2480,11 @@ export class Question extends SurveyElement<Question>
     );
   }
 
-  public getCommentTextArea(): ITextArea {
+  public getCommentTextArea(): TextAreaModel {
     const options: ITextArea = {
       question: this,
       id: this.commentId,
+      propertyName: "comment",
       className: this.cssClasses.comment,
       isDisabledAttr: this.isInputReadOnly || false,
       placeholder: this.renderedCommentPlaceholder,
@@ -2495,7 +2497,9 @@ export class Question extends SurveyElement<Question>
       onTextAreaChange: (e) => { this.onCommentChange(e); },
       onTextAreaInput: (e) => { this.onCommentInput(e); },
     };
-    return new TextAreaModel(options);
+    this.commentTextAreaModel?.dispose();
+    this.commentTextAreaModel = new TextAreaModel(options);
+    return this.commentTextAreaModel;
   }
 
   @property() renderAs: string;
@@ -2664,6 +2668,9 @@ export class Question extends SurveyElement<Question>
     super.dispose();
     this.resetDependedQuestions();
     this.destroyResizeObserver();
+    if (this.commentTextAreaModel) {
+      this.commentTextAreaModel.dispose();
+    }
   }
   private resetDependedQuestions(): void {
     for (var i = 0; i < this.dependedQuestions.length; i++) {
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index 1d9d9e802f..11bd16ae58 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -36,6 +36,7 @@ export class QuestionSelectBase extends Question {
   private newItemValue: ItemValue;
   private canShowOptionItemCallback: (item: ItemValue) => boolean;
   private waitingGetChoiceDisplayValueResponse: boolean;
+  private otherTextAreaModel: TextAreaModel;
   private get waitingChoicesByURL(): boolean {
     return !this.isChoicesLoaded && this.hasChoicesUrl;
   }
@@ -98,6 +99,9 @@ export class QuestionSelectBase extends Question {
     if(!!q) {
       q.removeDependedQuestion(this);
     }
+    if (this.otherTextAreaModel) {
+      this.otherTextAreaModel.dispose();
+    }
   }
   protected resetDependedQuestion(): void {
     this.choicesFromQuestion = "";
@@ -1982,10 +1986,11 @@ export class QuestionSelectBase extends Question {
     return classes;
   }
 
-  public getOtherTextArea(): ITextArea {
+  public getOtherTextArea(): TextAreaModel {
     const options: ITextArea = {
       question: this,
       id: this.otherId,
+      propertyName: "otherValue",
       className: this.cssClasses.other,
       isDisabledAttr: this.isInputReadOnly || false,
       placeholder: this.otherPlaceholder,
@@ -1998,7 +2003,9 @@ export class QuestionSelectBase extends Question {
       onTextAreaChange: (e) => { this.onOtherValueChange(e); },
       onTextAreaInput: (e) => { this.onOtherValueInput(e); },
     };
-    return new TextAreaModel(options);
+    this.otherTextAreaModel?.dispose();
+    this.otherTextAreaModel = new TextAreaModel(options);
+    return this.otherTextAreaModel;
   }
 }
 /**
diff --git a/src/question_comment.ts b/src/question_comment.ts
index 35ea54d593..2cec6a8afc 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -13,6 +13,7 @@ import { Helpers } from "./helpers";
  */
 export class QuestionCommentModel extends QuestionTextBase {
   private element: HTMLElement;
+  private textAreaModel: TextAreaModel;
   /**
    * Specifies the visible height of the comment area, measured in lines.
    *
@@ -127,7 +128,7 @@ export class QuestionCommentModel extends QuestionTextBase {
   public get className() {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
-  public getTextArea(): ITextArea {
+  public getTextArea(): TextAreaModel {
     const _this = this;
     const updateQuestionValue = (newValue: any) => {
       if (!Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
@@ -138,6 +139,7 @@ export class QuestionCommentModel extends QuestionTextBase {
     const options: ITextArea = {
       question: this,
       id: this.inputId,
+      propertyName: "value",
       className: this.className,
       isDisabledAttr: this.isDisabledAttr,
       isReadOnlyAttr: this.isReadOnlyAttr,
@@ -157,7 +159,15 @@ export class QuestionCommentModel extends QuestionTextBase {
       onTextAreaInput: (event) => { this.onInput(event); },
       onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
     };
-    return new TextAreaModel(options);
+    this.textAreaModel?.dispose();
+    this.textAreaModel = new TextAreaModel(options);
+    return this.textAreaModel;
+  }
+  public dispose(): void {
+    super.dispose();
+    if (this.textAreaModel) {
+      this.textAreaModel.dispose();
+    }
   }
 }
 Serializer.addClass(
diff --git a/src/utils/text-area.ts b/src/utils/text-area.ts
index 40781ceea3..01590f236e 100644
--- a/src/utils/text-area.ts
+++ b/src/utils/text-area.ts
@@ -1,8 +1,11 @@
 import { increaseHeightByContent } from "./utils";
+import { Question } from "../question";
+import { ArrayChanges, Base } from "../base";
 
 export interface ITextArea {
   question: any;
   id: string;
+  propertyName: string;
   className: string;
   isDisabledAttr: boolean;
   isReadOnlyAttr?: boolean;
@@ -25,11 +28,19 @@ export interface ITextArea {
 }
 
 export class TextAreaModel {
-  private element: HTMLElement;
+  private element: HTMLTextAreaElement;
 
-  constructor(private options: ITextArea) { }
+  private onPropertyValueChangedCallback = (name: string, oldValue: any, newValue: any, sender: Base, arrayChanges: ArrayChanges) => {
+    if (name === this.options.propertyName && this.element) {
+      this.element.value = this.getTextValue();
+    }
+  }
+
+  constructor(private options: ITextArea) {
+    this.question.onPropertyValueChangedCallback = this.onPropertyValueChangedCallback;
+  }
 
-  public setElement(element: HTMLElement | null): void {
+  public setElement(element: HTMLTextAreaElement | null): void {
     if (!!element) {
       this.element = element;
     }
@@ -56,8 +67,8 @@ export class TextAreaModel {
     if (!!this.options.onTextAreaKeyDown)
       this.options.onTextAreaKeyDown(event);
   }
-  get question(): any {
-    return this.options.question;
+  get question(): Question {
+    return this.options.question as Question;
   }
   get id(): string {
     return this.options.id;
@@ -104,4 +115,10 @@ export class TextAreaModel {
   get ariaErrormessage(): string {
     return this.options.ariaErrormessage;
   }
+
+  public dispose(): void {
+    if (this.question) {
+      this.question.onPropertyValueChangedCallback = undefined;
+    }
+  }
 }
\ No newline at end of file
diff --git a/testCafe/questions/comment.ts b/testCafe/questions/comment.ts
index f389c10c5f..a0fc865b8a 100644
--- a/testCafe/questions/comment.ts
+++ b/testCafe/questions/comment.ts
@@ -3,7 +3,6 @@ import { ClientFunction, Selector } from "testcafe";
 const title = "comment";
 
 const commentQuestion = Selector(".sv_q textarea");
-const otherCommentQuestion = Selector(".sv_q .sv_q_other");
 const json = {
   questions: [
     {
@@ -28,7 +27,6 @@ frameworks.forEach(framework => {
             {
               "type": "comment",
               "name": "question1",
-              "autoGrow": true
             },
             {
               "type": "radiogroup",
@@ -39,7 +37,6 @@ frameworks.forEach(framework => {
             {
               "type": "comment",
               "name": "question3",
-              "autoGrow": true,
               "acceptCarriageReturn": false
             },
           ]
@@ -57,14 +54,14 @@ frameworks.forEach(framework => {
       .expect(commentQuestion.clientHeight).eql(116)
 
       .pressKey("tab")
-      .expect(otherCommentQuestion.getStyleProperty("resize")).eql("none")
-      .expect(otherCommentQuestion.clientHeight).eql(60)
+      .expect(commentQuestion.nth(1).getStyleProperty("resize")).eql("none")
+      .expect(commentQuestion.nth(1).clientHeight).eql(60)
 
       .pressKey("a enter a enter")
-      .expect(otherCommentQuestion.clientHeight).eql(88)
+      .expect(commentQuestion.nth(1).clientHeight).eql(88)
 
       .pressKey("backspace")
-      .expect(otherCommentQuestion.clientHeight).eql(60)
+      .expect(commentQuestion.nth(1).clientHeight).eql(60)
 
       .pressKey("tab")
       .expect(commentQuestion.nth(2).getStyleProperty("resize")).eql("none")

From edb29e3b233eee99f587fa26878c9c18f9c5d586 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 31 Jul 2024 13:55:20 +0300
Subject: [PATCH 06/27] work for textarea component enhancement: fix
 characterCounter for react

---
 src/react/reactquestion_comment.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index 3a6d566b31..d356abdae2 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -7,9 +7,9 @@ import { TextAreaComponent } from "./components/text-area";
 
 export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<QuestionCommentModel> {
   private renderCharacterCounter() : JSX.Element | null {
-    let counter = null;
+    let counter: JSX.Element | null = null;
     if(!!this.question.getMaxLength()) {
-      <CharacterCounterComponent
+      counter = <CharacterCounterComponent
         counter={this.question.characterCounter}
         remainingCharacterCounter={this.question.cssClasses.remainingCharacterCounter}>
       </CharacterCounterComponent>;

From f262a8f60cf7d4d820cca3b52158d18fc5b6ca26 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 31 Jul 2024 14:22:36 +0300
Subject: [PATCH 07/27] work for textarea component enhancement: update
 textarea if property is changed

---
 src/react/components/text-area.tsx | 8 +++++---
 src/utils/text-area.ts             | 4 ++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/react/components/text-area.tsx b/src/react/components/text-area.tsx
index 4a03e989c7..bd005adfcc 100644
--- a/src/react/components/text-area.tsx
+++ b/src/react/components/text-area.tsx
@@ -8,9 +8,11 @@ interface ITextAreaProps {
 }
 
 export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
+  private initialValue;
+
   constructor(props: ITextAreaProps) {
     super(props);
-    this.state = { comment: this.viewModel.getTextValue() || "" };
+    this.initialValue = this.viewModel.getTextValue() || "";
   }
   get viewModel(): TextAreaModel {
     return this.props.viewModel;
@@ -31,8 +33,8 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
         cols={this.viewModel.cols}
         placeholder={this.viewModel.placeholder}
         maxLength={this.viewModel.maxLength}
-        value={this.state.comment}
-        onChange={(event: any) => { this.viewModel.onTextAreaInput(event); this.setState({ comment: event.target.value }); }}
+        defaultValue={this.initialValue}
+        onChange={(event: any) => { this.viewModel.onTextAreaInput(event); }}
         onBlur={(event: any) => { this.viewModel.onTextAreaChange(event); }}
         onKeyDown={(event: any) => { this.viewModel.onTextAreaKeyDown(event); }}
         aria-required={this.viewModel.ariaRequired}
diff --git a/src/utils/text-area.ts b/src/utils/text-area.ts
index 01590f236e..f503534a8f 100644
--- a/src/utils/text-area.ts
+++ b/src/utils/text-area.ts
@@ -33,6 +33,10 @@ export class TextAreaModel {
   private onPropertyValueChangedCallback = (name: string, oldValue: any, newValue: any, sender: Base, arrayChanges: ArrayChanges) => {
     if (name === this.options.propertyName && this.element) {
       this.element.value = this.getTextValue();
+
+      if (this.autoGrow) {
+        increaseHeightByContent(this.element);
+      }
     }
   }
 

From 8ab39d24e48bfdb7d00d71dae4de3dc0c265a78c Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 31 Jul 2024 14:49:53 +0300
Subject: [PATCH 08/27] work for textarea component enhancement: add angular
 component

---
 .../src/angular-ui.module.ts                  |  3 ++
 packages/survey-angular-ui/src/angular-ui.ts  |  1 +
 .../src/comment-other.component.html          | 12 ++-----
 .../src/comment-other.component.ts            | 15 ++-------
 .../src/comment.component.html                | 12 ++-----
 .../text-area/text-area.component.html        | 22 +++++++++++++
 .../text-area/text-area.component.ts          | 18 ++++++++++
 .../src/questions/comment.component.html      | 33 ++++---------------
 src/knockout/templates/comment.html           |  4 +--
 src/knockout/templates/question-comment.html  |  2 +-
 src/question.ts                               | 19 +++++++----
 src/question_baseselect.ts                    | 19 +++++++----
 src/question_comment.ts                       | 21 ++++++++----
 src/react/reactquestion_comment.tsx           |  6 ++--
 tests/surveyquestiontests.ts                  |  6 ++--
 15 files changed, 107 insertions(+), 86 deletions(-)
 create mode 100644 packages/survey-angular-ui/src/components/text-area/text-area.component.html
 create mode 100644 packages/survey-angular-ui/src/components/text-area/text-area.component.ts

diff --git a/packages/survey-angular-ui/src/angular-ui.module.ts b/packages/survey-angular-ui/src/angular-ui.module.ts
index d82f211d30..7ee0af7156 100644
--- a/packages/survey-angular-ui/src/angular-ui.module.ts
+++ b/packages/survey-angular-ui/src/angular-ui.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
+import { TextAreaComponent } from "./components/text-area/text-area.component";
 import { SurveyComponent } from "./survey.component";
 import { PopupSurveyComponent } from "./popup.survey.component";
 import { PageComponent } from "./page.component";
@@ -129,6 +130,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
   declarations: [
     VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
     SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+    TextAreaComponent,
     QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
@@ -150,6 +152,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
   exports: [
     VisibleDirective, Key2ClickDirective, PanelDynamicAddBtn, PanelDynamicNextBtn, PanelDynamicPrevBtn, PanelDynamicProgressText, ElementComponent, TemplateRendererComponent,
     SurveyComponent, SurveyContentComponent, PopupSurveyComponent, PageComponent, PanelComponent, QuestionComponent, StringViewerComponent, SurveyStringComponent, StringEditorComponent,
+    TextAreaComponent,
     QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
     CharacterCounterComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
diff --git a/packages/survey-angular-ui/src/angular-ui.ts b/packages/survey-angular-ui/src/angular-ui.ts
index 1d16f35b17..e12f89698c 100644
--- a/packages/survey-angular-ui/src/angular-ui.ts
+++ b/packages/survey-angular-ui/src/angular-ui.ts
@@ -4,6 +4,7 @@ export * from "./popup.survey.component";
 export * from "./page.component";
 export * from "./question.component";
 export * from "./string-viewer.component";
+export * from "./components/text-area/text-area.component";
 export * from "./components/popup/popup-pointer.component";
 export * from "./components/popup/popup.component";
 export * from "./components/popup/popup-container.component";
diff --git a/packages/survey-angular-ui/src/comment-other.component.html b/packages/survey-angular-ui/src/comment-other.component.html
index 9bb6fe3f8e..187e2ebdb8 100644
--- a/packages/survey-angular-ui/src/comment-other.component.html
+++ b/packages/survey-angular-ui/src/comment-other.component.html
@@ -1,10 +1,4 @@
-<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="otherId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired || question.a11y_input_ariaRequired" [attr.aria-label]="question.ariaLabel || question.a11y_input_ariaLabel" [attr.placeholder]="otherPlaceholder" 
-  [value]="otherValue"
-  [style.resize]="question.resizeStyle"
-  [attr.rows]="question.commentAreaRows"
-  [disabled]="question.isInputReadOnly"
-  (change)="onOtherValueChange($event)"
-  (input)="onOtherValueInput($event)"
-  [class]="question.cssClasses.other">
-</textarea>
+<ng-container *ngIf="!question.isReadOnlyRenderDiv()">
+  <ng-template [component]="{ name: 'sv-text-area', data: { model: textAreaModel } }"></ng-template>
+</ng-container>
 <div *ngIf="question.isReadOnlyRenderDiv()">{{ otherValue }}</div>
diff --git a/packages/survey-angular-ui/src/comment-other.component.ts b/packages/survey-angular-ui/src/comment-other.component.ts
index e5ae01c51b..0696bb54ce 100644
--- a/packages/survey-angular-ui/src/comment-other.component.ts
+++ b/packages/survey-angular-ui/src/comment-other.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { Question, QuestionSelectBase } from "survey-core";
+import { Question, QuestionSelectBase, TextAreaModel } from "survey-core";
 
 @Component({
   selector: "sv-ng-comment-other, '[sv-ng-comment-other]'",
@@ -13,16 +13,7 @@ export class SurveyCommentOtherComponent {
     const val = (<QuestionSelectBase>this.question).otherValue;
     return !!val ? val : "";
   }
-  public onOtherValueChange(event: any): void {
-    (<QuestionSelectBase>this.question).onOtherValueChange(event);
-  }
-  public onOtherValueInput(event: any): void {
-    (<QuestionSelectBase>this.question).onOtherValueInput(event);
-  }
-  public get otherId(): string {
-    return (<QuestionSelectBase>this.question).otherId;
-  }
-  public get otherPlaceholder(): string {
-    return (<QuestionSelectBase>this.question).otherPlaceholder;
+  public get textAreaModel(): TextAreaModel {
+    return (<QuestionSelectBase>this.question).otherTextAreaModel;
   }
 }
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/comment.component.html b/packages/survey-angular-ui/src/comment.component.html
index ed165a8e35..6f6f85bdd3 100644
--- a/packages/survey-angular-ui/src/comment.component.html
+++ b/packages/survey-angular-ui/src/comment.component.html
@@ -1,10 +1,4 @@
-<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="question.commentId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired || question.a11y_input_ariaRequired" [attr.aria-label]="question.ariaLabel || question.a11y_input_ariaLabel" [attr.placeholder]="question.renderedCommentPlaceholder" 
-  [value]="comment"
-  [style.resize]="question.resizeStyle"
-  [attr.rows]="question.commentAreaRows"
-  [disabled]="question.isInputReadOnly"
-  (change)="question.onCommentChange($event)"
-  (input)="question.onCommentInput($event)"
-  [class]="question.cssClasses.other">
-</textarea>
+<ng-container *ngIf="!question.isReadOnlyRenderDiv()">
+  <ng-template [component]="{ name: 'sv-text-area', data: { model: question.commentTextAreaModel } }"></ng-template>
+</ng-container>
 <div *ngIf="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.html b/packages/survey-angular-ui/src/components/text-area/text-area.component.html
new file mode 100644
index 0000000000..faefe29d63
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/text-area/text-area.component.html
@@ -0,0 +1,22 @@
+<textarea
+[readonly]="model.isReadOnlyAttr"
+[disabled]="model.isDisabledAttr"
+[id]="model.id"
+[attr.maxlength]="model.maxLength"
+[attr.cols]="model.cols"
+[attr.rows]="model.rows"
+[attr.placeholder]="model.placeholder"
+[class]="model.className"
+[value]="value"
+(input)="model.onTextAreaInput($event)"
+(keydown)="model.onTextAreaKeyDown($event)"
+(blur)="model.onTextAreaChange($event)"
+(change)="model.onTextAreaChange($event)"
+[attr.aria-required]="model.ariaRequired"
+[attr.aria-label]="model.ariaLabel"
+[attr.aria-labelledby]="model.ariaLabelledBy"
+[attr.aria-describedby]="model.ariaDescribedBy"
+[attr.aria-invalid]="model.ariaInvalid"
+[attr.aria-errormessage]="model.ariaErrormessage"
+[style.resize]="model.question.resizeStyle"
+#contentElement></textarea>
diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
new file mode 100644
index 0000000000..3b843b21b6
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from "@angular/core";
+import { TextAreaModel } from "survey-core";
+import { AngularComponentFactory } from "../../component-factory";
+import { EmbeddedViewContentComponent } from "../../embedded-view-content.component";
+
+@Component({
+  selector: "sv-text-area",
+  templateUrl: "./text-area.component.html"
+})
+export class TextAreaComponent extends EmbeddedViewContentComponent {
+  @Input() model!: TextAreaModel;
+
+  get value() {
+    return this.model.getTextValue();
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-text-area", TextAreaComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/questions/comment.component.html b/packages/survey-angular-ui/src/questions/comment.component.html
index 814b6df838..5a7d16d908 100644
--- a/packages/survey-angular-ui/src/questions/comment.component.html
+++ b/packages/survey-angular-ui/src/questions/comment.component.html
@@ -1,27 +1,8 @@
-<textarea
-*ngIf="!model.isReadOnlyRenderDiv()"
-[readonly]="model.isReadOnlyAttr"
-[disabled]="model.isDisabledAttr"
-[id]="model.inputId"
-[attr.maxlength]="model.getMaxLength()"
-[attr.cols]="model.cols"
-[attr.rows]="model.rows"
-[attr.placeholder]="model.renderedPlaceholder"
-[class]="model.className"
-[value]="model.value || null"
-(input)="model.onInput($event)"
-(keydown)="model.onKeyDown($event)"
-(change)="onChange($event)"
-[attr.aria-required]="model.a11y_input_ariaRequired"
-[attr.aria-label]="model.a11y_input_ariaLabel"
-[attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
-[attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
-[attr.aria-invalid]="model.a11y_input_ariaInvalid"
-[attr.aria-errormessage]="model.a11y_input_ariaErrormessage"
-[style.resize]="model.resizeStyle"
-#contentElement></textarea>
-<sv-ng-character-counter *ngIf="!model.isReadOnlyRenderDiv() && model.getMaxLength()" 
-[counter]="model.characterCounter"
-[remainingCharacterCounter]="model.cssClasses.remainingCharacterCounter">
-</sv-ng-character-counter>
+<ng-container *ngIf="!model.isReadOnlyRenderDiv()">
+  <ng-template [component]="{ name: 'sv-text-area', data: { model: model.textAreaModel } }"></ng-template>
+  <sv-ng-character-counter *ngIf="model.getMaxLength()" 
+  [counter]="model.characterCounter"
+  [remainingCharacterCounter]="model.cssClasses.remainingCharacterCounter">
+  </sv-ng-character-counter>
+</ng-container>
 <div *ngIf="model.isReadOnlyRenderDiv()" #contentElement>{{ model.value }}</div>
\ No newline at end of file
diff --git a/src/knockout/templates/comment.html b/src/knockout/templates/comment.html
index 6f57cca318..fec8315081 100644
--- a/src/knockout/templates/comment.html
+++ b/src/knockout/templates/comment.html
@@ -1,6 +1,6 @@
 <script type="text/html" id="survey-comment">
 <!-- ko if: !question.isReadOnlyRenderDiv() -->
-<!-- ko component: { name: 'sv-text-area', params: question.getCommentTextArea() } -->
+<!-- ko component: { name: 'sv-text-area', params: question.commentTextAreaModel } -->
 <!-- /ko -->
 <!-- /ko-->
 <!-- ko if: question.isReadOnlyRenderDiv() -->
@@ -9,7 +9,7 @@
 </script>
 <script type="text/html" id="survey-other">
 <!-- ko if: !question.isReadOnlyRenderDiv() -->
-<!-- ko component: { name: 'sv-text-area', params: question.getOtherTextArea() } -->
+<!-- ko component: { name: 'sv-text-area', params: question.otherTextAreaModel } -->
 <!-- /ko -->
 <!-- /ko-->
 <!-- ko if: question.isReadOnlyRenderDiv() -->
diff --git a/src/knockout/templates/question-comment.html b/src/knockout/templates/question-comment.html
index 3f843a807f..7f2e7f4ee1 100644
--- a/src/knockout/templates/question-comment.html
+++ b/src/knockout/templates/question-comment.html
@@ -1,6 +1,6 @@
 <script type="text/html" id="survey-question-comment">
 <!--ko if: !question.isReadOnlyRenderDiv() -->
-  <!-- ko component: { name: 'sv-text-area', params: question.getTextArea() } -->
+  <!-- ko component: { name: 'sv-text-area', params: question.textAreaModel } -->
   <!-- /ko -->
   <!-- ko if: question.getMaxLength() -->
   <!-- ko component: { name: 'sv-character-counter', params: { counter: question.characterCounter, remainingCharacterCounter: question.cssClasses.remainingCharacterCounter } } -->
diff --git a/src/question.ts b/src/question.ts
index d93c4a15e7..586f8ce3ee 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -91,7 +91,7 @@ export class Question extends SurveyElement<Question>
   private isReadyValue: boolean = true;
   private commentElements: Array<HTMLElement>;
   private dependedQuestions: Array<Question> = [];
-  private commentTextAreaModel: TextAreaModel;
+  private _commentTextAreaModel: TextAreaModel;
 
   /**
    * An event that is raised when the question's ready state has changed (expressions are evaluated, choices are loaded from a web resource specified by the `choicesByUrl` property, etc.).
@@ -2476,7 +2476,13 @@ export class Question extends SurveyElement<Question>
     );
   }
 
-  public getCommentTextArea(): TextAreaModel {
+  public get commentTextAreaModel(): TextAreaModel {
+    if (!this._commentTextAreaModel) {
+      this._commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
+    }
+    return this._commentTextAreaModel;
+  }
+  public getCommentTextAreaOptions(): ITextArea {
     const options: ITextArea = {
       question: this,
       id: this.commentId,
@@ -2493,9 +2499,7 @@ export class Question extends SurveyElement<Question>
       onTextAreaChange: (e) => { this.onCommentChange(e); },
       onTextAreaInput: (e) => { this.onCommentInput(e); },
     };
-    this.commentTextAreaModel?.dispose();
-    this.commentTextAreaModel = new TextAreaModel(options);
-    return this.commentTextAreaModel;
+    return options;
   }
 
   @property() renderAs: string;
@@ -2662,8 +2666,9 @@ export class Question extends SurveyElement<Question>
     super.dispose();
     this.resetDependedQuestions();
     this.destroyResizeObserver();
-    if (this.commentTextAreaModel) {
-      this.commentTextAreaModel.dispose();
+    if (this._commentTextAreaModel) {
+      this._commentTextAreaModel.dispose();
+      this._commentTextAreaModel = undefined;
     }
   }
   private resetDependedQuestions(): void {
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index 84427c554d..97ba51d384 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -36,7 +36,7 @@ export class QuestionSelectBase extends Question {
   private newItemValue: ItemValue;
   private canShowOptionItemCallback: (item: ItemValue) => boolean;
   private waitingGetChoiceDisplayValueResponse: boolean;
-  private otherTextAreaModel: TextAreaModel;
+  private _otherTextAreaModel: TextAreaModel;
   private get waitingChoicesByURL(): boolean {
     return !this.isChoicesLoaded && this.hasChoicesUrl;
   }
@@ -101,8 +101,9 @@ export class QuestionSelectBase extends Question {
     if (!!q) {
       q.removeDependedQuestion(this);
     }
-    if (this.otherTextAreaModel) {
-      this.otherTextAreaModel.dispose();
+    if (this._otherTextAreaModel) {
+      this._otherTextAreaModel.dispose();
+      this._otherTextAreaModel = undefined;
     }
   }
   protected resetDependedQuestion(): void {
@@ -1969,7 +1970,13 @@ export class QuestionSelectBase extends Question {
     return classes;
   }
 
-  public getOtherTextArea(): TextAreaModel {
+  public get otherTextAreaModel(): TextAreaModel {
+    if (!this._otherTextAreaModel) {
+      this._otherTextAreaModel = new TextAreaModel(this.getOtherTextAreaOptions());
+    }
+    return this._otherTextAreaModel;
+  }
+  public getOtherTextAreaOptions(): ITextArea {
     const options: ITextArea = {
       question: this,
       id: this.otherId,
@@ -1986,9 +1993,7 @@ export class QuestionSelectBase extends Question {
       onTextAreaChange: (e) => { this.onOtherValueChange(e); },
       onTextAreaInput: (e) => { this.onOtherValueInput(e); },
     };
-    this.otherTextAreaModel?.dispose();
-    this.otherTextAreaModel = new TextAreaModel(options);
-    return this.otherTextAreaModel;
+    return options;
   }
 }
 /**
diff --git a/src/question_comment.ts b/src/question_comment.ts
index 2cec6a8afc..e3d1b33228 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -13,7 +13,7 @@ import { Helpers } from "./helpers";
  */
 export class QuestionCommentModel extends QuestionTextBase {
   private element: HTMLElement;
-  private textAreaModel: TextAreaModel;
+  private _textAreaModel: TextAreaModel;
   /**
    * Specifies the visible height of the comment area, measured in lines.
    *
@@ -128,7 +128,15 @@ export class QuestionCommentModel extends QuestionTextBase {
   public get className() {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
-  public getTextArea(): TextAreaModel {
+
+  public get textAreaModel(): TextAreaModel {
+    if (!this._textAreaModel) {
+      this._textAreaModel = new TextAreaModel(this.getTextAreaOptions());
+    }
+    return this._textAreaModel;
+  }
+
+  public getTextAreaOptions(): ITextArea {
     const _this = this;
     const updateQuestionValue = (newValue: any) => {
       if (!Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
@@ -159,14 +167,13 @@ export class QuestionCommentModel extends QuestionTextBase {
       onTextAreaInput: (event) => { this.onInput(event); },
       onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
     };
-    this.textAreaModel?.dispose();
-    this.textAreaModel = new TextAreaModel(options);
-    return this.textAreaModel;
+    return options;
   }
   public dispose(): void {
     super.dispose();
-    if (this.textAreaModel) {
-      this.textAreaModel.dispose();
+    if (this._textAreaModel) {
+      this._textAreaModel.dispose();
+      this._textAreaModel = undefined;
     }
   }
 }
diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index d356abdae2..ed7979a0cc 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -25,7 +25,7 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
     }
 
     const counter = this.renderCharacterCounter();
-    const textAreaModel: TextAreaModel = this.props.question.getTextArea();
+    const textAreaModel: TextAreaModel = this.props.question.textAreaModel;
     return (
       <>
         <TextAreaComponent viewModel={textAreaModel}></TextAreaComponent>
@@ -48,7 +48,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
   }
 
   protected getTextAreaModel(): TextAreaModel {
-    return this.props.question.getCommentTextArea();
+    return this.props.question.commentTextAreaModel;
   }
 
   protected renderElement(): JSX.Element {
@@ -65,7 +65,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
 }
 export class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
   protected getTextAreaModel(): TextAreaModel {
-    return this.props.question.getOtherTextArea();
+    return this.props.question.otherTextAreaModel;
   }
 }
 
diff --git a/tests/surveyquestiontests.ts b/tests/surveyquestiontests.ts
index 97e6665dc0..ca6d256302 100644
--- a/tests/surveyquestiontests.ts
+++ b/tests/surveyquestiontests.ts
@@ -7886,11 +7886,11 @@ QUnit.test("TextAreaOptions", function (assert) {
   });
 
   const q1 = <QuestionDropdownModel>survey.getQuestionByName("q1");
-  const otherOptions = q1.getOtherTextArea();
-  const commentOptions = q1.getCommentTextArea();
+  const otherOptions = q1.otherTextAreaModel;
+  const commentOptions = q1.commentTextAreaModel;
 
   const q2 = <QuestionCommentModel>survey.getQuestionByName("q2");
-  const textAreaOptions = q2.getTextArea();
+  const textAreaOptions = q2.getTextAreaOptions();
 
   assert.equal(otherOptions.id, "sq_101_other", "otherOptions id");
   assert.equal(otherOptions.className, "sd-input sd-comment sd-selectbase__other", "otherOptions className");

From f93aa412cfd23d6a8d8038532f8496838f8a2bc9 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 1 Aug 2024 14:21:43 +0300
Subject: [PATCH 09/27] work for textarea component enhancement: update angular
 component

---
 .../src/components/text-area/text-area.component.ts  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
index 3b843b21b6..81284f0dd4 100644
--- a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
+++ b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { TextAreaModel } from "survey-core";
 import { AngularComponentFactory } from "../../component-factory";
 import { EmbeddedViewContentComponent } from "../../embedded-view-content.component";
@@ -9,9 +9,17 @@ import { EmbeddedViewContentComponent } from "../../embedded-view-content.compon
 })
 export class TextAreaComponent extends EmbeddedViewContentComponent {
   @Input() model!: TextAreaModel;
+  @ViewChild("contentElement") elementContentRef!: ElementRef<HTMLElement>;
 
   get value() {
-    return this.model.getTextValue();
+    return this.model.getTextValue() || "";
+  }
+
+  public ngAfterViewInit(): void {
+    if (!!this.model && !!this.elementContentRef?.nativeElement) {
+      const element = this.elementContentRef.nativeElement;
+      this.model.setElement(element as HTMLTextAreaElement);
+    }
   }
 }
 

From 4e2c0b27e64cd9bc1bc164ee5fd1218f435bc688 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 1 Aug 2024 18:03:14 +0300
Subject: [PATCH 10/27] work for textarea component enhancement: update vue
 component

---
 src/entries/vue-ui-model.ts                  |  1 +
 src/knockout/templates/question-comment.html |  2 +-
 src/vue/comment.vue                          | 58 +++-----------------
 src/vue/components/text-area.vue             | 53 ++++++++++++++++++
 src/vue/question-comment.vue                 | 21 ++-----
 src/vue/question-other.vue                   | 25 ++-------
 6 files changed, 73 insertions(+), 87 deletions(-)
 create mode 100644 src/vue/components/text-area.vue

diff --git a/src/entries/vue-ui-model.ts b/src/entries/vue-ui-model.ts
index e90e83fd2a..b84a426377 100644
--- a/src/entries/vue-ui-model.ts
+++ b/src/entries/vue-ui-model.ts
@@ -101,6 +101,7 @@ export { BrandInfo } from "../vue/components/brand-info.vue";
 export { QuestionError } from "../vue/components/question-error.vue";
 export { NotifierComponent } from "../vue/components/notifier.vue";
 export { ComponentsContainer } from "../vue/components/container.vue";
+export { TextAreaComponent } from "../vue/components/text-area.vue";
 export { CharacterCounterComponent } from "../vue/components/character-counter.vue";
 export { LoadingIndicatorComponent } from "../vue/components/loading-indicator.vue";
 export { HeaderCellViewModel } from "../vue/components/header/header-cell.vue";
diff --git a/src/knockout/templates/question-comment.html b/src/knockout/templates/question-comment.html
index 7f2e7f4ee1..a4e5715c08 100644
--- a/src/knockout/templates/question-comment.html
+++ b/src/knockout/templates/question-comment.html
@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question-comment">
-<!--ko if: !question.isReadOnlyRenderDiv() -->
+<!-- ko if: !question.isReadOnlyRenderDiv() -->
   <!-- ko component: { name: 'sv-text-area', params: question.textAreaModel } -->
   <!-- /ko -->
   <!-- ko if: question.getMaxLength() -->
diff --git a/src/vue/comment.vue b/src/vue/comment.vue
index 6f5036f6de..5892e4d34e 100644
--- a/src/vue/comment.vue
+++ b/src/vue/comment.vue
@@ -1,51 +1,12 @@
 <template>
-    <textarea
-      v-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
-      :readonly="question.isReadOnlyAttr"
-      :disabled="question.isDisabledAttr"
-      :value="question.value"
-      :id="question.inputId"
-      :maxlength="question.getMaxLength()"
-      :cols="question.cols"
-      :rows="question.rows"
-      :placeholder="question.renderedPlaceholder"
-      :class="question.className"
-      @change="change"
-      @input="(e) => { question.onInput(e) }"
-      @keydown="(e) => { question.onKeyDown(e) }"
-      :aria-required="question.a11y_input_ariaRequired"
-      :aria-label="question.a11y_input_ariaLabel"
-      :aria-labelledby="question.a11y_input_ariaLabelledBy"
-      :aria-describedby="question.a11y_input_ariaDescribedBy"
-      :aria-invalid="question.a11y_input_ariaInvalid"
-      :aria-errormessage="question.a11y_input_ariaErrormessage"
-      v-bind:style="{ resize: question.resizeStyle }"
-    ></textarea>
-    <div v-else-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()">
-      <textarea
-        :readonly="question.isReadOnlyAttr"
-        :disabled="question.isDisabledAttr"
-        :value="question.value"
-        :id="question.inputId"
-        :maxlength="question.getMaxLength()"
-        :cols="question.cols"
-        :rows="question.rows"
-        :placeholder="question.renderedPlaceholder"
-        :class="question.className"
-        @change="change"
-        @input="(e) => { question.onInput(e) }"
-        @keydown="(e) => { question.onKeyDown(e) }"
-        :aria-required="question.a11y_input_ariaRequired"
-        :aria-label="question.a11y_input_ariaLabel"
-        :aria-labelledby="question.a11y_input_ariaLabelledBy"
-        :aria-describedby="question.a11y_input_ariaDescribedBy"
-        :aria-invalid="question.a11y_input_ariaInvalid"
-        :aria-errormessage="question.a11y_input_ariaErrormessage"
-        v-bind:style="{ resize: question.resizeStyle }"
-      ></textarea>
-      <sv-character-counter :counter="question.characterCounter" :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"></sv-character-counter>
-    </div>
-    <div v-else>{{ question.value }}</div>
+<div v-if="!question.isReadOnlyRenderDiv()">
+  <sv-text-area :model="question.textAreaModel"></sv-text-area>
+  <sv-character-counter v-if="question.getMaxLength()"
+  :counter="question.characterCounter"
+  :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter">
+  </sv-character-counter>
+</div>
+<div v-else>{{ question.value }}</div>
 </template>
 
 <script lang="ts">
@@ -56,9 +17,6 @@ import { QuestionCommentModel } from "survey-core";
 
 @Component
 export class Comment extends QuestionVue<QuestionCommentModel> {
-  change(event: any) {
-    this.question.value = event.target.value;
-  }
 }
 Vue.component("survey-comment", Comment);
 
diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
new file mode 100644
index 0000000000..7a2c298b65
--- /dev/null
+++ b/src/vue/components/text-area.vue
@@ -0,0 +1,53 @@
+<template>
+<textarea
+ref="contentElement"
+:readonly="model.isReadOnlyAttr"
+:disabled="model.isDisabledAttr"
+:value="value"
+:id="model.inputId"
+:maxlength="model.maxLength"
+:cols="model.cols"
+:rows="model.rows"
+:placeholder="model.placeholder"
+:class="model.className"
+@blur="(e) => { model.onTextAreaChange(e) }"
+@change="(e) => { model.onTextAreaChange(e) }"
+@input="(e) => { model.onTextAreaInput(e) }"
+@keydown="(e) => { model.onTextAreaKeyDown(e) }"
+:aria-required="model.ariaRequired"
+:aria-label="model.ariaLabel"
+:aria-labelledby="model.ariaLabelledBy"
+:aria-describedby="model.ariaDescribedBy"
+:aria-invalid="model.ariaInvalid"
+:aria-errormessage="model.ariaErrormessage"
+v-bind:style="{ resize: model.question.resizeStyle }"
+></textarea>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop, Watch } from "vue-property-decorator";
+import { TextAreaModel } from "survey-core";
+import { BaseVue } from "../base";
+
+@Component
+export class TextAreaComponent extends BaseVue {
+  @Prop() model: TextAreaModel;
+  constructor() {
+    super();
+  }
+  get value() {
+    return this.model.getTextValue() || "";
+  }
+  protected onMounted() {
+    this.model.setElement(this.$refs["contentElement"]);
+  }
+  protected onUpdated() {
+    this.model.setElement(this.$refs["contentElement"]);
+  }
+}
+
+Vue.component("sv-text-area", TextAreaComponent);
+
+export default TextAreaComponent;
+</script>
diff --git a/src/vue/question-comment.vue b/src/vue/question-comment.vue
index 4c033c47fa..edc5ff2695 100644
--- a/src/vue/question-comment.vue
+++ b/src/vue/question-comment.vue
@@ -1,20 +1,8 @@
 <template>
-    <div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
-    <textarea v-else
-      :id="question.commentId"
-      :readonly="question.isInputReadOnly"
-      :disabled="question.isInputReadOnly"
-      :class="question.cssClasses.other || commentClass"
-      :value="question.comment"
-      :maxlength="question.getOthersMaxLength()"
-      :rows="question.commentAreaRows"
-      :placeholder="question.renderedCommentPlaceholder"
-      :aria-label="question.ariaLabel || question.a11y_input_ariaLabel"
-      :aria-required="question.ariaRequired || question.a11y_input_ariaRequired"
-      v-bind:style="{ resize: question.resizeStyle }"
-      @change="(e) => { question.onCommentChange(e) }"
-      @input="(e) => { question.onCommentInput(e) }"
-    />
+<div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
+<sv-text-area v-else
+:model="question.commentTextAreaModel"
+></sv-text-area>
 </template>
 
 <script lang="ts">
@@ -25,7 +13,6 @@ import { Question } from "survey-core";
 @Component
 export class OtherComment extends Vue {
   @Prop() question: Question;
-  @Prop() commentClass: any;
 }
 Vue.component("survey-question-comment", OtherComment);
 export default OtherComment;
diff --git a/src/vue/question-other.vue b/src/vue/question-other.vue
index 9402f90c56..95c31d2d4a 100644
--- a/src/vue/question-other.vue
+++ b/src/vue/question-other.vue
@@ -1,22 +1,10 @@
 <template>
-  <div :class="question.getCommentAreaCss(true)">
-    <textarea
-      v-if="!question.isReadOnlyRenderDiv()"
-      :id="question.otherId"
-      :readonly="question.isInputReadOnly"
-      :disabled="question.isInputReadOnly"
-      :class="question.cssClasses.other || commentClass"
-      :value="question.otherValue"
-      :maxlength="question.getOthersMaxLength()"
-      :rows="question.commentAreaRows"
-      :placeholder="question.otherPlaceholder"
-      :aria-label="question.ariaLabel || question.a11y_input_ariaLabel"
-      :aria-required="question.ariaRequired || question.a11y_input_ariaRequired"
-      v-bind:style="{ resize: question.resizeStyle }"
-      @change="(e) => { question.onOtherValueChange(e) }"
-      @input="(e) => { question.onOtherValueInput(e) }"
-    /><div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
-  </div>
+<div :class="question.getCommentAreaCss(true)">
+  <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
+  <sv-text-area v-else
+  :model="question.otherTextAreaModel"
+  ></sv-text-area>
+</div>
 </template>
 
 <script lang="ts">
@@ -27,7 +15,6 @@ import { Question } from "survey-core";
 @Component
 export class OtherChoice extends Vue {
   @Prop() question: Question;
-  @Prop() commentClass: any;
 }
 Vue.component("survey-other-choice", OtherChoice);
 export default OtherChoice;

From cb348002095608c2625065c174443d4c38e903d5 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 1 Aug 2024 18:05:47 +0300
Subject: [PATCH 11/27] work for textarea component enhancement: update angular
 component

---
 src/vue/components/text-area.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
index 7a2c298b65..bf56a533e9 100644
--- a/src/vue/components/text-area.vue
+++ b/src/vue/components/text-area.vue
@@ -4,7 +4,7 @@ ref="contentElement"
 :readonly="model.isReadOnlyAttr"
 :disabled="model.isDisabledAttr"
 :value="value"
-:id="model.inputId"
+:id="model.id"
 :maxlength="model.maxLength"
 :cols="model.cols"
 :rows="model.rows"
@@ -40,10 +40,10 @@ export class TextAreaComponent extends BaseVue {
     return this.model.getTextValue() || "";
   }
   protected onMounted() {
-    this.model.setElement(this.$refs["contentElement"]);
+    this.model.setElement(this.$refs["contentElement"] as HTMLTextAreaElement);
   }
   protected onUpdated() {
-    this.model.setElement(this.$refs["contentElement"]);
+    this.model.setElement(this.$refs["contentElement"] as HTMLTextAreaElement);
   }
 }
 

From d5b69d551b51a2ecce06acbccb10c71198578a39 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 2 Aug 2024 12:36:39 +0300
Subject: [PATCH 12/27] work for textarea component enhancement: update vue
 component

---
 src/vue/comment.vue              | 24 +++++++------
 src/vue/components/text-area.vue | 62 ++++++++++++++++++++------------
 src/vue/element.vue              |  2 +-
 src/vue/question-comment.vue     |  6 ++--
 src/vue/question-other.vue       | 10 +++---
 5 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/vue/comment.vue b/src/vue/comment.vue
index 5892e4d34e..b2bd0fdc73 100644
--- a/src/vue/comment.vue
+++ b/src/vue/comment.vue
@@ -1,12 +1,17 @@
 <template>
-<div v-if="!question.isReadOnlyRenderDiv()">
-  <sv-text-area :model="question.textAreaModel"></sv-text-area>
-  <sv-character-counter v-if="question.getMaxLength()"
-  :counter="question.characterCounter"
-  :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter">
-  </sv-character-counter>
-</div>
-<div v-else>{{ question.value }}</div>
+  <div v-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()">
+    <sv-text-area :model="question.textAreaModel"></sv-text-area>
+    <sv-character-counter
+      :counter="question.characterCounter"
+      :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"
+    >
+    </sv-character-counter>
+  </div>
+  <sv-text-area
+    v-else-if="!question.isReadOnlyRenderDiv()"
+    :model="question.textAreaModel"
+  ></sv-text-area>
+  <div v-else>{{ question.value }}</div>
 </template>
 
 <script lang="ts">
@@ -16,8 +21,7 @@ import { default as QuestionVue } from "./question";
 import { QuestionCommentModel } from "survey-core";
 
 @Component
-export class Comment extends QuestionVue<QuestionCommentModel> {
-}
+export class Comment extends QuestionVue<QuestionCommentModel> {}
 Vue.component("survey-comment", Comment);
 
 export default Comment;
diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
index bf56a533e9..e06ed5fdff 100644
--- a/src/vue/components/text-area.vue
+++ b/src/vue/components/text-area.vue
@@ -1,27 +1,43 @@
 <template>
-<textarea
-ref="contentElement"
-:readonly="model.isReadOnlyAttr"
-:disabled="model.isDisabledAttr"
-:value="value"
-:id="model.id"
-:maxlength="model.maxLength"
-:cols="model.cols"
-:rows="model.rows"
-:placeholder="model.placeholder"
-:class="model.className"
-@blur="(e) => { model.onTextAreaChange(e) }"
-@change="(e) => { model.onTextAreaChange(e) }"
-@input="(e) => { model.onTextAreaInput(e) }"
-@keydown="(e) => { model.onTextAreaKeyDown(e) }"
-:aria-required="model.ariaRequired"
-:aria-label="model.ariaLabel"
-:aria-labelledby="model.ariaLabelledBy"
-:aria-describedby="model.ariaDescribedBy"
-:aria-invalid="model.ariaInvalid"
-:aria-errormessage="model.ariaErrormessage"
-v-bind:style="{ resize: model.question.resizeStyle }"
-></textarea>
+  <textarea
+    ref="contentElement"
+    :readonly="model.isReadOnlyAttr"
+    :disabled="model.isDisabledAttr"
+    :value="value"
+    :id="model.id"
+    :maxlength="model.maxLength"
+    :cols="model.cols"
+    :rows="model.rows"
+    :placeholder="model.placeholder"
+    :class="model.className"
+    @blur="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @change="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @input="
+      (e) => {
+        model.onTextAreaInput(e);
+      }
+    "
+    @keydown="
+      (e) => {
+        model.onTextAreaKeyDown(e);
+      }
+    "
+    :aria-required="model.ariaRequired"
+    :aria-label="model.ariaLabel"
+    :aria-labelledby="model.ariaLabelledBy"
+    :aria-describedby="model.ariaDescribedBy"
+    :aria-invalid="model.ariaInvalid"
+    :aria-errormessage="model.ariaErrormessage"
+    v-bind:style="{ resize: model.question.resizeStyle }"
+  ></textarea>
 </template>
 
 <script lang="ts">
diff --git a/src/vue/element.vue b/src/vue/element.vue
index 617fc2b1ed..46a795e1dd 100644
--- a/src/vue/element.vue
+++ b/src/vue/element.vue
@@ -40,7 +40,7 @@
         <div>
           <survey-string :locString="element.locCommentText" />
         </div>
-        <survey-question-comment :commentClass="css.comment" :question="element" />
+        <survey-question-comment :question="element" />
       </div>
       <survey-errors
         v-if="hasErrorsOnBottom"
diff --git a/src/vue/question-comment.vue b/src/vue/question-comment.vue
index edc5ff2695..f566000c47 100644
--- a/src/vue/question-comment.vue
+++ b/src/vue/question-comment.vue
@@ -1,8 +1,6 @@
 <template>
-<div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
-<sv-text-area v-else
-:model="question.commentTextAreaModel"
-></sv-text-area>
+  <div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
+  <sv-text-area v-else :model="question.commentTextAreaModel"></sv-text-area>
 </template>
 
 <script lang="ts">
diff --git a/src/vue/question-other.vue b/src/vue/question-other.vue
index 95c31d2d4a..0a8e95a424 100644
--- a/src/vue/question-other.vue
+++ b/src/vue/question-other.vue
@@ -1,10 +1,8 @@
 <template>
-<div :class="question.getCommentAreaCss(true)">
-  <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
-  <sv-text-area v-else
-  :model="question.otherTextAreaModel"
-  ></sv-text-area>
-</div>
+  <div :class="question.getCommentAreaCss(true)">
+    <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
+    <sv-text-area v-else :model="question.otherTextAreaModel"></sv-text-area>
+  </div>
 </template>
 
 <script lang="ts">

From 0ea7826302d998bbbf3241d8f9ace981a15eaa9b Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 2 Aug 2024 12:36:54 +0300
Subject: [PATCH 13/27] work for textarea component enhancement: add vue3
 component

---
 .../src/components/TextArea.vue               | 58 +++++++++++++++++++
 packages/survey-vue3-ui/src/index.ts          |  6 +-
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/components/TextArea.vue

diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
new file mode 100644
index 0000000000..c28258defe
--- /dev/null
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -0,0 +1,58 @@
+<template>
+  <textarea
+    ref="contentElement"
+    :readonly="model.isReadOnlyAttr"
+    :disabled="model.isDisabledAttr"
+    :value="value"
+    :id="model.id"
+    :maxlength="model.maxLength"
+    :cols="model.cols"
+    :rows="model.rows"
+    :placeholder="model.placeholder"
+    :class="model.className"
+    @blur="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @change="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @input="
+      (e) => {
+        model.onTextAreaInput(e);
+      }
+    "
+    @keydown="
+      (e) => {
+        model.onTextAreaKeyDown(e);
+      }
+    "
+    :aria-required="model.ariaRequired"
+    :aria-label="model.ariaLabel"
+    :aria-labelledby="model.ariaLabelledBy"
+    :aria-describedby="model.ariaDescribedBy"
+    :aria-invalid="model.ariaInvalid"
+    :aria-errormessage="model.ariaErrormessage"
+    v-bind:style="{ resize: model.question.resizeStyle }"
+  ></textarea>
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+import type { TextAreaModel } from "survey-core";
+import { onMounted, onUpdated, ref } from "vue";
+
+const props = defineProps<{ model: TextAreaModel }>();
+const contentElement = ref<HTMLTextAreaElement>((null as any) as HTMLTextAreaElement);
+const value = props.model.getTextValue() || "";
+
+onMounted(() => {
+  props.model.setElement(contentElement.value);
+});
+onUpdated(() => {
+  props.model.setElement(contentElement.value);
+});
+</script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index c05a25293a..5363b18435 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -103,6 +103,7 @@ import SurveyNavigationButton from "./components/survey-actions/SurveyNavigation
 import PopupSurvey from "./PopupSurvey.vue";
 import CustomWidget from "./CustomWidget.vue";
 import PopupModal from "./components/popup/PopupModal.vue";
+import TextAreaComponent from "./components/TextArea.vue";
 import CharacterCounterComponent from "./components/CharacterCounter.vue";
 import Composite from "./Composite.vue";
 import Custom from "./Custom.vue";
@@ -258,8 +259,9 @@ function registerComponents(app: App) {
   app.component("survey-customwidget", CustomWidget);
   app.component("survey-popup-modal", PopupModal);
 
-  app.component("sv-character-counter", CharacterCounterComponent);
-
+  app.component("sv-character-counter", TextAreaComponent);
+  app.component("sv-text-area", CharacterCounterComponent);
+  
   app.component("survey-composite", Composite);
   app.component("survey-custom", Custom);
   app.component("sv-timerpanel", TimerPanel);

From e7370631980e0393109d59bcc4b711cb6ab8a595 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 2 Aug 2024 12:36:54 +0300
Subject: [PATCH 14/27] work for textarea component enhancement: add vue3
 component

---
 packages/survey-vue3-ui/src/Comment.vue       | 80 ++-----------------
 .../survey-vue3-ui/src/QuestionComment.vue    | 29 +------
 packages/survey-vue3-ui/src/QuestionOther.vue | 26 +-----
 .../src/components/TextArea.vue               | 58 ++++++++++++++
 packages/survey-vue3-ui/src/index.ts          |  6 +-
 src/vue/comment.vue                           |  3 +-
 6 files changed, 74 insertions(+), 128 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/components/TextArea.vue

diff --git a/packages/survey-vue3-ui/src/Comment.vue b/packages/survey-vue3-ui/src/Comment.vue
index a06744287e..3b2baf7fd2 100644
--- a/packages/survey-vue3-ui/src/Comment.vue
+++ b/packages/survey-vue3-ui/src/Comment.vue
@@ -1,73 +1,16 @@
 <template>
-  <textarea
-    ref="root"
-    v-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
-    :readonly="question.isReadOnlyAttr"
-    :disabled="question.isDisabledAttr"
-    :value="question.value"
-    :id="question.inputId"
-    :maxlength="question.getMaxLength()"
-    :cols="question.cols"
-    :rows="question.rows"
-    :placeholder="question.renderedPlaceholder"
-    :class="question.className"
-    @change="change"
-    @input="
-      (e) => {
-        question.onInput(e);
-      }
-    "
-    @keydown="
-      (e) => {
-        question.onKeyDown(e);
-      }
-    "
-    :aria-required="question.a11y_input_ariaRequired"
-    :aria-label="question.a11y_input_ariaLabel"
-    :aria-labelledby="question.a11y_input_ariaLabelledBy"
-    :aria-describedby="question.a11y_input_ariaDescribedBy"
-    :aria-invalid="question.a11y_input_ariaInvalid"
-    :aria-errormessage="question.a11y_input_ariaErrormessage"
-    v-bind:style="{ resize: question.resizeStyle }"
-  ></textarea>
-  <div
-    ref="root"
-    v-else-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()"
-  >
-    <textarea
-      :readonly="question.isReadOnlyAttr"
-      :disabled="question.isDisabledAttr"
-      :value="question.value"
-      :id="question.inputId"
-      :maxlength="question.getMaxLength()"
-      :cols="question.cols"
-      :rows="question.rows"
-      :placeholder="question.renderedPlaceholder"
-      :class="question.className"
-      @change="change"
-      @input="
-        (e) => {
-          question.onInput(e);
-        }
-      "
-      @keydown="
-        (e) => {
-          question.onKeyDown(e);
-        }
-      "
-      :aria-required="question.a11y_input_ariaRequired"
-      :aria-label="question.a11y_input_ariaLabel"
-      :aria-labelledby="question.a11y_input_ariaLabelledBy"
-      :aria-describedby="question.a11y_input_ariaDescribedBy"
-      :aria-invalid="question.a11y_input_ariaInvalid"
-      :aria-errormessage="question.a11y_input_ariaErrormessage"
-      v-bind:style="{ resize: question.resizeStyle }"
-    ></textarea>
+  <div ref="root" v-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()">
+    <sv-text-area :model="question.textAreaModel"></sv-text-area>
     <sv-character-counter
       :counter="question.characterCounter"
       :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"
     ></sv-character-counter>
   </div>
+  <sv-text-area
+    ref="root"
+    v-if="!question.isReadOnlyRenderDiv()"
+    :model="question.textAreaModel"
+  ></sv-text-area>
   <div ref="root" v-else>{{ question.value }}</div>
 </template>
 
@@ -76,14 +19,7 @@ import type { QuestionCommentModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps<{
-  question: QuestionCommentModel;
-  css?: object;
-}>();
+const props = defineProps<{ question: QuestionCommentModel }>();
 const root = ref(null);
 useQuestion(props, root);
-const change = (event: any) => {
-  const question = props.question;
-  question.value = event.target.value;
-};
 </script>
diff --git a/packages/survey-vue3-ui/src/QuestionComment.vue b/packages/survey-vue3-ui/src/QuestionComment.vue
index a5b5366419..96db8ba2ce 100644
--- a/packages/survey-vue3-ui/src/QuestionComment.vue
+++ b/packages/survey-vue3-ui/src/QuestionComment.vue
@@ -1,31 +1,6 @@
 <template>
-  <div v-if="question.isReadOnlyRenderDiv()">
-    {{ question.comment }}
-  </div>
-  <textarea
-    v-else
-    :id="question.commentId"
-    :readonly="question.isInputReadOnly"
-    :disabled="question.isInputReadOnly"
-    :class="question.cssClasses.other"
-    :value="question.comment"
-    :maxlength="question.getOthersMaxLength()"
-    :rows="question.commentAreaRows"
-    :placeholder="question.renderedCommentPlaceholder"
-    :aria-label="question.ariaLabel || question.a11y_input_ariaLabel"
-    :aria-required="question.ariaRequired || question.a11y_input_ariaRequired"
-    v-bind:style="{ resize: question.resizeStyle }"
-    @change="
-      (e) => {
-        question.onCommentChange(e);
-      }
-    "
-    @input="
-      (e) => {
-        question.onCommentInput(e);
-      }
-    "
-  />
+  <div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
+  <sv-text-area v-else :model="question.commentTextAreaModel"></sv-text-area>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/survey-vue3-ui/src/QuestionOther.vue b/packages/survey-vue3-ui/src/QuestionOther.vue
index 9ba8b8b93e..846765b7e5 100644
--- a/packages/survey-vue3-ui/src/QuestionOther.vue
+++ b/packages/survey-vue3-ui/src/QuestionOther.vue
@@ -1,30 +1,7 @@
 <template>
   <div :class="question.getCommentAreaCss(true)">
-    <textarea
-      v-if="!question.isReadOnlyRenderDiv()"
-      :id="question.otherId"
-      :readonly="question.isInputReadOnly"
-      :disabled="question.isInputReadOnly"
-      :class="question.cssClasses.other || commentClass"
-      :value="question.otherValue"
-      :maxlength="question.getOthersMaxLength()"
-      :rows="question.commentAreaRows"
-      :placeholder="question.otherPlaceholder"
-      :aria-label="question.ariaLabel || question.a11y_input_ariaLabel"
-      :aria-required="question.ariaRequired || question.a11y_input_ariaRequired"
-      v-bind:style="{ resize: question.resizeStyle }"
-      @change="
-        (e) => {
-          question.onOtherValueChange(e);
-        }
-      "
-      @input="
-        (e) => {
-          question.onOtherValueInput(e);
-        }
-      "
-    />
     <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
+    <sv-text-area v-else :model="question.otherTextAreaModel"></sv-text-area>
   </div>
 </template>
 
@@ -33,6 +10,5 @@ import type { Question } from "survey-core";
 
 defineProps<{
   question: Question;
-  commentClass?: string;
 }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
new file mode 100644
index 0000000000..c28258defe
--- /dev/null
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -0,0 +1,58 @@
+<template>
+  <textarea
+    ref="contentElement"
+    :readonly="model.isReadOnlyAttr"
+    :disabled="model.isDisabledAttr"
+    :value="value"
+    :id="model.id"
+    :maxlength="model.maxLength"
+    :cols="model.cols"
+    :rows="model.rows"
+    :placeholder="model.placeholder"
+    :class="model.className"
+    @blur="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @change="
+      (e) => {
+        model.onTextAreaChange(e);
+      }
+    "
+    @input="
+      (e) => {
+        model.onTextAreaInput(e);
+      }
+    "
+    @keydown="
+      (e) => {
+        model.onTextAreaKeyDown(e);
+      }
+    "
+    :aria-required="model.ariaRequired"
+    :aria-label="model.ariaLabel"
+    :aria-labelledby="model.ariaLabelledBy"
+    :aria-describedby="model.ariaDescribedBy"
+    :aria-invalid="model.ariaInvalid"
+    :aria-errormessage="model.ariaErrormessage"
+    v-bind:style="{ resize: model.question.resizeStyle }"
+  ></textarea>
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+import type { TextAreaModel } from "survey-core";
+import { onMounted, onUpdated, ref } from "vue";
+
+const props = defineProps<{ model: TextAreaModel }>();
+const contentElement = ref<HTMLTextAreaElement>((null as any) as HTMLTextAreaElement);
+const value = props.model.getTextValue() || "";
+
+onMounted(() => {
+  props.model.setElement(contentElement.value);
+});
+onUpdated(() => {
+  props.model.setElement(contentElement.value);
+});
+</script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index c05a25293a..5363b18435 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -103,6 +103,7 @@ import SurveyNavigationButton from "./components/survey-actions/SurveyNavigation
 import PopupSurvey from "./PopupSurvey.vue";
 import CustomWidget from "./CustomWidget.vue";
 import PopupModal from "./components/popup/PopupModal.vue";
+import TextAreaComponent from "./components/TextArea.vue";
 import CharacterCounterComponent from "./components/CharacterCounter.vue";
 import Composite from "./Composite.vue";
 import Custom from "./Custom.vue";
@@ -258,8 +259,9 @@ function registerComponents(app: App) {
   app.component("survey-customwidget", CustomWidget);
   app.component("survey-popup-modal", PopupModal);
 
-  app.component("sv-character-counter", CharacterCounterComponent);
-
+  app.component("sv-character-counter", TextAreaComponent);
+  app.component("sv-text-area", CharacterCounterComponent);
+  
   app.component("survey-composite", Composite);
   app.component("survey-custom", Custom);
   app.component("sv-timerpanel", TimerPanel);
diff --git a/src/vue/comment.vue b/src/vue/comment.vue
index b2bd0fdc73..f41754d302 100644
--- a/src/vue/comment.vue
+++ b/src/vue/comment.vue
@@ -4,8 +4,7 @@
     <sv-character-counter
       :counter="question.characterCounter"
       :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"
-    >
-    </sv-character-counter>
+    ></sv-character-counter>
   </div>
   <sv-text-area
     v-else-if="!question.isReadOnlyRenderDiv()"

From 2167f0b55adb49113d9a9dd659b629344c63a8cc Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 2 Aug 2024 14:50:45 +0300
Subject: [PATCH 15/27] work for textarea component enhancement: update
 textAreaModel options

---
 src/question.ts            | 20 ++++++++++++--------
 src/question_baseselect.ts | 20 ++++++++++++--------
 src/question_comment.ts    | 27 ++++++++++++++++++---------
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/question.ts b/src/question.ts
index 586f8ce3ee..ae640a55c3 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -91,7 +91,6 @@ export class Question extends SurveyElement<Question>
   private isReadyValue: boolean = true;
   private commentElements: Array<HTMLElement>;
   private dependedQuestions: Array<Question> = [];
-  private _commentTextAreaModel: TextAreaModel;
 
   /**
    * An event that is raised when the question's ready state has changed (expressions are evaluated, choices are loaded from a web resource specified by the `choicesByUrl` property, etc.).
@@ -124,6 +123,7 @@ export class Question extends SurveyElement<Question>
   @property({ defaultValue: false }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;
   @property() ariaExpanded: "true" | "false";
+  @property() commentTextAreaModel: TextAreaModel;
 
   constructor(name: string) {
     super(name);
@@ -178,6 +178,10 @@ export class Question extends SurveyElement<Question>
     });
     this.registerPropertyChangedHandlers(["isMobile"], () => { this.onMobileChanged(); });
     this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); });
+    this.registerPropertyChangedHandlers(["id", "renderedCommentPlaceholder"], () => {
+      this.updateCommentTextAreaModel();
+    });
+    this.updateCommentTextAreaModel();
   }
   protected getDefaultTitle(): string { return this.name; }
   protected createLocTitleProperty(): LocalizableString {
@@ -2476,11 +2480,11 @@ export class Question extends SurveyElement<Question>
     );
   }
 
-  public get commentTextAreaModel(): TextAreaModel {
-    if (!this._commentTextAreaModel) {
-      this._commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
+  public updateCommentTextAreaModel(): void {
+    if (this.commentTextAreaModel) {
+      this.commentTextAreaModel.dispose();
     }
-    return this._commentTextAreaModel;
+    this.commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
   }
   public getCommentTextAreaOptions(): ITextArea {
     const options: ITextArea = {
@@ -2666,9 +2670,9 @@ export class Question extends SurveyElement<Question>
     super.dispose();
     this.resetDependedQuestions();
     this.destroyResizeObserver();
-    if (this._commentTextAreaModel) {
-      this._commentTextAreaModel.dispose();
-      this._commentTextAreaModel = undefined;
+    if (this.commentTextAreaModel) {
+      this.commentTextAreaModel.dispose();
+      this.commentTextAreaModel = undefined;
     }
   }
   private resetDependedQuestions(): void {
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index 97ba51d384..c984cdee10 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -36,7 +36,6 @@ export class QuestionSelectBase extends Question {
   private newItemValue: ItemValue;
   private canShowOptionItemCallback: (item: ItemValue) => boolean;
   private waitingGetChoiceDisplayValueResponse: boolean;
-  private _otherTextAreaModel: TextAreaModel;
   private get waitingChoicesByURL(): boolean {
     return !this.isChoicesLoaded && this.hasChoicesUrl;
   }
@@ -45,6 +44,7 @@ export class QuestionSelectBase extends Question {
       target.onSelectedItemValuesChangedHandler(newVal);
     }
   }) protected selectedItemValues: any;
+  @property() otherTextAreaModel: TextAreaModel;
 
   constructor(name: string) {
     super(name);
@@ -67,6 +67,10 @@ export class QuestionSelectBase extends Question {
     this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], () => {
       this.onVisibleChanged();
     });
+    this.registerPropertyChangedHandlers(["id", "otherPlaceholder"], () => {
+      this.updateOtherTextAreaModel();
+    });
+    this.updateOtherTextAreaModel();
     this.createNewArray("visibleChoices");
     this.setNewRestfulProperty();
     var locOtherText = this.createLocalizableString("otherText", this.otherItemValue, true, "otherItemText");
@@ -101,9 +105,9 @@ export class QuestionSelectBase extends Question {
     if (!!q) {
       q.removeDependedQuestion(this);
     }
-    if (this._otherTextAreaModel) {
-      this._otherTextAreaModel.dispose();
-      this._otherTextAreaModel = undefined;
+    if (this.otherTextAreaModel) {
+      this.otherTextAreaModel.dispose();
+      this.otherTextAreaModel = undefined;
     }
   }
   protected resetDependedQuestion(): void {
@@ -1970,11 +1974,11 @@ export class QuestionSelectBase extends Question {
     return classes;
   }
 
-  public get otherTextAreaModel(): TextAreaModel {
-    if (!this._otherTextAreaModel) {
-      this._otherTextAreaModel = new TextAreaModel(this.getOtherTextAreaOptions());
+  public updateOtherTextAreaModel(): void {
+    if (this.otherTextAreaModel) {
+      this.otherTextAreaModel.dispose();
     }
-    return this._otherTextAreaModel;
+    this.otherTextAreaModel = new TextAreaModel(this.getOtherTextAreaOptions());
   }
   public getOtherTextAreaOptions(): ITextArea {
     const options: ITextArea = {
diff --git a/src/question_comment.ts b/src/question_comment.ts
index e3d1b33228..6f7e0d5476 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -1,4 +1,4 @@
-import { Serializer } from "./jsonobject";
+import { property, Serializer } from "./jsonobject";
 import { QuestionFactory } from "./questionfactory";
 import { QuestionTextBase } from "./question_textbase";
 import { increaseHeightByContent } from "./utils/utils";
@@ -13,7 +13,16 @@ import { Helpers } from "./helpers";
  */
 export class QuestionCommentModel extends QuestionTextBase {
   private element: HTMLElement;
-  private _textAreaModel: TextAreaModel;
+
+  constructor(name: string) {
+    super(name);
+
+    this.registerPropertyChangedHandlers(["id", "rows", "cols", "renderedPlaceholder", "autoGrow"], () => {
+      this.updateTextAreaModel();
+    });
+    this.updateTextAreaModel();
+  }
+  @property() textAreaModel: TextAreaModel;
   /**
    * Specifies the visible height of the comment area, measured in lines.
    *
@@ -129,11 +138,11 @@ export class QuestionCommentModel extends QuestionTextBase {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
 
-  public get textAreaModel(): TextAreaModel {
-    if (!this._textAreaModel) {
-      this._textAreaModel = new TextAreaModel(this.getTextAreaOptions());
+  public updateTextAreaModel(): void {
+    if (this.textAreaModel) {
+      this.textAreaModel.dispose();
     }
-    return this._textAreaModel;
+    this.textAreaModel = new TextAreaModel(this.getTextAreaOptions());
   }
 
   public getTextAreaOptions(): ITextArea {
@@ -171,9 +180,9 @@ export class QuestionCommentModel extends QuestionTextBase {
   }
   public dispose(): void {
     super.dispose();
-    if (this._textAreaModel) {
-      this._textAreaModel.dispose();
-      this._textAreaModel = undefined;
+    if (this.textAreaModel) {
+      this.textAreaModel.dispose();
+      this.textAreaModel = undefined;
     }
   }
 }

From 8c0df37191a3449ceed29bfbc72b911334ae70a2 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 2 Aug 2024 15:29:32 +0300
Subject: [PATCH 16/27] work for textarea component enhancement

---
 src/question.ts            | 2 +-
 src/question_baseselect.ts | 7 +++++--
 src/question_comment.ts    | 5 ++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/question.ts b/src/question.ts
index b888e87b89..e9bbc3b7ce 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -181,7 +181,6 @@ export class Question extends SurveyElement<Question>
     this.registerPropertyChangedHandlers(["id", "renderedCommentPlaceholder"], () => {
       this.updateCommentTextAreaModel();
     });
-    this.updateCommentTextAreaModel();
   }
   protected getDefaultTitle(): string { return this.name; }
   protected createLocTitleProperty(): LocalizableString {
@@ -1478,6 +1477,7 @@ export class Question extends SurveyElement<Question>
     this.onIndentChanged();
     this.updateQuestionCss();
     this.updateIsAnswered();
+    this.updateCommentTextAreaModel();
   }
   protected initDataFromSurvey(): void {
     if (!!this.data) {
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index e88c98a952..54d687bdbe 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -70,7 +70,6 @@ export class QuestionSelectBase extends Question {
     this.registerPropertyChangedHandlers(["id", "otherPlaceholder"], () => {
       this.updateOtherTextAreaModel();
     });
-    this.updateOtherTextAreaModel();
     this.createNewArray("visibleChoices");
     this.setNewRestfulProperty();
     var locOtherText = this.createLocalizableString("otherText", this.otherItemValue, true, "otherItemText");
@@ -1977,6 +1976,10 @@ export class QuestionSelectBase extends Question {
     return classes;
   }
 
+  protected onSetData(): void {
+    super.onSetData();
+    this.updateOtherTextAreaModel();
+  }
   public updateOtherTextAreaModel(): void {
     if (this.otherTextAreaModel) {
       this.otherTextAreaModel.dispose();
@@ -1993,7 +1996,7 @@ export class QuestionSelectBase extends Question {
       placeholder: this.otherPlaceholder,
       rows: this.commentAreaRows,
       maxLength: this.getOthersMaxLength(),
-      autoGrow: this.survey.autoGrowComment,
+      autoGrow: this.survey && this.survey.autoGrowComment,
       ariaRequired: this.ariaRequired || this.a11y_input_ariaRequired,
       ariaLabel: this.ariaLabel || this.a11y_input_ariaLabel,
       getTextValue: () => { return this.otherValue; },
diff --git a/src/question_comment.ts b/src/question_comment.ts
index 6f7e0d5476..2161554fee 100644
--- a/src/question_comment.ts
+++ b/src/question_comment.ts
@@ -20,7 +20,6 @@ export class QuestionCommentModel extends QuestionTextBase {
     this.registerPropertyChangedHandlers(["id", "rows", "cols", "renderedPlaceholder", "autoGrow"], () => {
       this.updateTextAreaModel();
     });
-    this.updateTextAreaModel();
   }
   @property() textAreaModel: TextAreaModel;
   /**
@@ -118,6 +117,10 @@ export class QuestionCommentModel extends QuestionTextBase {
       event.stopPropagation();
     }
   }
+  protected onSetData(): void {
+    super.onSetData();
+    this.updateTextAreaModel();
+  }
   protected setQuestionValue(newValue: any, updateIsAnswered: boolean = true): void {
     super.setQuestionValue(newValue, updateIsAnswered);
     this.updateElement();

From 4e0e8c1fbc574bd0ae0fedf5aa3d86b8a99bd4ea Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 19 Aug 2024 10:09:53 +0300
Subject: [PATCH 17/27] work for textarea component enhancement

---
 src/utils/text-area.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/text-area.ts b/src/utils/text-area.ts
index f503534a8f..086129f737 100644
--- a/src/utils/text-area.ts
+++ b/src/utils/text-area.ts
@@ -78,7 +78,7 @@ export class TextAreaModel {
     return this.options.id;
   }
   get placeholder(): string {
-    return this.options.placeholder;
+    return this.options.placeholder || "";
   }
   get className(): string {
     return this.options.className;

From 5769f19ded0f660eea1da8a1773c47cd9a150493 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 19 Aug 2024 11:20:45 +0300
Subject: [PATCH 18/27] work for textarea component enhancement

---
 .../text-area/text-area.component.html        |  3 +-
 .../survey-core/src}/utils/text-area.ts       | 10 ++++
 .../src/components/text-area.tsx              | 55 +++++++++++++++++++
 .../src/components/TextArea.vue               |  7 ++-
 .../components/text-area/text-area.html       |  3 +-
 src/vue/components/text-area.vue              |  7 ++-
 6 files changed, 81 insertions(+), 4 deletions(-)
 rename {src => packages/survey-core/src}/utils/text-area.ts (90%)
 create mode 100644 packages/survey-react-ui/src/components/text-area.tsx

diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.html b/packages/survey-angular-ui/src/components/text-area/text-area.component.html
index faefe29d63..e39dfaba0a 100644
--- a/packages/survey-angular-ui/src/components/text-area/text-area.component.html
+++ b/packages/survey-angular-ui/src/components/text-area/text-area.component.html
@@ -10,7 +10,8 @@
 [value]="value"
 (input)="model.onTextAreaInput($event)"
 (keydown)="model.onTextAreaKeyDown($event)"
-(blur)="model.onTextAreaChange($event)"
+(focus)="model.onTextAreaFocus($event)"
+(blur)="model.onTextAreaBlur($event)"
 (change)="model.onTextAreaChange($event)"
 [attr.aria-required]="model.ariaRequired"
 [attr.aria-label]="model.ariaLabel"
diff --git a/src/utils/text-area.ts b/packages/survey-core/src/utils/text-area.ts
similarity index 90%
rename from src/utils/text-area.ts
rename to packages/survey-core/src/utils/text-area.ts
index 086129f737..b35c8f93b9 100644
--- a/src/utils/text-area.ts
+++ b/packages/survey-core/src/utils/text-area.ts
@@ -18,6 +18,8 @@ export interface ITextArea {
   onTextAreaChange?: (event: any) => void;
   onTextAreaInput?: (event: any) => void;
   onTextAreaKeyDown?: (event: any) => void;
+  onTextAreaBlur?: (event: any) => void;
+  onTextAreaFocus?: (event: any) => void;
 
   ariaRequired: "true" | "false";
   ariaLabel: string;
@@ -71,6 +73,14 @@ export class TextAreaModel {
     if (!!this.options.onTextAreaKeyDown)
       this.options.onTextAreaKeyDown(event);
   }
+  public onTextAreaBlur(event: any): void {
+    if (!!this.options.onTextAreaBlur)
+      this.options.onTextAreaBlur(event);
+  }
+  public onTextAreaFocus(event: any): void {
+    if (!!this.options.onTextAreaFocus)
+      this.options.onTextAreaFocus(event);
+  }
   get question(): Question {
     return this.options.question as Question;
   }
diff --git a/packages/survey-react-ui/src/components/text-area.tsx b/packages/survey-react-ui/src/components/text-area.tsx
new file mode 100644
index 0000000000..063efc3a54
--- /dev/null
+++ b/packages/survey-react-ui/src/components/text-area.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { TextAreaModel } from "survey-core";
+import { ReactElementFactory } from "../element-factory";
+import { SurveyElementBase } from "../reactquestion_element";
+
+interface ITextAreaProps {
+  viewModel: TextAreaModel;
+}
+
+export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
+  private initialValue;
+
+  constructor(props: ITextAreaProps) {
+    super(props);
+    this.initialValue = this.viewModel.getTextValue() || "";
+  }
+  get viewModel(): TextAreaModel {
+    return this.props.viewModel;
+  }
+  protected canRender(): boolean {
+    return !!this.viewModel.question;
+  }
+
+  protected renderElement(): JSX.Element {
+    return (
+      <textarea
+        id={this.viewModel.id}
+        className={this.viewModel.className}
+        ref={(textarea) => (this.viewModel.setElement(textarea))}
+        disabled={this.viewModel.isDisabledAttr}
+        readOnly={this.viewModel.isReadOnlyAttr}
+        rows={this.viewModel.rows}
+        cols={this.viewModel.cols}
+        placeholder={this.viewModel.placeholder}
+        maxLength={this.viewModel.maxLength}
+        defaultValue={this.initialValue}
+        onChange={(event: any) => { this.viewModel.onTextAreaInput(event); }}
+        onFocus={(event: any) => { this.viewModel.onTextAreaFocus(event); }}
+        onBlur={(event: any) => { this.viewModel.onTextAreaBlur(event); }}
+        onKeyDown={(event: any) => { this.viewModel.onTextAreaKeyDown(event); }}
+        aria-required={this.viewModel.ariaRequired}
+        aria-label={this.viewModel.ariaLabel}
+        aria-labelledby={this.viewModel.ariaLabelledBy}
+        aria-describedby={this.viewModel.ariaDescribedBy}
+        aria-invalid={this.viewModel.ariaInvalid}
+        aria-errormessage={this.viewModel.ariaErrormessage}
+        style={{ resize: this.viewModel.question.resizeStyle }}
+      />
+    );
+  }
+}
+
+ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
+  return React.createElement(TextAreaComponent, props);
+});
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
index c28258defe..e47c794742 100644
--- a/packages/survey-vue3-ui/src/components/TextArea.vue
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -12,7 +12,12 @@
     :class="model.className"
     @blur="
       (e) => {
-        model.onTextAreaChange(e);
+        model.onTextAreaBlur(e);
+      }
+    "
+    @focus="
+      (e) => {
+        model.onTextAreaFocus(e);
       }
     "
     @change="
diff --git a/src/knockout/components/text-area/text-area.html b/src/knockout/components/text-area/text-area.html
index d9c0acc0dd..9d4213e56d 100644
--- a/src/knockout/components/text-area/text-area.html
+++ b/src/knockout/components/text-area/text-area.html
@@ -15,7 +15,8 @@
     'aria-errormessage': $data.model.ariaErrormessage
   }, 
   event: { 
-    blur: function(s, e) { $data.model.onTextAreaChange(e); },
+    focus: function(s, e) { $data.model.onTextAreaFocus(e); return true; }, 
+    blur: function(s, e) { $data.model.onTextAreaBlur(e); return true; },
     input: function(s, e) { $data.model.onTextAreaInput(e); },
     keydown: function(s, e) { $data.model.onTextAreaKeyDown(e); return true; }
   }, 
diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
index e06ed5fdff..1e77edbe61 100644
--- a/src/vue/components/text-area.vue
+++ b/src/vue/components/text-area.vue
@@ -10,9 +10,14 @@
     :rows="model.rows"
     :placeholder="model.placeholder"
     :class="model.className"
+    @focus="
+      (e) => {
+        model.onTextAreaFocus(e);
+      }
+    "
     @blur="
       (e) => {
-        model.onTextAreaChange(e);
+        model.onTextAreaBlur(e);
       }
     "
     @change="

From b49b23e65198bf50967ab32b88a3c6fd696b0807 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 19 Aug 2024 16:19:27 +0300
Subject: [PATCH 19/27] work for textarea component enhancement

---
 packages/survey-core/src/question_comment.ts  |  2 +
 .../survey-core/tests/surveyquestiontests.ts  | 70 +++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/packages/survey-core/src/question_comment.ts b/packages/survey-core/src/question_comment.ts
index fa754f8d45..57a6bfe7cf 100644
--- a/packages/survey-core/src/question_comment.ts
+++ b/packages/survey-core/src/question_comment.ts
@@ -181,6 +181,8 @@ export class QuestionCommentModel extends QuestionTextBase {
       onTextAreaChange: (e) => { updateQuestionValue(e.target.value); },
       onTextAreaInput: (event) => { this.onInput(event); },
       onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
+      onTextAreaFocus: (event) => { this.onFocus(event); },
+      onTextAreaBlur: (event) => { this.onBlur(event); }
     };
     return options;
   }
diff --git a/packages/survey-core/tests/surveyquestiontests.ts b/packages/survey-core/tests/surveyquestiontests.ts
index 094f5318d5..bed3aedecc 100644
--- a/packages/survey-core/tests/surveyquestiontests.ts
+++ b/packages/survey-core/tests/surveyquestiontests.ts
@@ -7852,6 +7852,76 @@ QUnit.test("question.isDefaultValue", function (assert) {
   assert.equal(q3.isValueDefault, false, "q3 #4");
   assert.equal(q4.isValueDefault, false, "q4 #4");
 });
+
+QUnit.test("TextAreaOptions", function (assert) {
+  StylesManager.applyTheme("defaultV2");
+  Question["questionCounter"] = 101;
+
+  const survey = new SurveyModel({
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "dropdown",
+            "name": "q1",
+            "defaultValue": "other",
+            "showCommentArea": true,
+            "commentPlaceholder": "Comment placeholder",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ],
+            "showOtherItem": true,
+            "otherPlaceholder": "Other placeholder"
+          },
+          {
+            "type": "comment",
+            "name": "q2"
+          }
+        ]
+      }
+    ]
+  });
+
+  const q1 = <QuestionDropdownModel>survey.getQuestionByName("q1");
+  const otherOptions = q1.otherTextAreaModel;
+  const commentOptions = q1.commentTextAreaModel;
+
+  const q2 = <QuestionCommentModel>survey.getQuestionByName("q2");
+  const textAreaOptions = q2.getTextAreaOptions();
+
+  assert.equal(otherOptions.id, "sq_101_other", "otherOptions id");
+  assert.equal(otherOptions.className, "sd-input sd-comment sd-selectbase__other", "otherOptions className");
+  assert.equal(otherOptions.isDisabledAttr, "", "otherOptions isDisabledAttr");
+  assert.equal(otherOptions.isReadOnlyAttr, undefined, "otherOptions isReadOnlyAttr");
+  assert.equal(otherOptions.placeholder, "Other placeholder", "otherOptions placeholder");
+  assert.equal(otherOptions.maxLength, undefined, "otherOptions maxLength");
+  assert.equal(otherOptions.cols, undefined, "otherOptions cols");
+  assert.equal(otherOptions.rows, undefined, "otherOptions rows");
+
+  assert.equal(commentOptions.id, "sq_101_comment", "commentOptions id");
+  assert.equal(commentOptions.className, "sd-input sd-comment", "commentOptions className");
+  assert.equal(commentOptions.isDisabledAttr, "", "commentOptions isDisabledAttr");
+  assert.equal(commentOptions.isReadOnlyAttr, undefined, "commentOptions isReadOnlyAttr");
+  assert.equal(commentOptions.placeholder, "Comment placeholder", "commentOptions placeholder");
+  assert.equal(commentOptions.maxLength, undefined, "commentOptions maxLength");
+  assert.equal(commentOptions.cols, undefined, "commentOptions cols");
+  assert.equal(commentOptions.rows, undefined, "commentOptions rows");
+
+  assert.equal(textAreaOptions.id, "sq_102i", "textAreaOptions id");
+  assert.equal(textAreaOptions.className, "sd-input sd-comment", "textAreaOptions className");
+  assert.equal(textAreaOptions.isDisabledAttr, "", "textAreaOptions isDisabledAttr");
+  assert.equal(textAreaOptions.isReadOnlyAttr, false, "textAreaOptions isReadOnlyAttr");
+  assert.equal(textAreaOptions.placeholder, "", "textAreaOptions placeholder");
+  assert.equal(textAreaOptions.maxLength, undefined, "textAreaOptions maxLength");
+  assert.equal(textAreaOptions.cols, 50, "textAreaOptions cols");
+  assert.equal(textAreaOptions.rows, 4, "textAreaOptions rows");
+
+  StylesManager.applyTheme("default");
+});
+
 QUnit.test("survey.validateVisitedEmptyFields #8640", function (assert) {
   const survey = new SurveyModel({
     validateVisitedEmptyFields: true,

From 2a94f58fd8cac48b9b4c5b03f82fb65fb489f0b9 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Tue, 20 Aug 2024 15:13:20 +0300
Subject: [PATCH 20/27] work for textarea component enhancement

---
 .../survey-core/entries/chunks/core-wo-model.ts |  2 +-
 packages/survey-core/entries/chunks/model.ts    |  1 +
 packages/survey-core/src/question.ts            |  4 ++--
 packages/survey-core/src/question_baseselect.ts |  4 ++--
 packages/survey-core/src/question_comment.ts    |  4 ++--
 packages/survey-core/src/utils/text-area.ts     | 17 ++++++++---------
 .../survey-core/tests/surveyquestiontests.ts    |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/survey-core/entries/chunks/core-wo-model.ts b/packages/survey-core/entries/chunks/core-wo-model.ts
index a1328ce54c..be1a9e7207 100644
--- a/packages/survey-core/entries/chunks/core-wo-model.ts
+++ b/packages/survey-core/entries/chunks/core-wo-model.ts
@@ -12,4 +12,4 @@ export * from "../../src/utils/animation";
 export * from "../../src/actions/adaptive-container";
 export * from "../../src/actions/container";
 export * from "../../src/utils/dragOrClickHelper";
-export * from "../../src/utils/text-area";
+
diff --git a/packages/survey-core/entries/chunks/model.ts b/packages/survey-core/entries/chunks/model.ts
index d18d63cabb..b7bc27c7ad 100644
--- a/packages/survey-core/entries/chunks/model.ts
+++ b/packages/survey-core/entries/chunks/model.ts
@@ -292,6 +292,7 @@ export { InputMaskNumeric } from "../../src/mask/mask_numeric";
 export { InputMaskDateTime } from "../../src/mask/mask_datetime";
 export { InputMaskCurrency } from "../../src/mask/mask_currency";
 export * from "../../src/utils/cssClassBuilder";
+export * from "../../src/utils/text-area";
 
 export { surveyCss, defaultV2Css, defaultV2ThemeName } from "../../src/defaultCss/defaultV2Css";
 
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index aa01dccdb9..d7df3e38bc 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -2509,9 +2509,9 @@ export class Question extends SurveyElement<Question>
       question: this,
       id: this.commentId,
       propertyName: "comment",
-      className: this.cssClasses.comment,
+      className: () => this.cssClasses.comment,
+      placeholder: () => this.renderedCommentPlaceholder,
       isDisabledAttr: this.isInputReadOnly || false,
-      placeholder: this.renderedCommentPlaceholder,
       rows: this.commentAreaRows,
       autoGrow: this.autoGrowComment,
       maxLength: this.getOthersMaxLength(),
diff --git a/packages/survey-core/src/question_baseselect.ts b/packages/survey-core/src/question_baseselect.ts
index 5b76aabead..8df3853337 100644
--- a/packages/survey-core/src/question_baseselect.ts
+++ b/packages/survey-core/src/question_baseselect.ts
@@ -1994,9 +1994,9 @@ export class QuestionSelectBase extends Question {
       question: this,
       id: this.otherId,
       propertyName: "otherValue",
-      className: this.cssClasses.other,
+      className: () => this.cssClasses.other,
+      placeholder: () => this.otherPlaceholder,
       isDisabledAttr: this.isInputReadOnly || false,
-      placeholder: this.otherPlaceholder,
       rows: this.commentAreaRows,
       maxLength: this.getOthersMaxLength(),
       autoGrow: this.survey && this.survey.autoGrowComment,
diff --git a/packages/survey-core/src/question_comment.ts b/packages/survey-core/src/question_comment.ts
index 57a6bfe7cf..e3ac018c76 100644
--- a/packages/survey-core/src/question_comment.ts
+++ b/packages/survey-core/src/question_comment.ts
@@ -163,10 +163,10 @@ export class QuestionCommentModel extends QuestionTextBase {
       question: this,
       id: this.inputId,
       propertyName: "value",
-      className: this.className,
+      className: () => this.className,
+      placeholder: () => this.renderedPlaceholder,
       isDisabledAttr: this.isDisabledAttr,
       isReadOnlyAttr: this.isReadOnlyAttr,
-      placeholder: this.renderedPlaceholder,
       autoGrow: this.renderedAutoGrow,
       maxLength: this.getMaxLength(),
       rows: this.rows,
diff --git a/packages/survey-core/src/utils/text-area.ts b/packages/survey-core/src/utils/text-area.ts
index b35c8f93b9..8d356f3511 100644
--- a/packages/survey-core/src/utils/text-area.ts
+++ b/packages/survey-core/src/utils/text-area.ts
@@ -1,15 +1,14 @@
 import { increaseHeightByContent } from "./utils";
 import { Question } from "../question";
-import { ArrayChanges, Base } from "../base";
 
 export interface ITextArea {
   question: any;
   id: string;
   propertyName: string;
-  className: string;
+  className: () => string;
   isDisabledAttr: boolean;
   isReadOnlyAttr?: boolean;
-  placeholder: string;
+  placeholder: () => string;
   autoGrow: boolean;
   maxLength: number;
   rows: number;
@@ -32,8 +31,8 @@ export interface ITextArea {
 export class TextAreaModel {
   private element: HTMLTextAreaElement;
 
-  private onPropertyValueChangedCallback = (name: string, oldValue: any, newValue: any, sender: Base, arrayChanges: ArrayChanges) => {
-    if (name === this.options.propertyName && this.element) {
+  private onPropertyChangedCallback = () => {
+    if (this.element) {
       this.element.value = this.getTextValue();
 
       if (this.autoGrow) {
@@ -43,7 +42,7 @@ export class TextAreaModel {
   }
 
   constructor(private options: ITextArea) {
-    this.question.onPropertyValueChangedCallback = this.onPropertyValueChangedCallback;
+    this.question.registerFunctionOnPropertyValueChanged(this.options.propertyName, this.onPropertyChangedCallback, "__textarea");
   }
 
   public setElement(element: HTMLTextAreaElement | null): void {
@@ -88,10 +87,10 @@ export class TextAreaModel {
     return this.options.id;
   }
   get placeholder(): string {
-    return this.options.placeholder || "";
+    return this.options.placeholder() || "";
   }
   get className(): string {
-    return this.options.className;
+    return this.options.className();
   }
   get maxLength(): number {
     return this.options.maxLength;
@@ -132,7 +131,7 @@ export class TextAreaModel {
 
   public dispose(): void {
     if (this.question) {
-      this.question.onPropertyValueChangedCallback = undefined;
+      this.question.unRegisterFunctionOnPropertyValueChanged(this.options.propertyName, "__textarea");
     }
   }
 }
\ No newline at end of file
diff --git a/packages/survey-core/tests/surveyquestiontests.ts b/packages/survey-core/tests/surveyquestiontests.ts
index bed3aedecc..81cd99c9cd 100644
--- a/packages/survey-core/tests/surveyquestiontests.ts
+++ b/packages/survey-core/tests/surveyquestiontests.ts
@@ -7890,7 +7890,7 @@ QUnit.test("TextAreaOptions", function (assert) {
   const commentOptions = q1.commentTextAreaModel;
 
   const q2 = <QuestionCommentModel>survey.getQuestionByName("q2");
-  const textAreaOptions = q2.getTextAreaOptions();
+  const textAreaOptions = q2.textAreaModel;
 
   assert.equal(otherOptions.id, "sq_101_other", "otherOptions id");
   assert.equal(otherOptions.className, "sd-input sd-comment sd-selectbase__other", "otherOptions className");

From 1c9e20881199e7ed2e751123c882761c21b1f8e7 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 23 Aug 2024 15:48:14 +0300
Subject: [PATCH 21/27] work for textarea component enhancement

---
 packages/survey-core/src/question.ts          | 53 +++++------
 .../survey-core/src/question_baseselect.ts    | 56 +++++-------
 packages/survey-core/src/question_comment.ts  | 88 ++++++++-----------
 packages/survey-core/src/utils/text-area.ts   | 65 ++++++++------
 4 files changed, 120 insertions(+), 142 deletions(-)

diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index d7df3e38bc..e195a56389 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -91,6 +91,27 @@ export class Question extends SurveyElement<Question>
   private isReadyValue: boolean = true;
   private commentElements: Array<HTMLElement>;
   private dependedQuestions: Array<Question> = [];
+  public commentTextAreaModel: TextAreaModel;
+
+  private getCommentTextAreaOptions(): ITextArea {
+    const options: ITextArea = {
+      question: this,
+      id: () => this.commentId,
+      propertyName: "comment",
+      className: () => this.cssClasses.comment,
+      placeholder: () => this.renderedCommentPlaceholder,
+      isDisabledAttr: () => this.isInputReadOnly || false,
+      rows: () => this.commentAreaRows,
+      autoGrow: () => this.autoGrowComment,
+      maxLength: () => this.getOthersMaxLength(),
+      ariaRequired: () => this.a11y_input_ariaRequired,
+      ariaLabel: () => this.a11y_input_ariaLabel,
+      getTextValue: () => { return this.comment; },
+      onTextAreaChange: (e) => { this.onCommentChange(e); },
+      onTextAreaInput: (e) => { this.onCommentInput(e); },
+    };
+    return options;
+  }
 
   /**
    * An event that is raised when the question's ready state has changed (expressions are evaluated, choices are loaded from a web resource specified by the `choicesByUrl` property, etc.).
@@ -123,7 +144,6 @@ export class Question extends SurveyElement<Question>
   @property({ defaultValue: false }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;
   @property() ariaExpanded: "true" | "false";
-  @property() commentTextAreaModel: TextAreaModel;
 
   constructor(name: string) {
     super(name);
@@ -132,6 +152,7 @@ export class Question extends SurveyElement<Question>
     this.createNewArray("validators", (validator: any) => {
       validator.errorOwner = this;
     });
+    this.commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
 
     this.addExpressionProperty("visibleIf",
       (obj: Base, res: any) => { this.visible = res === true; },
@@ -178,9 +199,6 @@ export class Question extends SurveyElement<Question>
     });
     this.registerPropertyChangedHandlers(["isMobile"], () => { this.onMobileChanged(); });
     this.registerPropertyChangedHandlers(["colSpan"], () => { this.parent?.updateColumns(); });
-    this.registerPropertyChangedHandlers(["id", "renderedCommentPlaceholder"], () => {
-      this.updateCommentTextAreaModel();
-    });
   }
   protected getDefaultTitle(): string { return this.name; }
   protected createLocTitleProperty(): LocalizableString {
@@ -1495,7 +1513,6 @@ export class Question extends SurveyElement<Question>
     this.onIndentChanged();
     this.updateQuestionCss();
     this.updateIsAnswered();
-    this.updateCommentTextAreaModel();
   }
   protected initDataFromSurvey(): void {
     if (!!this.data) {
@@ -2498,32 +2515,6 @@ export class Question extends SurveyElement<Question>
     );
   }
 
-  public updateCommentTextAreaModel(): void {
-    if (this.commentTextAreaModel) {
-      this.commentTextAreaModel.dispose();
-    }
-    this.commentTextAreaModel = new TextAreaModel(this.getCommentTextAreaOptions());
-  }
-  public getCommentTextAreaOptions(): ITextArea {
-    const options: ITextArea = {
-      question: this,
-      id: this.commentId,
-      propertyName: "comment",
-      className: () => this.cssClasses.comment,
-      placeholder: () => this.renderedCommentPlaceholder,
-      isDisabledAttr: this.isInputReadOnly || false,
-      rows: this.commentAreaRows,
-      autoGrow: this.autoGrowComment,
-      maxLength: this.getOthersMaxLength(),
-      ariaRequired: this.a11y_input_ariaRequired,
-      ariaLabel: this.a11y_input_ariaLabel,
-      getTextValue: () => { return this.comment; },
-      onTextAreaChange: (e) => { this.onCommentChange(e); },
-      onTextAreaInput: (e) => { this.onCommentInput(e); },
-    };
-    return options;
-  }
-
   @property() renderAs: string;
 
   @property({ defaultValue: false }) inMatrixMode: boolean;
diff --git a/packages/survey-core/src/question_baseselect.ts b/packages/survey-core/src/question_baseselect.ts
index 7891486382..9def62afa4 100644
--- a/packages/survey-core/src/question_baseselect.ts
+++ b/packages/survey-core/src/question_baseselect.ts
@@ -21,6 +21,7 @@ import { mergeValues } from "./utils/utils";
 export class QuestionSelectBase extends Question {
   public visibleChoicesChangedCallback: () => void;
   public loadedChoicesFromServerCallback: () => void;
+  public otherTextAreaModel: TextAreaModel;
   private filteredChoicesValue: Array<ItemValue>;
   private conditionChoicesVisibleIfRunner: ConditionRunner;
   private conditionChoicesEnableIfRunner: ConditionRunner;
@@ -44,7 +45,26 @@ export class QuestionSelectBase extends Question {
       target.onSelectedItemValuesChangedHandler(newVal);
     }
   }) protected selectedItemValues: any;
-  @property() otherTextAreaModel: TextAreaModel;
+
+  private getOtherTextAreaOptions(): ITextArea {
+    const options: ITextArea = {
+      question: this,
+      id: () => this.otherId,
+      propertyName: "otherValue",
+      className: () => this.cssClasses.other,
+      placeholder: () => this.otherPlaceholder,
+      isDisabledAttr: () => this.isInputReadOnly || false,
+      rows: () => this.commentAreaRows,
+      maxLength: () => this.getOthersMaxLength(),
+      autoGrow: () => this.survey && this.survey.autoGrowComment,
+      ariaRequired: () => this.ariaRequired || this.a11y_input_ariaRequired,
+      ariaLabel: () => this.ariaLabel || this.a11y_input_ariaLabel,
+      getTextValue: () => { return this.otherValue; },
+      onTextAreaChange: (e) => { this.onOtherValueChange(e); },
+      onTextAreaInput: (e) => { this.onOtherValueInput(e); },
+    };
+    return options;
+  }
 
   constructor(name: string) {
     super(name);
@@ -67,9 +87,7 @@ export class QuestionSelectBase extends Question {
     this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], () => {
       this.onVisibleChanged();
     });
-    this.registerPropertyChangedHandlers(["id", "otherPlaceholder"], () => {
-      this.updateOtherTextAreaModel();
-    });
+    this.otherTextAreaModel = new TextAreaModel(this.getOtherTextAreaOptions());
     this.createNewArray("visibleChoices");
     this.setNewRestfulProperty();
     var locOtherText = this.createLocalizableString("otherText", this.otherItemValue, true, "otherItemText");
@@ -1975,36 +1993,6 @@ export class QuestionSelectBase extends Question {
     }
     return classes;
   }
-
-  protected onSetData(): void {
-    super.onSetData();
-    this.updateOtherTextAreaModel();
-  }
-  public updateOtherTextAreaModel(): void {
-    if (this.otherTextAreaModel) {
-      this.otherTextAreaModel.dispose();
-    }
-    this.otherTextAreaModel = new TextAreaModel(this.getOtherTextAreaOptions());
-  }
-  public getOtherTextAreaOptions(): ITextArea {
-    const options: ITextArea = {
-      question: this,
-      id: this.otherId,
-      propertyName: "otherValue",
-      className: () => this.cssClasses.other,
-      placeholder: () => this.otherPlaceholder,
-      isDisabledAttr: this.isInputReadOnly || false,
-      rows: this.commentAreaRows,
-      maxLength: this.getOthersMaxLength(),
-      autoGrow: this.survey && this.survey.autoGrowComment,
-      ariaRequired: this.ariaRequired || this.a11y_input_ariaRequired,
-      ariaLabel: this.ariaLabel || this.a11y_input_ariaLabel,
-      getTextValue: () => { return this.otherValue; },
-      onTextAreaChange: (e) => { this.onOtherValueChange(e); },
-      onTextAreaInput: (e) => { this.onOtherValueInput(e); },
-    };
-    return options;
-  }
 }
 /**
  * A base class for multiple-selection question types that can display choice items in multiple columns ([Checkbox](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Radiogroup](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), [Image Picker](https://surveyjs.io/form-library/documentation/questionimagepickermodel)).
diff --git a/packages/survey-core/src/question_comment.ts b/packages/survey-core/src/question_comment.ts
index e3ac018c76..aa8bc1d242 100644
--- a/packages/survey-core/src/question_comment.ts
+++ b/packages/survey-core/src/question_comment.ts
@@ -13,15 +13,49 @@ import { Helpers } from "./helpers";
  */
 export class QuestionCommentModel extends QuestionTextBase {
   private element: HTMLElement;
+  public textAreaModel: TextAreaModel;
+
+  private getTextAreaOptions(): ITextArea {
+    const _this = this;
+    const updateQuestionValue = (newValue: any) => {
+      if (!Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
+        _this.value = newValue;
+      }
+    };
+
+    const options: ITextArea = {
+      question: this,
+      id: () => this.inputId,
+      propertyName: "value",
+      className: () => this.className,
+      placeholder: () => this.renderedPlaceholder,
+      isDisabledAttr: () => this.isDisabledAttr,
+      isReadOnlyAttr: () => this.isReadOnlyAttr,
+      autoGrow: () => this.renderedAutoGrow,
+      maxLength: () => this.getMaxLength(),
+      rows: () => this.rows,
+      cols: () => this.cols,
+      ariaRequired: () => this.a11y_input_ariaRequired,
+      ariaLabel: () => this.a11y_input_ariaLabel,
+      ariaLabelledBy: () => this.a11y_input_ariaLabelledBy,
+      ariaDescribedBy: () => this.a11y_input_ariaDescribedBy,
+      ariaInvalid: () => this.a11y_input_ariaInvalid,
+      ariaErrormessage: () => this.a11y_input_ariaErrormessage,
+      getTextValue: () => { return this.value; },
+      onTextAreaChange: (e) => { updateQuestionValue(e.target.value); },
+      onTextAreaInput: (event) => { this.onInput(event); },
+      onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
+      onTextAreaFocus: (event) => { this.onFocus(event); },
+      onTextAreaBlur: (event) => { this.onBlur(event); }
+    };
+    return options;
+  }
 
   constructor(name: string) {
     super(name);
 
-    this.registerPropertyChangedHandlers(["id", "rows", "cols", "renderedPlaceholder", "autoGrow"], () => {
-      this.updateTextAreaModel();
-    });
+    this.textAreaModel = new TextAreaModel(this.getTextAreaOptions());
   }
-  @property() textAreaModel: TextAreaModel;
   /**
    * Specifies the visible height of the comment area, measured in lines.
    *
@@ -120,10 +154,6 @@ export class QuestionCommentModel extends QuestionTextBase {
       event.stopPropagation();
     }
   }
-  protected onSetData(): void {
-    super.onSetData();
-    this.updateTextAreaModel();
-  }
   protected setQuestionValue(newValue: any, updateIsAnswered: boolean = true): void {
     super.setQuestionValue(newValue, updateIsAnswered);
     this.updateElement();
@@ -144,48 +174,6 @@ export class QuestionCommentModel extends QuestionTextBase {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
 
-  public updateTextAreaModel(): void {
-    if (this.textAreaModel) {
-      this.textAreaModel.dispose();
-    }
-    this.textAreaModel = new TextAreaModel(this.getTextAreaOptions());
-  }
-
-  public getTextAreaOptions(): ITextArea {
-    const _this = this;
-    const updateQuestionValue = (newValue: any) => {
-      if (!Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
-        _this.value = newValue;
-      }
-    };
-
-    const options: ITextArea = {
-      question: this,
-      id: this.inputId,
-      propertyName: "value",
-      className: () => this.className,
-      placeholder: () => this.renderedPlaceholder,
-      isDisabledAttr: this.isDisabledAttr,
-      isReadOnlyAttr: this.isReadOnlyAttr,
-      autoGrow: this.renderedAutoGrow,
-      maxLength: this.getMaxLength(),
-      rows: this.rows,
-      cols: this.cols,
-      ariaRequired: this.a11y_input_ariaRequired,
-      ariaLabel: this.a11y_input_ariaLabel,
-      ariaLabelledBy: this.a11y_input_ariaLabelledBy,
-      ariaDescribedBy: this.a11y_input_ariaDescribedBy,
-      ariaInvalid: this.a11y_input_ariaInvalid,
-      ariaErrormessage: this.a11y_input_ariaErrormessage,
-      getTextValue: () => { return this.value; },
-      onTextAreaChange: (e) => { updateQuestionValue(e.target.value); },
-      onTextAreaInput: (event) => { this.onInput(event); },
-      onTextAreaKeyDown: (event) => { this.onKeyDown(event); },
-      onTextAreaFocus: (event) => { this.onFocus(event); },
-      onTextAreaBlur: (event) => { this.onBlur(event); }
-    };
-    return options;
-  }
   public dispose(): void {
     super.dispose();
     if (this.textAreaModel) {
diff --git a/packages/survey-core/src/utils/text-area.ts b/packages/survey-core/src/utils/text-area.ts
index 8d356f3511..b2819d24e4 100644
--- a/packages/survey-core/src/utils/text-area.ts
+++ b/packages/survey-core/src/utils/text-area.ts
@@ -3,16 +3,16 @@ import { Question } from "../question";
 
 export interface ITextArea {
   question: any;
-  id: string;
+  id: () => string;
   propertyName: string;
   className: () => string;
-  isDisabledAttr: boolean;
-  isReadOnlyAttr?: boolean;
+  isDisabledAttr: () => boolean;
+  isReadOnlyAttr?: () => boolean;
   placeholder: () => string;
-  autoGrow: boolean;
-  maxLength: number;
-  rows: number;
-  cols?: number;
+  autoGrow: () => boolean;
+  maxLength: () => number;
+  rows: () => number;
+  cols?: () => number;
   getTextValue?: () => any;
   onTextAreaChange?: (event: any) => void;
   onTextAreaInput?: (event: any) => void;
@@ -20,12 +20,12 @@ export interface ITextArea {
   onTextAreaBlur?: (event: any) => void;
   onTextAreaFocus?: (event: any) => void;
 
-  ariaRequired: "true" | "false";
-  ariaLabel: string;
-  ariaInvalid?: "true" | "false";
-  ariaLabelledBy?: string;
-  ariaDescribedBy?: string;
-  ariaErrormessage?: string;
+  ariaRequired: () => "true" | "false";
+  ariaLabel: () => string;
+  ariaInvalid?: () => "true" | "false";
+  ariaLabelledBy?: () => string;
+  ariaDescribedBy?: () => string;
+  ariaErrormessage?: () => string;
 }
 
 export class TextAreaModel {
@@ -84,49 +84,60 @@ export class TextAreaModel {
     return this.options.question as Question;
   }
   get id(): string {
-    return this.options.id;
+    return this.options.id();
   }
   get placeholder(): string {
-    return this.options.placeholder() || "";
+    return this.options.placeholder();
   }
   get className(): string {
     return this.options.className();
   }
   get maxLength(): number {
-    return this.options.maxLength;
+    if (this.options.maxLength)
+      return this.options.maxLength();
   }
   get autoGrow(): boolean {
-    return this.options.autoGrow;
+    if (this.options.autoGrow)
+      return this.options.autoGrow();
   }
   get rows(): number {
-    return this.options.rows;
+    if (this.options.rows)
+      return this.options.rows();
   }
   get cols(): number | undefined {
-    return this.options.cols;
+    if (this.options.cols)
+      return this.options.cols();
   }
   get isDisabledAttr(): boolean {
-    return this.options.isDisabledAttr;
+    return this.options.isDisabledAttr();
   }
   get isReadOnlyAttr(): boolean | undefined {
-    return this.options.isReadOnlyAttr;
+    if (this.options.isReadOnlyAttr)
+      return this.options.isReadOnlyAttr();
   }
   get ariaRequired(): "true" | "false" {
-    return this.options.ariaRequired;
+    if (this.options.ariaRequired)
+      return this.options.ariaRequired();
   }
   get ariaLabel(): string {
-    return this.options.ariaLabel;
+    if (this.options.ariaLabel)
+      return this.options.ariaLabel();
   }
   get ariaInvalid(): "true" | "false" {
-    return this.options.ariaInvalid;
+    if (this.options.ariaInvalid)
+      return this.options.ariaInvalid();
   }
   get ariaLabelledBy(): string {
-    return this.options.ariaLabelledBy;
+    if (this.options.ariaLabelledBy)
+      return this.options.ariaLabelledBy();
   }
   get ariaDescribedBy(): string {
-    return this.options.ariaDescribedBy;
+    if (this.options.ariaDescribedBy)
+      return this.options.ariaDescribedBy();
   }
   get ariaErrormessage(): string {
-    return this.options.ariaErrormessage;
+    if (this.options.ariaErrormessage)
+      return this.options.ariaErrormessage();
   }
 
   public dispose(): void {

From fe66e3b8126ddb0e058d9c30672b0a74d018f9df Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 4 Sep 2024 14:58:23 +0300
Subject: [PATCH 22/27] work for textarea component enhancement

---
 packages/survey-core/src/utils/text-area.ts | 1 +
 src/react/components/text-area.tsx          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/utils/text-area.ts b/packages/survey-core/src/utils/text-area.ts
index b2819d24e4..647369a1ae 100644
--- a/packages/survey-core/src/utils/text-area.ts
+++ b/packages/survey-core/src/utils/text-area.ts
@@ -73,6 +73,7 @@ export class TextAreaModel {
       this.options.onTextAreaKeyDown(event);
   }
   public onTextAreaBlur(event: any): void {
+    this.onTextAreaChange(event);
     if (!!this.options.onTextAreaBlur)
       this.options.onTextAreaBlur(event);
   }
diff --git a/src/react/components/text-area.tsx b/src/react/components/text-area.tsx
index bd005adfcc..8396600432 100644
--- a/src/react/components/text-area.tsx
+++ b/src/react/components/text-area.tsx
@@ -35,7 +35,7 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
         maxLength={this.viewModel.maxLength}
         defaultValue={this.initialValue}
         onChange={(event: any) => { this.viewModel.onTextAreaInput(event); }}
-        onBlur={(event: any) => { this.viewModel.onTextAreaChange(event); }}
+        onBlur={(event: any) => { this.viewModel.onTextAreaBlur(event); }}
         onKeyDown={(event: any) => { this.viewModel.onTextAreaKeyDown(event); }}
         aria-required={this.viewModel.ariaRequired}
         aria-label={this.viewModel.ariaLabel}

From 850d488c455949d7f6abee1abfcfd0f3013bece7 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 4 Sep 2024 16:02:51 +0300
Subject: [PATCH 23/27] work for textarea component enhancement

---
 packages/survey-vue3-ui/src/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 5363b18435..3f73badb0b 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -259,9 +259,9 @@ function registerComponents(app: App) {
   app.component("survey-customwidget", CustomWidget);
   app.component("survey-popup-modal", PopupModal);
 
-  app.component("sv-character-counter", TextAreaComponent);
-  app.component("sv-text-area", CharacterCounterComponent);
-  
+  app.component("sv-character-counter", CharacterCounterComponent);
+  app.component("sv-text-area", TextAreaComponent);
+
   app.component("survey-composite", Composite);
   app.component("survey-custom", Custom);
   app.component("sv-timerpanel", TimerPanel);

From 80b8bbb37553b213eb098d6c28e054cea9786152 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 5 Sep 2024 12:53:09 +0300
Subject: [PATCH 24/27] work for textarea component enhancement

---
 .../src/components/TextArea.vue               |  4 +--
 testCafe/validation/customValidators.js       | 31 +++++++++----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
index e47c794742..07f251131a 100644
--- a/packages/survey-vue3-ui/src/components/TextArea.vue
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -48,11 +48,11 @@
 <script lang="ts" setup>
 import { useBase } from "@/base";
 import type { TextAreaModel } from "survey-core";
-import { onMounted, onUpdated, ref } from "vue";
+import { computed, onMounted, onUpdated, ref } from "vue";
 
 const props = defineProps<{ model: TextAreaModel }>();
 const contentElement = ref<HTMLTextAreaElement>((null as any) as HTMLTextAreaElement);
-const value = props.model.getTextValue() || "";
+const value = computed(() => props.model.getTextValue() || "");
 
 onMounted(() => {
   props.model.setElement(contentElement.value);
diff --git a/testCafe/validation/customValidators.js b/testCafe/validation/customValidators.js
index ae787ca358..fc7d132763 100644
--- a/testCafe/validation/customValidators.js
+++ b/testCafe/validation/customValidators.js
@@ -1,7 +1,5 @@
 import { frameworks, url, initSurvey, getSurveyResult } from "../helper";
 import { Selector, ClientFunction, fixture, test } from "testcafe";
-// eslint-disable-next-line no-undef
-const assert = require("assert");
 const title = "customValidators";
 
 const setupSurvey = ClientFunction(() => {
@@ -26,6 +24,7 @@ const setupSurvey = ClientFunction(() => {
       return "mytextvalidator";
     };
     MyTextValidator.prototype.validate = function(value, name) {
+
       if (value.indexOf("survey") < 0) {
         //report an error
         return new window["Survey"].ValidatorResult(
@@ -69,14 +68,12 @@ const json = {
 };
 
 frameworks.forEach(framework => {
-  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
-    async t => {
-      await setupSurvey();
-      await initSurvey(framework, json);
-    }
-  );
+  fixture`${framework} ${title}`.page`${url}${framework}`;
 
   test("check validation", async t => {
+    await setupSurvey();
+    await initSurvey(framework, json);
+
     const getError1Div = Selector("div").withText("Response required.").with({
       visibilityCheck: true,
       timeout: 1000
@@ -85,19 +82,19 @@ frameworks.forEach(framework => {
       visibilityCheck: true,
       timeout: 1000
     });
-    let surveyResult;
-
-    await t.click("input[value=\"Complete\"]");
-
-    assert(await getError1Div());
 
-    await t.typeText("textarea", "wombat").click("input[value=\"Complete\"]");
+    await t
+      .click("input[value=\"Complete\"]")
+      .expect(getError1Div.visible).ok()
 
-    assert(await getError2Div());
+      .typeText("textarea", "wombat")
+      .click("input[value=\"Complete\"]")
+      .expect(getError2Div.visible).ok()
 
-    await t.typeText("textarea", " survey").click("input[value=\"Complete\"]");
+      .typeText("textarea", " survey")
+      .click("input[value=\"Complete\"]");
 
-    surveyResult = await getSurveyResult();
+    const surveyResult = await getSurveyResult();
     await t.expect(surveyResult).eql({ memo: "wombat survey" });
   });
 });

From e0d3fe3909eb350aa98fc8994f6950c959318faa Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 5 Sep 2024 15:14:05 +0300
Subject: [PATCH 25/27] work for textarea component enhancement

---
 packages/survey-vue3-ui/src/Comment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/Comment.vue b/packages/survey-vue3-ui/src/Comment.vue
index 3b2baf7fd2..f3bd2aedfe 100644
--- a/packages/survey-vue3-ui/src/Comment.vue
+++ b/packages/survey-vue3-ui/src/Comment.vue
@@ -8,7 +8,7 @@
   </div>
   <sv-text-area
     ref="root"
-    v-if="!question.isReadOnlyRenderDiv()"
+    v-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
     :model="question.textAreaModel"
   ></sv-text-area>
   <div ref="root" v-else>{{ question.value }}</div>

From 51eae3b36ec93c268420b9e0d8a8811328023a55 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 5 Sep 2024 17:49:22 +0300
Subject: [PATCH 26/27] work for textarea component enhancement

---
 packages/survey-vue3-ui/src/Comment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/Comment.vue b/packages/survey-vue3-ui/src/Comment.vue
index f3bd2aedfe..8bd2732a88 100644
--- a/packages/survey-vue3-ui/src/Comment.vue
+++ b/packages/survey-vue3-ui/src/Comment.vue
@@ -8,7 +8,7 @@
   </div>
   <sv-text-area
     ref="root"
-    v-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
+    v-else-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
     :model="question.textAreaModel"
   ></sv-text-area>
   <div ref="root" v-else>{{ question.value }}</div>

From dbd43b2be89f844ca6d0d6e146ac4d2e0644c0e1 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 9 Sep 2024 15:30:32 +0300
Subject: [PATCH 27/27] work for textarea component enhancement

---
 .../src/components/text-area/text-area.component.ts       | 4 ++++
 packages/survey-core/src/question.ts                      | 4 ----
 packages/survey-core/src/question_baseselect.ts           | 4 ----
 packages/survey-core/src/question_comment.ts              | 8 --------
 packages/survey-react-ui/src/components/text-area.tsx     | 4 ++++
 packages/survey-vue3-ui/src/components/TextArea.vue       | 5 ++++-
 src/knockout/components/text-area/text-area.ts            | 6 +++++-
 src/vue/components/text-area.vue                          | 3 +++
 8 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
index 81284f0dd4..46270fddea 100644
--- a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
+++ b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
@@ -21,6 +21,10 @@ export class TextAreaComponent extends EmbeddedViewContentComponent {
       this.model.setElement(element as HTMLTextAreaElement);
     }
   }
+
+  ngOnDestroy(): void {
+    this.model.dispose();
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-text-area", TextAreaComponent);
\ No newline at end of file
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index 009369b893..dc130d720f 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -2694,10 +2694,6 @@ export class Question extends SurveyElement<Question>
     super.dispose();
     this.resetDependedQuestions();
     this.destroyResizeObserver();
-    if (this.commentTextAreaModel) {
-      this.commentTextAreaModel.dispose();
-      this.commentTextAreaModel = undefined;
-    }
   }
   private resetDependedQuestions(): void {
     for (var i = 0; i < this.dependedQuestions.length; i++) {
diff --git a/packages/survey-core/src/question_baseselect.ts b/packages/survey-core/src/question_baseselect.ts
index 49b6869d5b..55920caab1 100644
--- a/packages/survey-core/src/question_baseselect.ts
+++ b/packages/survey-core/src/question_baseselect.ts
@@ -124,10 +124,6 @@ export class QuestionSelectBase extends Question {
     if (!!q) {
       q.removeDependedQuestion(this);
     }
-    if (this.otherTextAreaModel) {
-      this.otherTextAreaModel.dispose();
-      this.otherTextAreaModel = undefined;
-    }
   }
   protected resetDependedQuestion(): void {
     this.choicesFromQuestion = "";
diff --git a/packages/survey-core/src/question_comment.ts b/packages/survey-core/src/question_comment.ts
index aa8bc1d242..94e65afc8a 100644
--- a/packages/survey-core/src/question_comment.ts
+++ b/packages/survey-core/src/question_comment.ts
@@ -173,14 +173,6 @@ export class QuestionCommentModel extends QuestionTextBase {
   public get className() {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
-
-  public dispose(): void {
-    super.dispose();
-    if (this.textAreaModel) {
-      this.textAreaModel.dispose();
-      this.textAreaModel = undefined;
-    }
-  }
 }
 Serializer.addClass(
   "comment",
diff --git a/packages/survey-react-ui/src/components/text-area.tsx b/packages/survey-react-ui/src/components/text-area.tsx
index 063efc3a54..f0e07fe615 100644
--- a/packages/survey-react-ui/src/components/text-area.tsx
+++ b/packages/survey-react-ui/src/components/text-area.tsx
@@ -48,6 +48,10 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
       />
     );
   }
+
+  componentWillUnmount() {
+    this.viewModel.dispose();
+  }
 }
 
 ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
index 07f251131a..8b8f95817d 100644
--- a/packages/survey-vue3-ui/src/components/TextArea.vue
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -48,7 +48,7 @@
 <script lang="ts" setup>
 import { useBase } from "@/base";
 import type { TextAreaModel } from "survey-core";
-import { computed, onMounted, onUpdated, ref } from "vue";
+import { computed, onMounted, onUpdated, onUnmounted, ref } from "vue";
 
 const props = defineProps<{ model: TextAreaModel }>();
 const contentElement = ref<HTMLTextAreaElement>((null as any) as HTMLTextAreaElement);
@@ -60,4 +60,7 @@ onMounted(() => {
 onUpdated(() => {
   props.model.setElement(contentElement.value);
 });
+onUnmounted(() => {
+  props.model.dispose();
+});
 </script>
diff --git a/src/knockout/components/text-area/text-area.ts b/src/knockout/components/text-area/text-area.ts
index a9a8d5acff..f40688274e 100644
--- a/src/knockout/components/text-area/text-area.ts
+++ b/src/knockout/components/text-area/text-area.ts
@@ -9,7 +9,11 @@ ko.components.register("sv-text-area", {
       const element = componentInfo.element.querySelector && componentInfo.element.querySelector("textarea") || componentInfo.element.nextElementSibling;
       params.setElement(element);
       return {
-        model: params, value: ko.observable(params.getTextValue() || "")
+        model: params,
+        value: ko.observable(params.getTextValue() || ""),
+        dispose: () => {
+          params.dispose();
+        },
       };
     },
   },
diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
index 1e77edbe61..702de06e56 100644
--- a/src/vue/components/text-area.vue
+++ b/src/vue/components/text-area.vue
@@ -66,6 +66,9 @@ export class TextAreaComponent extends BaseVue {
   protected onUpdated() {
     this.model.setElement(this.$refs["contentElement"] as HTMLTextAreaElement);
   }
+  protected beforeDestroy() {
+    this.model.dispose();
+  }
 }
 
 Vue.component("sv-text-area", TextAreaComponent);