From c43b3f8efde30a2caed9177bd809f9d5088e01f1 Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Fri, 26 Jan 2024 18:47:08 +0200
Subject: [PATCH 1/4] Add functional tests and fix knockout issue #7748

---
 src/knockout/templates/comment.html |  4 +-
 testCafe/questions/radiogroup.js    | 69 +++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/knockout/templates/comment.html b/src/knockout/templates/comment.html
index c7a5a84aa0..cafa37b6c2 100644
--- a/src/knockout/templates/comment.html
+++ b/src/knockout/templates/comment.html
@@ -1,7 +1,7 @@
 <script type="text/html" id="survey-comment">
   <!--ko if: !question.isReadOnlyRenderDiv() -->
 <textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), '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(s, e); } }, 
+        event: { input: function(s, e) { $data.question.onCommentInput(e); } }, 
         value: $data.question.comment, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,
@@ -16,7 +16,7 @@
 <script type="text/html" id="survey-other">
   <!--ko if: !question.isReadOnlyRenderDiv() -->
 <textarea data-bind="attr: { id: question.otherId, maxLength: question.getOthersMaxLength(), '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(s, e); } }, 
+        event: { input: function(s, e) { $data.question.onOtherValueInput(e); } }, 
         value: $data.question.otherValue, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,
diff --git a/testCafe/questions/radiogroup.js b/testCafe/questions/radiogroup.js
index ee41c7fa9c..8327a59258 100644
--- a/testCafe/questions/radiogroup.js
+++ b/testCafe/questions/radiogroup.js
@@ -355,4 +355,73 @@ frameworks.forEach(framework => {
     await t
       .expect(Selector(".sv-string-viewer").withText("None").count).eql(1);
   });
+  test("otherItem type in comment, textUpdateMode=onBlur", async t => {
+    const setOnValueChanged = ClientFunction(() => {
+      window["survey"].onValueChanged.add((sender, options) => {
+        if(options.name === "q2") return;
+        const val = sender.getValue("q2");
+        sender.setValue("q2", val + 1);
+      });
+    });
+    const currentJson = {
+      elements: [
+        {
+          type: "radiogroup",
+          showOtherItem: true,
+          name: "q1",
+          choices: [
+            "item1",
+            "item2",
+            "item3"
+          ]
+        },
+        { type: "text", name: "q2", defaultValue: 0, inputType: "number" }
+      ]
+    };
+    await initSurvey(framework, currentJson);
+    await setOnValueChanged();
+
+    await t.click("input[value=other]")
+      .click(Selector("textarea"))
+      .pressKey("A B C D E F tab")
+      .click("input[value=Complete]");
+
+    const surveyResult = await getSurveyResult();
+    assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 2 });
+  });
+  test("otherItem type in comment, textUpdateMode=onTyping", async t => {
+    const setOnValueChanged = ClientFunction(() => {
+      window["survey"].onValueChanged.add((sender, options) => {
+        if(options.name === "q2") return;
+        const val = sender.getValue("q2");
+        sender.setValue("q2", val + 1);
+      });
+    });
+    const currentJson = {
+      textUpdateMode: "onTyping",
+      elements: [
+        {
+          type: "radiogroup",
+          showOtherItem: true,
+          name: "q1",
+          choices: [
+            "item1",
+            "item2",
+            "item3"
+          ]
+        },
+        { type: "text", name: "q2", defaultValue: 0, inputType: "number" }
+      ]
+    };
+    await initSurvey(framework, currentJson);
+    await setOnValueChanged();
+
+    await t.click("input[value=other]")
+      .click(Selector("textarea"))
+      .pressKey("A B C D E F tab")
+      .click("input[value=Complete]");
+
+    const surveyResult = await getSurveyResult();
+    assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 7 });
+  });
 });
\ No newline at end of file

From 68e2f208298b444f9664dcf10ee296c146c723f8 Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Sat, 27 Jan 2024 10:59:55 +0200
Subject: [PATCH 2/4] Refactor and fix question comment/other rendering in
 react #7748

---
 src/react/reactquestion_comment.tsx | 52 +++++++++-------
 testCafe/questions/radiogroup.js    | 94 +++++++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 23 deletions(-)

diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index b493b918cd..ebd5cc7516 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -9,8 +9,8 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
     super(props);
   }
   protected renderElement(): JSX.Element {
-    var onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
-    var onInput = (event: any) => {
+    const onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
+    const onInput = (event: any) => {
       if (this.question.isInputTextUpdate) {
         this.updateValueOnEvent(event);
       } else {
@@ -54,18 +54,33 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
 }
 
 export class SurveyQuestionCommentItem extends ReactSurveyElement {
-  private getStateComment() {
-    const comment = this.getComment();
-    let stateComment: string = this.state.comment;
-    if (stateComment !== undefined && stateComment.trim() !== comment) {
-      stateComment = comment;
-    }
-    return stateComment !== undefined ? stateComment : comment || "";
-  }
+  private control: HTMLElement;
   constructor(props: any) {
     super(props);
     this.state = { comment: this.getComment() || "" };
   }
+  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.getComment() || "";
+      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.props.question;
   }
@@ -88,30 +103,21 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
     return this.props.question.renderedCommentPlaceholder;
   }
   protected renderElement(): JSX.Element {
-    let question = this.props.question;
+    const question = this.props.question;
     let className = this.props.otherCss || this.cssClasses.comment;
-    let handleOnChange = (event: any) => {
-      this.setState({ comment: event.target.value });
-      // https://github.com/surveyjs/survey-library/issues/7252
-      if (!Helpers.isTwoValueEquals(this.getComment(), event.target.value, false, true, false)) {
-        this.setComment(event.target.value);
-      }
-    };
-    let comment = this.getStateComment();
-
     if (question.isReadOnlyRenderDiv()) {
+      const comment = this.getComment() || "";
       return <div>{comment}</div>;
     }
     return (
       <textarea
         id={this.getId()}
         className={className}
-        value={comment}
+        ref={(textarea) => (this.setControl(textarea))}
         disabled={this.isDisplayMode}
         maxLength={question.getOthersMaxLength()}
         placeholder={this.getPlaceholder()}
-        onChange={handleOnChange}
-        onBlur={(e) => { this.onCommentChange(e); handleOnChange(e); }}
+        onBlur={(e) => { this.onCommentChange(e); }}
         onInput={(e) => this.onCommentInput(e)}
         aria-required={question.isRequired || question.a11y_input_ariaRequired}
         aria-label={question.ariaLabel || question.a11y_input_ariaLabel}
diff --git a/testCafe/questions/radiogroup.js b/testCafe/questions/radiogroup.js
index 8327a59258..d068bdaa03 100644
--- a/testCafe/questions/radiogroup.js
+++ b/testCafe/questions/radiogroup.js
@@ -424,4 +424,98 @@ frameworks.forEach(framework => {
     const surveyResult = await getSurveyResult();
     assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 7 });
   });
+  test("Type in comment, textUpdateMode=onBlur", async t => {
+    const setOnValueChanged = ClientFunction(() => {
+      window["survey"].onValueChanged.add((sender, options) => {
+        if(options.name === "q2") return;
+        const val = sender.getValue("q2");
+        sender.setValue("q2", val + 1);
+      });
+    });
+    const currentJson = {
+      elements: [
+        {
+          type: "radiogroup",
+          showCommentArea: true,
+          name: "q1",
+          choices: [
+            "item1",
+            "item2",
+            "item3"
+          ]
+        },
+        { type: "text", name: "q2", defaultValue: 0, inputType: "number" }
+      ]
+    };
+    await initSurvey(framework, currentJson);
+    await setOnValueChanged();
+
+    await t.click(Selector("textarea"))
+      .pressKey("A B C D E F tab")
+      .click("input[value=Complete]");
+
+    const surveyResult = await getSurveyResult();
+    assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 1 });
+  });
+  test("Type in comment, textUpdateMode=onTyping", async t => {
+    const setOnValueChanged = ClientFunction(() => {
+      window["survey"].onValueChanged.add((sender, options) => {
+        if(options.name === "q2") return;
+        const val = sender.getValue("q2");
+        sender.setValue("q2", val + 1);
+      });
+    });
+    const currentJson = {
+      textUpdateMode: "onTyping",
+      elements: [
+        {
+          type: "radiogroup",
+          showCommentArea: true,
+          name: "q1",
+          choices: [
+            "item1",
+            "item2",
+            "item3"
+          ]
+        },
+        { type: "text", name: "q2", defaultValue: 0, inputType: "number" }
+      ]
+    };
+    await initSurvey(framework, currentJson);
+    await setOnValueChanged();
+
+    await t.click(Selector("textarea"))
+      .pressKey("A B C D E F tab")
+      .click("input[value=Complete]");
+
+    const surveyResult = await getSurveyResult();
+    assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 6 });
+  });
+  test("Initial value in question comment", async t => {
+    const setCommentValue = ClientFunction(() => {
+      window["survey"].setComment("q1", "ABC");
+    });
+    const currentJson = {
+      elements: [
+        {
+          type: "radiogroup",
+          showCommentArea: true,
+          name: "q1",
+          choices: [
+            "item1",
+            "item2",
+            "item3"
+          ]
+        }
+      ]
+    };
+    await initSurvey(framework, currentJson);
+    await setCommentValue();
+
+    await t.click("input[value=item2]")
+      .click("input[value=Complete]");
+
+    const surveyResult = await getSurveyResult();
+    assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABC" });
+  });
 });
\ No newline at end of file

From 683e8f0822311ac78e3179d85e147b3fe5288bca Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Mon, 29 Jan 2024 09:59:10 +0200
Subject: [PATCH 3/4] Make a functional test better (add checks) #7748

---
 testCafe/questions/radiogroup.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/testCafe/questions/radiogroup.js b/testCafe/questions/radiogroup.js
index d068bdaa03..fff1aa57e0 100644
--- a/testCafe/questions/radiogroup.js
+++ b/testCafe/questions/radiogroup.js
@@ -513,6 +513,8 @@ frameworks.forEach(framework => {
     await setCommentValue();
 
     await t.click("input[value=item2]")
+      .click(Selector("textarea"))
+      .pressKey("end D E F")
       .click("input[value=Complete]");
 
     const surveyResult = await getSurveyResult();

From 96b60d31d572fe8482bed35a6378a1c38bb6a80b Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Mon, 29 Jan 2024 10:42:30 +0200
Subject: [PATCH 4/4] Fix functional test #7748

---
 testCafe/questions/radiogroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/testCafe/questions/radiogroup.js b/testCafe/questions/radiogroup.js
index fff1aa57e0..0b63b72bc9 100644
--- a/testCafe/questions/radiogroup.js
+++ b/testCafe/questions/radiogroup.js
@@ -518,6 +518,6 @@ frameworks.forEach(framework => {
       .click("input[value=Complete]");
 
     const surveyResult = await getSurveyResult();
-    assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABC" });
+    assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABCDEF" });
   });
 });
\ No newline at end of file