comment handwriting (#7324)

* 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 * revert be1665a [be1665a] * work for #7252 Other option in checkbox type question taking too much text input when using Handwriting * revert be1665a [be1665a] * work for #7252 rollback OnChange * work for #7252 * work for #7252 --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Nov 14, 2023 · ce1f2a8 · ce1f2a8
1 parent 778082b
commit ce1f2a8
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 44 deletions.
diff --git a/packages/survey-angular-ui/src/comment-other.component.html b/packages/survey-angular-ui/src/comment-other.component.html
@@ -4,7 +4,6 @@
   [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,9 +19,6 @@ 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,7 +4,6 @@
   [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,7 +24,6 @@
         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,7 +22,6 @@
           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); }, compositionupdate: function(s, e) { $data.question.onCompositionUpdateComment(s, e); return true; } }, 
+        event: { input: function(s, e) { $data.question.onCommentInput(s, 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); }, compositionupdate: function(s, e) { $data.question.onCompositionUpdateOtherValue(s, e); return true; } }, 
+        event: { input: function(s, e) { $data.question.onOtherValueInput(s, e); } }, 
         value: $data.question.otherValue, 
         visible: $data.visible,
         disable: $data.question.isInputReadOnly,

diff --git a/src/question.ts b/src/question.ts
@@ -892,15 +892,6 @@ 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
@@ -1274,15 +1274,6 @@ 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
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactSurveyElement, SurveyQuestionUncontrolledElement } from "./reactquestion_element";
-import { QuestionCommentModel } from "survey-core";
+import { QuestionCommentModel, Helpers } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { CharacterCounterComponent } from "./components/character-counter";
 
@@ -54,6 +54,18 @@ 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 || "";
+  }
+  constructor(props: any) {
+    super(props);
+    this.state = { comment: this.getComment() || "" };
+  }
   protected canRender(): boolean {
     return !!this.props.question;
   }
@@ -63,12 +75,12 @@ 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;
   }
+  protected setComment(value: any): void {
+    this.props.question.comment = value;
+  }
   protected getId(): string {
     return this.props.question.commentId;
   }
@@ -80,14 +92,12 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
     let className = this.props.otherCss || this.cssClasses.comment;
     let handleOnChange = (event: any) => {
       this.setState({ comment: event.target.value });
-      this.onCommentChange(event);
+      // https://github.com/surveyjs/survey-library/issues/7252
+      if (!Helpers.isTwoValueEquals(this.getComment(), event.target.value, false, true, false)) {
+        this.setComment(event.target.value);
+      }
     };
-    const questionComment = this.getComment();
-    let stateComment: string = !!this.state ? this.state.comment : undefined;
-    if (stateComment !== undefined && stateComment.trim() !== questionComment) {
-      stateComment = questionComment;
-    }
-    let comment = stateComment !== undefined ? stateComment : questionComment || "";
+    let comment = this.getStateComment();
 
     if (question.isReadOnlyRenderDiv()) {
       return <div>{comment}</div>;
@@ -103,7 +113,6 @@ 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 }}
@@ -118,12 +127,12 @@ 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;
   }
+  protected setComment(value: any): void {
+    this.props.question.otherValue = value;
+  }
   protected getId(): string {
     return this.props.question.otherId;
   }

diff --git a/src/vue/question-comment.vue b/src/vue/question-comment.vue
@@ -13,7 +13,6 @@
       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,7 +14,6 @@
       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>