Use afterRenderQuestionElement to save root content element insteadof…

… afterRender
surveyjs · Jul 28, 2024 · 76cf530 · 76cf530
1 parent 437320a
commit 76cf530
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/src/question_file.ts b/src/question_file.ts
@@ -994,9 +994,11 @@ export class QuestionFileModel extends QuestionFileModelBase {
   // web-based methods
   private rootElement: HTMLElement;
   private canDragDrop(): boolean { return !this.isInputReadOnly && this.currentMode !== "camera" && !this.isPlayingVideo; }
-  afterRender(el: HTMLElement): void {
+  public afterRenderQuestionElement(el: HTMLElement): void {
     this.rootElement = el;
-    super.afterRender(el);
+  }
+  public beforeDestroyQuestionElement(el: HTMLElement): void {
+    this.rootElement = undefined;
   }
   private dragCounter: number = 0;
   onDragEnter = (event: any) => {

diff --git a/src/react/reactquestion_element.tsx b/src/react/reactquestion_element.tsx
@@ -194,6 +194,7 @@ export class ReactSurveyElement extends SurveyElementBase<any, any> {
 
 export class SurveyQuestionElementBase extends SurveyElementBase<any, any> {
   control: HTMLElement;
+  content: HTMLElement;
   constructor(props: any) {
     super(props);
   }
@@ -208,21 +209,25 @@ export class SurveyQuestionElementBase extends SurveyElementBase<any, any> {
   componentWillUnmount() {
     super.componentWillUnmount();
     if (!!this.questionBase) {
-      const el: HTMLElement = this.control;
-      this.questionBase.beforeDestroyQuestionElement(el);
-      if (!!el) {
-        el.removeAttribute("data-rendered");
+      const controlElement: HTMLElement = this.control;
+      const contentElement: HTMLElement = this.content || this.control;
+      this.questionBase.beforeDestroyQuestionElement(contentElement);
+      if (!!controlElement) {
+        controlElement.removeAttribute("data-rendered");
       }
     }
   }
   protected updateDomElement() {
-    const el: HTMLElement = this.control;
-    if (!!el) {
-      if (el.getAttribute("data-rendered") !== "r") {
-        el.setAttribute("data-rendered", "r");
-        this.questionBase.afterRenderQuestionElement(el);
+    const controlElement: HTMLElement = this.control;
+    if (!!controlElement) {
+      if (controlElement.getAttribute("data-rendered") !== "r") {
+        controlElement.setAttribute("data-rendered", "r");
       }
     }
+    const contentElement = this.content || this.control;
+    if (!!contentElement) {
+      this.questionBase.afterRenderQuestionElement(contentElement);
+    }
   }
   protected get questionBase(): Question {
     return this.props.question;
@@ -274,6 +279,11 @@ export class SurveyQuestionElementBase extends SurveyElementBase<any, any> {
       this.control = element;
     }
   }
+  public setContent(element: HTMLElement | null): void {
+    if(!!element) {
+      this.content = element;
+    }
+  }
 }
 
 export class SurveyQuestionUncontrolledElement<

diff --git a/src/react/reactquestion_file.tsx b/src/react/reactquestion_file.tsx
@@ -78,7 +78,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     }
 
     return (
-      <div className={this.question.fileRootCss}>
+      <div className={this.question.fileRootCss} ref={el => (this.setContent(el))}>
         {fileInput}
         <div
           className={this.question.cssClasses.dragArea}

diff --git a/testCafe/questions/file.js b/testCafe/questions/file.js
@@ -259,4 +259,14 @@ frameworks.forEach(framework => {
       .resizeWindow(1920, 1080)
       .expect(fileNavigatorSelector.exists).notOk();
   });
+  test("check file question has correct root element", async t => {
+    const testRootElement = ClientFunction(() => {
+      const rootElement = survey.getAllQuestions()[0].rootElement;
+      return rootElement && rootElement.tagName == "DIV" && rootElement.classList.contains("sd-file");
+    });
+    await t
+      .resizeWindow(1920, 1080)
+      .expect(testRootElement())
+      .ok();
+  });
 });