Fix choose file doesn't work when survey in shadow dom

src/question_file.ts

@@ -479,9 +479,11 @@ export class QuestionFileModel extends QuestionFileModelBase {
     this.setPropertyValue("maxSize", val);
   }
   public chooseFile(event: MouseEvent): void {
-    if (!DomDocumentHelper.isAvailable()) return;
+    if (!this.rootElement) return;
+
+    const inputElement = this.rootElement.querySelector(`#${this.inputId}`) as HTMLInputElement;
+    if(!inputElement) return;
 
-    const inputElement = DomDocumentHelper.getDocument().getElementById(this.inputId) as HTMLInputElement;
     event.preventDefault();
     event.stopImmediatePropagation();
     if (inputElement) {
@@ -992,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) => {

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,19 +209,19 @@ 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 contentElement: HTMLElement = this.content || this.control;
+      this.questionBase.beforeDestroyQuestionElement(contentElement);
+      if (!!contentElement) {
+        contentElement.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 contentElement = this.content || this.control;
+    if (!!contentElement) {
+      if (contentElement.getAttribute("data-rendered") !== "r") {
+        contentElement.setAttribute("data-rendered", "r");
+        this.questionBase.afterRenderQuestionElement(contentElement);
       }
     }
   }
@@ -274,6 +275,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<

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}

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();
+  });
 });