Other option in checkbox type question taking too much text input whe…

…n 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>
surveyjs · Nov 8, 2023 · 0380dca · 0380dca
1 parent 87f3252
commit 0380dca
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>