Merge pull request #9107 from surveyjs/tsv2013/issue9104

Comment is scrolled on expand the question content

packages/survey-angular-ui/src/components/text-area/text-area.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { Component, ElementRef, Input, OnDestroy, ViewChild } from "@angular/core";
 import { TextAreaModel } from "survey-core";
 import { AngularComponentFactory } from "../../component-factory";
 import { EmbeddedViewContentComponent } from "../../embedded-view-content.component";
@@ -8,7 +8,7 @@ import { EmbeddedViewContentComponent } from "../../embedded-view-content.compon
   templateUrl: "./text-area.component.html",
   styleUrls: ["../../hide-host.scss"]
 })
-export class TextAreaComponent extends EmbeddedViewContentComponent {
+export class TextAreaComponent extends EmbeddedViewContentComponent implements OnDestroy {
   @Input() model!: TextAreaModel;
   @ViewChild("contentElement") elementContentRef!: ElementRef<HTMLElement>;
 
@@ -22,6 +22,9 @@ export class TextAreaComponent extends EmbeddedViewContentComponent {
       this.model.setElement(element as HTMLTextAreaElement);
     }
   }
+  public ngOnDestroy(): void {
+    !!this.model && this.model.dispose();
+  }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-text-area", TextAreaComponent);

packages/survey-core/src/question_comment.ts

@@ -156,7 +156,13 @@ export class QuestionCommentModel extends QuestionTextBase {
     super.setNewValue(newValue);
   }
   protected getValueSeparator(): string { return "\n"; }
-  public get className() {
+  protected notifyStateChanged(prevState: string): void {
+    super.notifyStateChanged(prevState);
+    if (!this.isCollapsed) {
+      this.textAreaModel.updateElement();
+    }
+  }
+  public get className(): string {
     return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
   }
 }

packages/survey-core/src/utils/text-area.ts

@@ -31,7 +31,7 @@ export interface ITextArea {
 export class TextAreaModel {
   private element: HTMLTextAreaElement;
 
-  private updateElement(): void {
+  public updateElement(): void {
     if (this.element && this.autoGrow) {
       setTimeout(() => increaseHeightByContent(this.element), 1);
     }
@@ -54,7 +54,7 @@ export class TextAreaModel {
       this.updateElement();
     }
   }
-  public resetElement() {
+  public resetElement(): void {
     this.element = undefined as any;
   }
 

packages/survey-react-ui/src/components/text-area.tsx

@@ -8,11 +8,13 @@ interface ITextAreaProps {
 }
 
 export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
+  private textareaRef: React.RefObject<HTMLTextAreaElement>;
   private initialValue;
 
   constructor(props: ITextAreaProps) {
     super(props);
     this.initialValue = this.viewModel.getTextValue() || "";
+    this.textareaRef = React.createRef();
   }
   get viewModel(): TextAreaModel {
     return this.props.viewModel;
@@ -21,12 +23,24 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
     return !!this.viewModel.question;
   }
 
+  componentDidMount() {
+    super.componentDidMount();
+    let el = this.textareaRef.current;
+    if (!!el) {
+      this.viewModel.setElement(el);
+    }
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.viewModel.resetElement();
+  }
+
   protected renderElement(): JSX.Element {
     return (
       <textarea
         id={this.viewModel.id}
         className={this.viewModel.className}
-        ref={(textarea) => (this.viewModel.setElement(textarea))}
+        ref={this.textareaRef}
         disabled={this.viewModel.isDisabledAttr}
         readOnly={this.viewModel.isReadOnlyAttr}
         rows={this.viewModel.rows}

visualRegressionTests/tests/defaultV2/question.ts

@@ -683,6 +683,44 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Update comment height", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1500, 900);
+      await initSurvey(framework, {
+        logoPosition: "right",
+        pages: [
+          {
+            name: "puslapis1",
+            validationType: "none",
+            elements: [
+              {
+                type: "comment",
+                name: "klausimas1",
+                state: "collapsed",
+                defaultValueExpression:
+                  "'To enhance experience of designers working with large forms in SurveyJS Creator, with v2.0, we plan to introduce the expand/collapse feature for form pages, panels and elements.To enhance experience of designers working with large forms in SurveyJS Creator, with v2.0, we plan to introduce the expand/collapse feature for form pages, panels and elements.'",
+                readOnly: true,
+                autoGrow: true,
+              },
+            ],
+          },
+        ],
+        widthMode: "static",
+        width: "500px",
+        autosaveMode: "ON_BLUR",
+      });
+
+      await ClientFunction(() => {
+        (window as any).survey.allowResizeComment = false;
+        (window as any).survey.autoGrowComment = true;
+      })();
+      const questionRoot = Selector(".sd-question");
+      await t.click(questionRoot);
+      await t.wait(500);
+      await takeElementScreenshot("question-comment-ajust-height.png", questionRoot, t, comparer);
+    });
+  });
+
   test("Remaining character counter - mobile view", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(350, 900);