Merge pull request #8922 from surveyjs/bug/react18-strict-mode

React18 strict mode
surveyjs · Oct 11, 2024 · ef4425c · ef4425c
2 parents 1349014 + 4e23a91
commit ef4425c
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 58 deletions.
diff --git a/accessibilityTests/helper.ts b/accessibilityTests/helper.ts
@@ -55,13 +55,14 @@ export const initSurvey = ClientFunction(
       document.getElementById("surveyElement").innerHTML = "";
       model.render("surveyElement");
     } else if (framework === "react") {
-      document.getElementById("surveyElement").innerHTML = "";
-      window["ReactDOM"].render(
-        window["React"].createElement(window["SurveyReact"].Survey, {
-          model: model,
-          onComplete: surveyComplete,
-        }),
-        document.getElementById("surveyElement")
+      if(!!(window as any).root) {
+        (window as any).root.unmount();
+      }
+      const root = (window as any).ReactDOM.createRoot(document.getElementById("surveyElement"));
+      window["root"] = root;
+      root.render(
+        (window as any).React.createElement((window as any).React.StrictMode,
+          { children: (window as any).React.createElement((window as any).SurveyReact.Survey, { model: model, onComplete: surveyComplete }) }),
       );
     } else if (framework === "vue") {
       document.getElementById("surveyElement").innerHTML =

diff --git a/examples_test/bootstrap/react.html b/examples_test/bootstrap/react.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"/>
     <!-- <link rel="stylesheet" href="../../build/survey-core/survey.min.css" /> -->
     <!-- <link rel="stylesheet" href="../../build/survey-core/modern.min.css" /> -->

diff --git a/examples_test/default/react.html b/examples_test/default/react.html
@@ -3,8 +3,8 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
     <link rel="stylesheet" href="../../build/survey-core/survey.min.css" />
     <!-- <link rel="stylesheet" href="../../build/survey-core/modern.min.css" /> -->
     <!-- <link rel="stylesheet" href="../../build/survey-core/defaultV2.min.css" /> -->

diff --git a/examples_test/defaultV2/react.html b/examples_test/defaultV2/react.html
@@ -4,8 +4,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
-    <script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
     <!-- <link rel="stylesheet" href="../../build/survey-core/survey.min.css" /> -->
     <!-- <link rel="stylesheet" href="../../build/survey-core/modern.min.css" /> -->
     <link rel="stylesheet" href="../../build/survey-core/defaultV2.min.css" />

diff --git a/examples_test/modern/react.html b/examples_test/modern/react.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
     <!-- <link rel="stylesheet" href="../../build/survey-core/survey.min.css" /> -->
     <link rel="stylesheet" href="../../build/survey-core/modern.min.css" />
     <!-- <link rel="stylesheet" href="../../build/survey-core/defaultV2.min.css" /> -->

diff --git a/packages/survey-angular-ui/src/components/text-area/text-area.component.ts b/packages/survey-angular-ui/src/components/text-area/text-area.component.ts
@@ -22,10 +22,6 @@ export class TextAreaComponent extends EmbeddedViewContentComponent {
       this.model.setElement(element as HTMLTextAreaElement);
     }
   }
-
-  ngOnDestroy(): void {
-    this.model.dispose();
-  }
 }
 
 AngularComponentFactory.Instance.registerComponent("sv-text-area", TextAreaComponent);
diff --git a/packages/survey-react-ui/src/components/action-bar/action-bar-item-dropdown.tsx b/packages/survey-react-ui/src/components/action-bar/action-bar-item-dropdown.tsx
@@ -8,7 +8,6 @@ export class SurveyActionBarItemDropdown extends SurveyActionBarItem {
   private viewModel: ActionDropdownViewModel;
   constructor(props: any) {
     super(props);
-    this.viewModel = new ActionDropdownViewModel(this.item);
   }
   renderInnerButton() {
     const button = super.renderInnerButton();
@@ -19,6 +18,9 @@ export class SurveyActionBarItemDropdown extends SurveyActionBarItem {
       </>
     );
   }
+  componentDidMount(): void {
+    this.viewModel = new ActionDropdownViewModel(this.item);
+  }
   componentWillUnmount(): void {
     super.componentWillUnmount();
     this.viewModel.dispose();

diff --git a/packages/survey-react-ui/src/components/popup/popup.tsx b/packages/survey-react-ui/src/components/popup/popup.tsx
@@ -170,6 +170,12 @@ export class PopupContainer extends SurveyElementBase<any, any> {
       </div>
     );
   }
+  componentDidMount(): void {
+    super.componentDidMount();
+    if(this.model.isVisible) {
+      this.model.updateOnShowing();
+    }
+  }
 }
 export class PopupDropdownContainer extends PopupContainer {
 
@@ -219,13 +225,24 @@ export function showDialog(dialogOptions: IDialogOptions, rootElement?: HTMLElem
     options: { isVisible: boolean }
   ) => {
     if (!options.isVisible) {
-      ReactDOM.unmountComponentAtNode(popupViewModel.container);
+      if(typeof (ReactDOM as any).createRoot == "function") {
+        if(!!root) {
+          root.unmount();
+        }
+      } else {
+        ReactDOM.unmountComponentAtNode(popupViewModel.container);
+      }
       popupViewModel.dispose();
     }
   };
   popupViewModel.onVisibilityChanged.add(onVisibilityChangedCallback);
-
-  ReactDOM.render(<PopupContainer model={popupViewModel} />, popupViewModel.container);
+  let root: any;
+  if(typeof (ReactDOM as any).createRoot == "function") {
+    root = (ReactDOM as any).createRoot(popupViewModel.container);
+    root.render(<PopupContainer model={popupViewModel} />);
+  } else {
+    ReactDOM.render(<PopupContainer model={popupViewModel} />, popupViewModel.container);
+  }
   popupViewModel.model.isVisible = true;
 
   return popupViewModel;

diff --git a/packages/survey-react-ui/src/components/text-area.tsx b/packages/survey-react-ui/src/components/text-area.tsx
@@ -48,10 +48,6 @@ export class TextAreaComponent extends SurveyElementBase<ITextAreaProps, any> {
       />
     );
   }
-
-  componentWillUnmount() {
-    this.viewModel.dispose();
-  }
 }
 
 ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {

diff --git a/packages/survey-react-ui/src/dropdown-item.tsx b/packages/survey-react-ui/src/dropdown-item.tsx
@@ -12,6 +12,10 @@ export class SurveyQuestionOptionItem extends ReactSurveyElement {
     super.componentDidUpdate(prevProps, prevState);
     this.setupModel();
   }
+  componentDidMount(): void {
+    super.componentDidMount();
+    this.setupModel();
+  }
   componentWillUnmount(): void {
     super.componentWillUnmount();
     if (!!this.item) {

diff --git a/packages/survey-react-ui/src/reactSurvey.tsx b/packages/survey-react-ui/src/reactSurvey.tsx
@@ -44,6 +44,7 @@ export class Survey extends SurveyElementBase<any, any>
       const el = this.rootRef.current;
       if (!!el) this.survey.afterRenderSurvey(el);
       this.survey.startTimerFromUI();
+      this.setSurveyEvents();
     }
   }
   shouldComponentUpdate(nextProps: any, nextState: any) {
@@ -223,7 +224,6 @@ export class Survey extends SurveyElementBase<any, any>
     if (!!newProps.css) {
       this.survey.css = this.css;
     }
-    this.setSurveyEvents();
   }
   private isModelJSONChanged(newProps: any): boolean {
     if (!!newProps["model"]) {

diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -61,7 +61,4 @@ onMounted(() => {
 onUpdated(() => {
   props.model.setElement(contentElement.value);
 });
-onUnmounted(() => {
-  props.model.dispose();
-});
 </script>
diff --git a/src/knockout/components/text-area/text-area.ts b/src/knockout/components/text-area/text-area.ts
@@ -11,9 +11,6 @@ ko.components.register("sv-text-area", {
       return {
         model: params,
         value: ko.observable(params.getTextValue() || ""),
-        dispose: () => {
-          params.dispose();
-        },
       };
     },
   },

diff --git a/src/vue/components/text-area.vue b/src/vue/components/text-area.vue
@@ -66,9 +66,6 @@ export class TextAreaComponent extends BaseVue {
   protected onUpdated() {
     this.model.setElement(this.$refs["contentElement"] as HTMLTextAreaElement);
   }
-  protected beforeDestroy() {
-    this.model.dispose();
-  }
 }
 
 Vue.component("sv-text-area", TextAreaComponent);

diff --git a/testCafe/components/popup.ts b/testCafe/components/popup.ts
@@ -217,7 +217,7 @@ frameworks.forEach(async framework => {
 
       .click(clickButton)
       .expect(popupModalSelector.visible).ok()
-
+      .wait(1000)
       .pressKey("esc")
       .wait(1000)
       .expect(popupModalSelector.exists).notOk();

diff --git a/testCafe/helper.js b/testCafe/helper.js
@@ -65,14 +65,13 @@ export const initSurvey = ClientFunction(
       document.getElementById("surveyElement").innerHTML = "";
       SurveyUI.renderSurvey(model, document.getElementById("surveyElement"));
     } else if (framework === "react") {
-      document.getElementById("surveyElement").innerHTML = "";
+      if(!!window.root) {
+        window.root.unmount();
+      }
       const root = window["ReactDOM"].createRoot(document.getElementById("surveyElement"));
       window["root"] = root;
       root.render(
-        window["React"].createElement(window["SurveyReact"].Survey, {
-          model: model,
-          onComplete: surveyComplete,
-        }),
+        React.createElement(React.StrictMode, { children: React.createElement(SurveyReact.Survey, { model: model, onComplete: surveyComplete }) }),
       );
     } else if (framework === "vue") {
       document.getElementById("surveyElement").innerHTML =
@@ -128,17 +127,20 @@ export const initSurveyPopup = ClientFunction(
         allowFullScreen: true
       });
     } else if (framework === "react") {
-      document.getElementById("surveyElement").innerHTML = "";
+      if(!!window.root) {
+        window.root.unmount();
+      }
       const root = window["ReactDOM"].createRoot(document.getElementById("surveyElement"));
       window["root"] = root;
       root.render(
-        window["React"].createElement(window["SurveyReact"].PopupSurvey, {
-          model: model,
-          isExpanded: true,
-          allowClose: true,
-          allowFullScreen: true
-        }),
-      );
+        React.createElement(React.StrictMode, { children: React.createElement(SurveyReact.PopupSurvey,
+          {
+            model: model,
+            isExpanded: true,
+            allowClose: true,
+            allowFullScreen: true
+          }
+        ) }));
     } else if (framework === "vue") {
       document.getElementById("surveyElement").innerHTML =
         "<popup-survey :survey='survey' :isExpanded='true' :allowClose='true' :allowFullScreen='true'/>";

diff --git a/testCafe/questions/comment.ts b/testCafe/questions/comment.ts
@@ -185,4 +185,43 @@ frameworks.forEach(framework => {
       .pressKey("backspace")
       .expect(characterCounter.textContent).eql("0/10");
   });
+});
+
+const json2 = {
+  "logoPosition": "right",
+  "pages": [
+    {
+      "name": "page1",
+      "elements": [
+        {
+          "type": "boolean",
+          "name": "question3"
+        },
+        {
+          "type": "text",
+          "name": "question1"
+        },
+        {
+          "type": "comment",
+          "name": "question2",
+          "visibleIf": "{question3} = true",
+          "setValueExpression": "{question1}"
+        }
+      ]
+    }
+  ]
+};
+frameworks.forEach(framework => {
+  fixture`${framework} ${title}`.page`${url}${framework}`;
+
+  test("Bug: 8921 - check long text reactivity when change visible property", async t => {
+    await initSurvey(framework, json2);
+    await t
+      .click(Selector("span").withText("Yes"))
+      .click(Selector("span").withText("No"))
+      .click(Selector("span").withText("Yes"))
+      .typeText(Selector("input[type='text']"), "test")
+      .pressKey("tab")
+      .expect(Selector("textarea").value).eql("test");
+  });
 });
diff --git a/testCafe/survey/popup.js b/testCafe/survey/popup.js
@@ -26,13 +26,13 @@ const initPopupSurvey = ClientFunction(
       popupSurvey.show();
     } else if (framework === "react") {
       document.getElementById("surveyElement").innerHTML = "";
-      window["ReactDOM"].render(
-        window["React"].createElement(window["SurveyReact"].PopupSurvey, {
-          model: model,
-          onComplete: surveyComplete,
-        }),
-        document.getElementById("surveyElement")
-      );
+      const root = ReactDOM.createRoot(document.getElementById("surveyElement"));
+      root.render(React.createElement(React.StrictMode, { children: React.createElement(window["SurveyReact"].PopupSurvey, {
+        model: model,
+        onComplete: surveyComplete,
+      })
+      }
+      ));
     } else if (framework === "vue") {
       document.getElementById("surveyElement").innerHTML =
         "<popup-survey :survey='survey'/>";
-Original file line number
+Diff line change
@@ Expand Up @@
           />
         );
       }
-      componentWillUnmount() {
-        this.viewModel.dispose();
-      }
     }
     ReactElementFactory.Instance.registerElement("sv-text-area", (props) => {
@@ Expand Down @@