From 76cf530f8d5c1987bfccd747bc237c35b05c9b2a Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 28 Jul 2024 16:30:11 +0400
Subject: [PATCH] Use afterRenderQuestionElement to save root content element
 insteadof afterRender

---
 src/question_file.ts                |  6 ++++--
 src/react/reactquestion_element.tsx | 28 +++++++++++++++++++---------
 src/react/reactquestion_file.tsx    |  2 +-
 testCafe/questions/file.js          | 10 ++++++++++
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/question_file.ts b/src/question_file.ts
index 6778c15e89..f7e5c54869 100644
--- 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
index 461aaeaadf..2f969e7336 100644
--- 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
index d009ceb883..0729461fce 100644
--- 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
index 6dbd79d4c5..4b3b20c37d 100644
--- 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();
+  });
 });
\ No newline at end of file