From 0380dca9f5d3be8108fce52ce73befc923e85a23 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.developer@gmail.com>
Date: Wed, 8 Nov 2023 14:53:16 +0300
Subject: [PATCH] Other option in checkbox type question taking too much text
 input when using Handwriting (#7302)

* work for #7252 Other option in checkbox type question taking too much text input when using Handwriting

* work for #7252 fix angular build

* work for #7252 fix angular build

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
---
 .../survey-angular-ui/src/comment-other.component.html   | 1 +
 .../survey-angular-ui/src/comment-other.component.ts     | 3 +++
 packages/survey-angular-ui/src/comment.component.html    | 1 +
 packages/survey-vue3-ui/src/QuestionComment.vue          | 1 +
 packages/survey-vue3-ui/src/QuestionOther.vue            | 1 +
 src/knockout/templates/comment.html                      | 4 ++--
 src/question.ts                                          | 9 +++++++++
 src/question_baseselect.ts                               | 9 +++++++++
 src/react/reactquestion_comment.tsx                      | 7 +++++++
 src/vue/question-comment.vue                             | 1 +
 src/vue/question-other.vue                               | 1 +
 11 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/survey-angular-ui/src/comment-other.component.html b/packages/survey-angular-ui/src/comment-other.component.html
index d51b57c735..73485a78a1 100644
--- a/packages/survey-angular-ui/src/comment-other.component.html
+++ b/packages/survey-angular-ui/src/comment-other.component.html
@@ -4,6 +4,7 @@
   [disabled]="question.isInputReadOnly"
   (change)="onOtherValueChange($event)"
   (input)="onOtherValueInput($event)"
+  (compositionupdate)="onCompositionUpdateOtherValue($event)"
   [class]="question.cssClasses.other">
 </textarea>
 <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..75fa277396 100644
--- a/packages/survey-angular-ui/src/comment-other.component.ts
+++ b/packages/survey-angular-ui/src/comment-other.component.ts
@@ -19,6 +19,9 @@ export class SurveyCommentOtherComponent {
   public onOtherValueInput(event: any): void {
     (<QuestionSelectBase>this.question).onOtherValueInput(event);
   }
+  public onCompositionUpdateOtherValue(event: any): void {
+    (<QuestionSelectBase>this.question).onCompositionUpdateOtherValue(event);
+  }
   public get otherId(): string {
     return (<QuestionSelectBase>this.question).otherId;
   }
diff --git a/packages/survey-angular-ui/src/comment.component.html b/packages/survey-angular-ui/src/comment.component.html
index c3f4422d52..35bfccaeb0 100644
--- a/packages/survey-angular-ui/src/comment.component.html
+++ b/packages/survey-angular-ui/src/comment.component.html
@@ -4,6 +4,7 @@
   [disabled]="question.isInputReadOnly"
   (change)="question.onCommentChange($event)"
   (input)="question.onCommentInput($event)"
+  (compositionupdate)="question.onCompositionUpdateComment($event)"
   [class]="question.cssClasses.other">
 </textarea>
 <div *ngIf="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
diff --git a/packages/survey-vue3-ui/src/QuestionComment.vue b/packages/survey-vue3-ui/src/QuestionComment.vue
index 927e204b12..1fe21061be 100644
--- a/packages/survey-vue3-ui/src/QuestionComment.vue
+++ b/packages/survey-vue3-ui/src/QuestionComment.vue
@@ -24,6 +24,7 @@
         question.onCommentInput(e);
       }
     "
+    @composition-update="(e) => { question.onCompositionUpdateComment(e); }"
   />
 </template>
 
diff --git a/packages/survey-vue3-ui/src/QuestionOther.vue b/packages/survey-vue3-ui/src/QuestionOther.vue
index 833555256d..8980bb8e40 100644
--- a/packages/survey-vue3-ui/src/QuestionOther.vue
+++ b/packages/survey-vue3-ui/src/QuestionOther.vue
@@ -22,6 +22,7 @@
           question.onOtherValueInput(e);
         }
       "
+      @composition-update="(e) => { question.onCompositionUpdateOtherValue(e); }"
     />
     <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
   </div>
diff --git a/src/knockout/templates/comment.html b/src/knockout/templates/comment.html
index c7a5a84aa0..d5adb25d91 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(s, e); }, compositionupdate: function(s, e) { $data.question.onCompositionUpdateComment(s, e); return true; } }, 
         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(s, e); }, compositionupdate: function(s, e) { $data.question.onCompositionUpdateOtherValue(s, e); return true; } }, 
         value: $data.question.otherValue, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,
diff --git a/src/question.ts b/src/question.ts
index b601589c27..f1f6c9624e 100644
--- a/src/question.ts
+++ b/src/question.ts
@@ -894,6 +894,15 @@ export class Question extends SurveyElement<Question>
       this.updateCommentElements();
     }
   }
+  public onCompositionUpdateComment(event: any): void {
+    if(this.isInputTextUpdate) {
+      setTimeout(() => {
+        if (event.target) {
+          this.comment = event.target.value;
+        }
+      }, 1);
+    }
+  }
   public onCommentChange(event: any): void {
     this.comment = event.target.value;
     if (this.comment !== event.target.value) {
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
index d7934484aa..aa9fd88343 100644
--- a/src/question_baseselect.ts
+++ b/src/question_baseselect.ts
@@ -1257,6 +1257,15 @@ export class QuestionSelectBase extends Question {
       this.updateCommentElements();
     }
   }
+  public onCompositionUpdateOtherValue(event: any): void {
+    if(this.isInputTextUpdate) {
+      setTimeout(() => {
+        if (event.target) {
+          this.otherValue = event.target.value;
+        }
+      }, 1);
+    }
+  }
   public onOtherValueChange(event: any): void {
     this.otherValue = event.target.value;
     if (this.otherValue !== event.target.value) {
diff --git a/src/react/reactquestion_comment.tsx b/src/react/reactquestion_comment.tsx
index cf94ff8a10..6469db7fae 100644
--- a/src/react/reactquestion_comment.tsx
+++ b/src/react/reactquestion_comment.tsx
@@ -63,6 +63,9 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
   protected onCommentInput(event: any): void {
     this.props.question.onCommentInput(event);
   }
+  protected onCommentCompositionUpdate(event: any): void {
+    this.props.question.onCompositionUpdateComment(event);
+  }
   protected getComment(): string {
     return this.props.question.comment;
   }
@@ -100,6 +103,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
         onChange={handleOnChange}
         onBlur={(e) => { this.onCommentChange(e); handleOnChange(e); }}
         onInput={(e) => this.onCommentInput(e)}
+        onCompositionUpdate={(e) => this.onCommentCompositionUpdate(e)}
         aria-required={question.isRequired || question.a11y_input_ariaRequired}
         aria-label={question.ariaLabel || question.a11y_input_ariaLabel}
         style={{ resize: question.resizeStyle }}
@@ -114,6 +118,9 @@ export class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
   protected onCommentInput(event: any): void {
     this.props.question.onOtherValueInput(event);
   }
+  protected onCommentCompositionUpdate(event: any): void {
+    this.props.question.onCompositionUpdateOtherValue(event);
+  }
   protected getComment(): string {
     return this.props.question.otherValue;
   }
diff --git a/src/vue/question-comment.vue b/src/vue/question-comment.vue
index 086897ab30..c5a6a3f05a 100644
--- a/src/vue/question-comment.vue
+++ b/src/vue/question-comment.vue
@@ -13,6 +13,7 @@
       v-bind:style="{ resize: question.resizeStyle }"
       @change="(e) => { question.onCommentChange(e) }"
       @input="(e) => { question.onCommentInput(e) }"
+      @composition-update="(e) => { question.onCompositionUpdateComment(e); }"
     />
 </template>
 
diff --git a/src/vue/question-other.vue b/src/vue/question-other.vue
index 4498844476..ccea53316e 100644
--- a/src/vue/question-other.vue
+++ b/src/vue/question-other.vue
@@ -14,6 +14,7 @@
       v-bind:style="{ resize: question.resizeStyle }"
       @change="(e) => { question.onOtherValueChange(e) }"
       @input="(e) => { question.onOtherValueInput(e) }"
+      @composition-update="(e) => { question.onCompositionUpdateOtherValue(e); }"
     /><div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
   </div>
 </template>