Fixed https://surveyjs.answerdesk.io/internal/ticket/details/T375 - U…

…sing onAfterRenderQuestion to update DOM
surveyjs · Jan 16, 2018 · 7533793 · 7533793
1 parent f14ecc4
commit 7533793
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/react/reactpage.tsx b/src/react/reactpage.tsx
@@ -31,12 +31,21 @@ export class SurveyPage extends React.Component<any, any> {
   componentDidMount() {
     this.doAfterRender();
   }
+  componentWillUnmount() {
+    var el: any = this.refs["root"];
+    if (!!el) {
+      el.removeAttribute("data-rendered");
+    }
+  }
   componentDidUpdate(prevProps, prevState) {
     this.doAfterRender();
   }
   private doAfterRender() {
-    var el = this.refs["root"];
-    if (el && this.survey) this.survey.afterRenderPage(el);
+    var el: any = this.refs["root"];
+    if (el && this.survey && el.getAttribute("data-rendered") !== "r") {
+      el.setAttribute("data-rendered", "r");
+      this.survey.afterRenderPage(el);
+    }
   }
   render(): JSX.Element {
     if (this.page == null || this.survey == null || this.creator == null)
@@ -120,8 +129,9 @@ export class SurveyPanel extends React.Component<any, any> {
     this.doAfterRender();
   }
   private doAfterRender() {
-    let el = this.refs["root"];
-    if (el && this.survey) {
+    let el: any = this.refs["root"];
+    if (el && this.survey && el.getAttribute("data-rendered") !== "r") {
+      el.setAttribute("data-rendered", "r");
       this.survey.afterRenderPanel(this.panel, el);
     }
   }
@@ -131,6 +141,10 @@ export class SurveyPanel extends React.Component<any, any> {
         ["isVisible", "renderWidth", "innerIndent", "rightIndent", "state"],
         "react"
       );
+      var el: any = this.refs["root"];
+      if (!!el) {
+        el.removeAttribute("data-rendered");
+      }
     }
   }
   render(): JSX.Element {

diff --git a/src/react/reactquestion.tsx b/src/react/reactquestion.tsx
@@ -78,16 +78,26 @@ export class SurveyQuestion extends React.Component<any, any> {
         ["visibleIndex", "renderWidth", "indent", "rightIndent, isReadOnly"],
         "react"
       );
+      var el: any = this.refs["root"];
+      if (!!el) {
+        el.removeAttribute("data-rendered");
+      }
     }
   }
   componentDidUpdate(prevProps, prevState) {
     this.doAfterRender();
   }
   private doAfterRender() {
     if (this.questionBase) {
-      var el = this.refs["root"];
-      if (el && this.questionBase.survey)
+      var el: any = this.refs["root"];
+      if (
+        el &&
+        this.questionBase.survey &&
+        el.getAttribute("data-rendered") !== "r"
+      ) {
+        el.setAttribute("data-rendered", "r");
         this.questionBase.survey.afterRenderQuestion(this.questionBase, el);
+      }
     }
   }
   render(): JSX.Element {

diff --git a/src/react/reactquestionmatrixdropdown.tsx b/src/react/reactquestionmatrixdropdown.tsx
@@ -151,14 +151,24 @@ export class SurveyQuestionMatrixDropdownCell extends ReactSurveyElement {
         ["visible", "isReadOnly"],
         "react"
       );
+      var el: any = this.refs["cell"];
+      if (!!el) {
+        el.removeAttribute("data-rendered");
+      }
     }
   }
   componentDidUpdate(prevProps, prevState) {
     this.doAfterRender();
   }
   private doAfterRender() {
-    var el = this.refs["cell"];
-    if (el && this.cell && this.cell.question.survey) {
+    var el: any = this.refs["cell"];
+    if (
+      el &&
+      this.cell &&
+      this.cell.question.survey &&
+      el.getAttribute("data-rendered") !== "r"
+    ) {
+      el.setAttribute("data-rendered", "r");
       var options = {
         cell: this.cell,
         cellQuestion: this.cell.question,