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 { export class SurveyQuestionElementBase extends SurveyElementBase { control: HTMLElement; + content: HTMLElement; constructor(props: any) { super(props); } @@ -208,21 +209,25 @@ export class SurveyQuestionElementBase extends SurveyElementBase { 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 { 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 ( -
+
(this.setContent(el))}> {fileInput}
{ .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