From 437320a566b2a61ee12e880876d039929d22bc09 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Sun, 28 Jul 2024 16:29:02 +0400 Subject: [PATCH 1/3] Revert "Merge pull request #8620 from surveyjs/revert-8611-bug/choose-file-shadow-dom" This reverts commit 1ff61f8d5dd630cdf2cd7ace4274d2cad820fdea, reversing changes made to 9851c4de392bcba58638a161bb743ea997df3c6a. --- src/question_file.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/question_file.ts b/src/question_file.ts index 6bb78ad6e3..6778c15e89 100644 --- a/src/question_file.ts +++ b/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) { From 76cf530f8d5c1987bfccd747bc237c35b05c9b2a Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Sun, 28 Jul 2024 16:30:11 +0400 Subject: [PATCH 2/3] 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 { 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 From 5d799277a47d32728704959e895fb43b58176a11 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Sun, 28 Jul 2024 20:43:23 +0400 Subject: [PATCH 3/3] Fix f tests --- src/react/reactquestion_element.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/react/reactquestion_element.tsx b/src/react/reactquestion_element.tsx index 2f969e7336..ec104d2c03 100644 --- a/src/react/reactquestion_element.tsx +++ b/src/react/reactquestion_element.tsx @@ -209,24 +209,20 @@ export class SurveyQuestionElementBase extends SurveyElementBase { componentWillUnmount() { super.componentWillUnmount(); if (!!this.questionBase) { - const controlElement: HTMLElement = this.control; const contentElement: HTMLElement = this.content || this.control; this.questionBase.beforeDestroyQuestionElement(contentElement); - if (!!controlElement) { - controlElement.removeAttribute("data-rendered"); + if (!!contentElement) { + contentElement.removeAttribute("data-rendered"); } } } protected updateDomElement() { - 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); + if (contentElement.getAttribute("data-rendered") !== "r") { + contentElement.setAttribute("data-rendered", "r"); + this.questionBase.afterRenderQuestionElement(contentElement); + } } } protected get questionBase(): Question {