Fix: Survey-React, conditional rendering is broken with inline questi…

…ons #3031 (#3033)

src/panel.ts

@@ -104,6 +104,7 @@ export class QuestionRowModel extends Base {
     this.isNeedRender = !this.isLazyRendering;
     this.visible = panel.areInvisibleElementsShowing;
     this.createNewArray("elements");
+    this.createNewArray("visibleElements");
   }
   public get isLazyRendering() {
     return (
@@ -116,6 +117,9 @@ export class QuestionRowModel extends Base {
   public get elements(): Array<IElement> {
     return this.getPropertyValue("elements");
   }
+  public get visibleElements(): Array<IElement> {
+    return this.getPropertyValue("visibleElements");
+  }
   public get visible(): boolean {
     return this.getPropertyValue("visible", true);
   }
@@ -128,9 +132,6 @@ export class QuestionRowModel extends Base {
   public set isNeedRender(val: boolean) {
     this.setPropertyValue("isneedrender", val);
   }
-  public get visibleElements(): Array<IElement> {
-    return this.elements.filter((e) => e.isVisible);
-  }
   public updateVisible() {
     this.visible = this.calcVisible();
     this.setWidth();
@@ -212,7 +213,23 @@ export class QuestionRowModel extends Base {
     return Helpers.isNumber(width) ? width + "px" : width;
   }
   private calcVisible(): boolean {
-    return this.visibleElements.length > 0;
+    var visElements: Array<IElement> = [];
+    for (var i = 0; i < this.elements.length; i++) {
+      if (this.elements[i].isVisible) {
+        visElements.push(this.elements[i]);
+      }
+    }
+    if (this.needToUpdateVisibleElements(visElements)) {
+      this.setPropertyValue("visibleElements", visElements);
+    }
+    return visElements.length > 0;
+  }
+  private needToUpdateVisibleElements(visElements: Array<IElement>): boolean {
+    if (visElements.length !== this.visibleElements.length) return true;
+    for (var i = 0; i < visElements.length; i++) {
+      if (visElements[i] !== this.visibleElements[i]) return true;
+    }
+    return false;
   }
   public dispose() {
     super.dispose();

src/react/row.tsx

@@ -35,25 +35,23 @@ export class SurveyRow extends SurveyElementBase<any, any> {
   protected renderElementContent(): JSX.Element {
     var elements = null;
     if (this.row.isNeedRender) {
-      elements = this.row.elements
-        .filter((element) => element.isVisible)
-        .map((element) => {
-          const innerElement = this.createElement(element);
-          var rootStyle: { [index: string]: any } = {};
-          if (element.renderWidth) {
-            rootStyle["width"] = element.renderWidth;
-            rootStyle["flexGrow"] = 1;
-            rootStyle["flexShrink"] = 1;
-            rootStyle["flexBasis"] = element.renderWidth;
-            rootStyle["minWidth"] = element.minWidth;
-            rootStyle["maxWidth"] = element.maxWidth;
-          }
-          return (
-            <div style={rootStyle} key={innerElement.key}>
-              {innerElement}
-            </div>
-          );
-        });
+      elements = this.row.visibleElements.map((element) => {
+        const innerElement = this.createElement(element);
+        var rootStyle: { [index: string]: any } = {};
+        if (element.renderWidth) {
+          rootStyle["width"] = element.renderWidth;
+          rootStyle["flexGrow"] = 1;
+          rootStyle["flexShrink"] = 1;
+          rootStyle["flexBasis"] = element.renderWidth;
+          rootStyle["minWidth"] = element.minWidth;
+          rootStyle["maxWidth"] = element.maxWidth;
+        }
+        return (
+          <div style={rootStyle} key={innerElement.key}>
+            {innerElement}
+          </div>
+        );
+      });
     }
 
     return (

testCafe/survey/elementsVisibilityOnSameRow.js

@@ -0,0 +1,43 @@
+import { frameworks, url, initSurvey, getSurveyResult } from "../helper";
+import { Selector, ClientFunction } from "testcafe";
+const assert = require("assert");
+const title = `Elements Visibility on Same row`;
+
+const json = {
+  pages: [
+    {
+      elements: [
+        { type: "radiogroup", name: "q1", choices: ["Yes", "No"] },
+        {
+          type: "text",
+          name: "q2",
+          startWithNewLine: false,
+          visibleIf: "{q1} = 'Yes'",
+        },
+      ],
+    },
+  ],
+};
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
+    async (t) => {
+      await initSurvey(framework, json);
+    }
+  );
+  test(`make element on same row visible`, async (t) => {
+    await t.expect(Selector("span").withText("2.").visible).notOk();
+    const yesChoice = Selector(`input[value="Yes"]`);
+    const noChoice = Selector(`input[value="No"]`);
+    await t
+      .click(yesChoice)
+      .expect(yesChoice.checked)
+      .ok();
+    await t.expect(Selector("span").withText("2.").visible).ok();
+    await t
+      .click(noChoice)
+      .expect(noChoice.checked)
+      .ok();
+    await t.expect(Selector("span").withText("2.").visible).notOk();
+  });
+});

tests/paneltests.ts

@@ -749,7 +749,7 @@ QUnit.test("Panel.ensureRowsVisibility", function(assert) {
   page.onFirstRendering();
   assert.equal(panel.rows.length, 2);
 
-  panel.rows.forEach(row => {
+  panel.rows.forEach((row) => {
     assert.equal(row["_updateVisibility"], undefined);
     assert.equal(row["_scrollableParent"], undefined);
     row["_updateVisibility"] = handler;
@@ -796,7 +796,7 @@ QUnit.test("Panel.startLazyRendering isNeedRender=true", function(assert) {
     page.onFirstRendering();
     assert.equal(panel.rows.length, 2);
 
-    panel.rows.forEach(row => {
+    panel.rows.forEach((row) => {
       assert.equal(row["_scrollableParent"], undefined);
       assert.equal(row["_updateVisibility"], undefined);
       assert.equal(row.isNeedRender, false);
@@ -854,7 +854,7 @@ QUnit.test("Panel.startLazyRendering isNeedRender=false", function(assert) {
     page.onFirstRendering();
     assert.equal(panel.rows.length, 2);
 
-    panel.rows.forEach(row => {
+    panel.rows.forEach((row) => {
       assert.equal(row["_scrollableParent"], undefined);
       assert.equal(row["_updateVisibility"], undefined);
       assert.equal(row.isNeedRender, false);
@@ -875,3 +875,31 @@ QUnit.test("Panel.startLazyRendering isNeedRender=false", function(assert) {
     settings.lazyRowsRendering = prevLazyRowsRendering;
   }
 });
+QUnit.test("row.visibleElements make it reactive", function(assert) {
+  var page = new PageModel();
+  page.addNewQuestion("text", "q1");
+  page.addNewQuestion("text", "q2");
+  page.addNewQuestion("text", "q3");
+  page.questions[1].startWithNewLine = false;
+  page.questions[2].startWithNewLine = false;
+  assert.equal(page.rows.length, 1, "We have one row");
+  var row = page.rows[0];
+  assert.equal(row.elements.length, 3, "We have 3 elements in row");
+  assert.equal(row.visibleElements.length, 3, "All elements are visible");
+  assert.equal(
+    row.getPropertyValue("visibleElements").length,
+    3,
+    "visibleElements are reactive"
+  );
+  page.questions[1].visible = false;
+  assert.equal(row.visibleElements.length, 2, "Two elements are visible");
+  assert.equal(row.visibleElements[0].name, "q1", "First element");
+  assert.equal(row.visibleElements[1].name, "q3", "Second element");
+  page.removeElement(page.questions[2]);
+  assert.equal(row.visibleElements.length, 1, "One element is visible");
+  assert.equal(row.visibleElements[0].name, "q1", "First element, #2");
+  page.questions[1].visible = true;
+  assert.equal(row.visibleElements.length, 2, "Two elements are visible, #3");
+  assert.equal(row.visibleElements[0].name, "q1", "First element, #3");
+  assert.equal(row.visibleElements[1].name, "q2", "Second element, #3");
+});