commentPlaceholder property is not reactive fix #6797

packages/survey-angular-ui/src/comment.component.html

@@ -1,4 +1,4 @@
-<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="question.commentId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired" [attr.aria-label]="question.ariaLabel" [attr.placeholder]="question.commentPlaceholder" 
+<textarea *ngIf="!question.isReadOnlyRenderDiv()" [id]="question.commentId" [attr.maxlength]="question.getOthersMaxLength()"  [attr.aria-required]="question.ariaRequired" [attr.aria-label]="question.ariaLabel" [attr.placeholder]="question.renderedCommentPlaceholder" 
   [value]="comment"
   [style.resize]="question.resizeStyle"
   [disabled]="question.isInputReadOnly"

packages/survey-vue3-ui/src/QuestionComment.vue

@@ -10,7 +10,7 @@
     :class="question.cssClasses.other || commentClass"
     :value="question.comment"
     :maxlength="question.getOthersMaxLength()"
-    :placeholder="question.commentPlaceholder"
+    :placeholder="question.renderedCommentPlaceholder"
     :aria-label="question.ariaLabel"
     :aria-required="question.ariaRequired"
     v-bind:style="{ resize: question.resizeStyle }"

src/knockout/templates/comment.html

@@ -1,6 +1,6 @@
 <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, 'aria-label': question.ariaLabel, placeholder: question.commentPlaceholder }, 
+<textarea data-bind="attr: { id: question.commentId, maxLength: question.getOthersMaxLength(), 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, placeholder: question.renderedCommentPlaceholder }, 
         event: { input: function(s, e) { $data.question.onCommentInput(s, e); } }, 
         value: $data.question.comment, 
         visible: $data.visible,

src/question.ts

@@ -464,6 +464,7 @@ export class Question extends SurveyElement<Question>
     if (isLight !== true) {
       this.runConditions();
     }
+    this.calcRenderedCommentPlaceholder();
   }
   /**
    * Returns a survey element (panel or page) that contains the question and allows you to move this question to a different survey element.
@@ -685,14 +686,21 @@ export class Question extends SurveyElement<Question>
    * @see comment
    * @see commentText
    */
-  @property({ localizable: true }) commentPlaceholder: string;
+  @property({ localizable: true, onSet: (val, target) => target.calcRenderedCommentPlaceholder() }) commentPlaceholder: string;
 
   public get commentPlaceHolder(): string {
     return this.commentPlaceholder;
   }
   public set commentPlaceHolder(newValue: string) {
     this.commentPlaceholder = newValue;
   }
+  public get renderedCommentPlaceholder(): string {
+    return this.getPropertyValue("renderedCommentPlaceholder");
+  }
+  private calcRenderedCommentPlaceholder() {
+    const res = !this.isReadOnly ? this.commentPlaceHolder : undefined;
+    this.setPropertyValue("renderedCommentPlaceholder", res);
+  }
   public getAllErrors(): Array<SurveyError> {
     return this.errors.slice();
   }
@@ -712,8 +720,9 @@ export class Question extends SurveyElement<Question>
   public updateCustomWidget(): void {
     this.customWidgetValue = CustomWidgetCollection.Instance.getCustomWidget(this);
   }
-  public localeChanged() {
+  public localeChanged(): void {
     super.localeChanged();
+    this.calcRenderedCommentPlaceholder();
     if (!!this.localeChangedCallback) {
       this.localeChangedCallback();
     }
@@ -1195,6 +1204,7 @@ export class Question extends SurveyElement<Question>
     this.setPropertyValue("isInputReadOnly", this.isInputReadOnly);
     super.onReadOnlyChanged();
     this.updateQuestionCss();
+    this.calcRenderedCommentPlaceholder();
   }
   /**
    * A Boolean expression. If it evaluates to `false`, this question becomes read-only.
@@ -1254,6 +1264,7 @@ export class Question extends SurveyElement<Question>
     if (this.isEmpty()) {
       this.initDataFromSurvey();
     }
+    this.calcRenderedCommentPlaceholder();
     this.onIndentChanged();
   }
   protected onSetData(): void {

src/question_text.ts

@@ -395,7 +395,7 @@ export class QuestionTextModel extends QuestionTextBase {
     }
     return newValue;
   }
-  protected hasPlaceHolder(): boolean {
+  protected hasPlaceholder(): boolean {
     return !this.isReadOnly && this.inputType !== "range";
   }
   public isReadOnlyRenderDiv(): boolean {

src/question_textbase.ts

@@ -83,18 +83,18 @@ export class QuestionTextBase extends Question {
   public get renderedPlaceholder(): string {
     return this.getPropertyValue("renderedPlaceholder");
   }
-  protected setRenderedPlaceholder(val: string) {
+  protected setRenderedPlaceholder(val: string): void {
     this.setPropertyValue("renderedPlaceholder", val);
   }
-  protected onReadOnlyChanged() {
+  protected onReadOnlyChanged(): void {
     super.onReadOnlyChanged();
     this.calcRenderedPlaceholder();
   }
   public onSurveyLoad(): void {
     this.calcRenderedPlaceholder();
     super.onSurveyLoad();
   }
-  public localeChanged() {
+  public localeChanged(): void {
     super.localeChanged();
     this.calcRenderedPlaceholder();
   }
@@ -104,12 +104,12 @@ export class QuestionTextBase extends Question {
   }
   protected calcRenderedPlaceholder() {
     let res = this.placeHolder;
-    if(!!res && !this.hasPlaceHolder()) {
+    if(!!res && !this.hasPlaceholder()) {
       res = undefined;
     }
     this.setRenderedPlaceholder(res);
   }
-  protected hasPlaceHolder(): boolean {
+  protected hasPlaceholder(): boolean {
     return !this.isReadOnly;
   }
   protected setNewValue(newValue: any): void {

src/react/reactquestion_comment.tsx

@@ -70,7 +70,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
     return this.props.question.commentId;
   }
   protected getPlaceholder(): string {
-    return this.props.question.commentPlaceholder;
+    return this.props.question.renderedCommentPlaceholder;
   }
   protected renderElement(): JSX.Element {
     let question = this.props.question;

src/vue/question-comment.vue

@@ -7,7 +7,7 @@
       :class="question.cssClasses.other || commentClass"
       :value="question.comment"
       :maxlength="question.getOthersMaxLength()"
-      :placeholder="question.commentPlaceholder"
+      :placeholder="question.renderedCommentPlaceholder"
       :aria-label="question.ariaLabel"
       :aria-required="question.ariaRequired"
       v-bind:style="{ resize: question.resizeStyle }"

tests/surveyquestiontests.ts

@@ -7091,6 +7091,32 @@ QUnit.test("Try to set incorrect values, bug#6629", function (assert) {
   assert.deepEqual(q6.value, ["f"], "Convert to array");
   ConsoleWarnings.inCorrectQuestionValue = oldFunc;
 });
+QUnit.test("Update on changing commentPlaceholder UI immediately, bug#6797", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "file",
+        name: "q1",
+        showCommentArea: true,
+        commentPlaceholder: {
+          default: "abc",
+          de: "abc-de"
+        }
+      }
+    ] });
+  const q1 = survey.getQuestionByName("q1");
+  assert.equal(q1.renderedCommentPlaceholder, "abc", "Loaded from survey");
+  q1.readOnly = true;
+  assert.notOk(q1.renderedCommentPlaceholder, "Do not show when read-only");
+  q1.commentPlaceholder = "edf";
+  assert.notOk(q1.renderedCommentPlaceholder, "Do not show when read-only, #2");
+  q1.readOnly = false;
+  assert.equal(q1.renderedCommentPlaceholder, "edf", "question is not read-only");
+  q1.commentPlaceholder = "abcd";
+  assert.equal(q1.renderedCommentPlaceholder, "abcd", "comment placeholder is changed");
+  survey.locale = "de";
+  assert.equal(q1.renderedCommentPlaceholder, "abc-de", "locale is changed");
+});
 QUnit.test("Dynamic error text in expression validator, bug#6790", function (assert) {
   const survey = new SurveyModel({
     checkErrorsMode: "onValueChanged",
@@ -7130,5 +7156,4 @@ QUnit.test("Dynamic error text in expression validator, bug#6790", function (ass
   assert.equal(error.locText.renderedHtml, "80% left.", "Old error text is correct, #2");
   assert.strictEqual(error, q2.errors[0], "Same errors");
   assert.equal(errorTextChangedCounter, 1, "text has been updated");
-});
-
+});