visibleIf does not work for nested Panel inside DynamicPanel when using "Show single input field per page" fix #10360 (#10368)

Author: andrewtelnov

packages/survey-core/src/panel.ts

@@ -699,28 +699,29 @@ export class PanelModelBase extends SurveyElement<Question>
    */
   public get questions(): Array<Question> {
     if (!this.isQuestionsReady) {
-      this.questionsValue = [];
-      for (var i = 0; i < this.elements.length; i++) {
-        var el = this.elements[i];
-        if (el.isPanel) {
-          var qs = (<PanelModel>el).questions;
-          for (var j = 0; j < qs.length; j++) {
-            this.questionsValue.push(qs[j]);
-          }
-        } else {
-          this.questionsValue.push(<Question>el);
-        }
-      }
+      this.questionsValue = this.getQuestionsCore(false);
       this.isQuestionsReady = true;
     }
 
     return this.questionsValue;
   }
   public get visibleQuestions(): Array<Question> {
+    return this.getQuestionsCore(true);
+  }
+  private getQuestionsCore(isVisible: boolean): Array<Question> {
     const res = new Array<Question>();
-    this.questions.forEach(q => {
-      if (q.isVisible) res.push(q);
-    });
+    for (let i = 0; i < this.elements.length; i++) {
+      const el = this.elements[i];
+      if (isVisible && !el.isVisible) continue;
+      if (el.isPanel) {
+        var qs = (<PanelModel>el).getQuestionsCore(isVisible);
+        for (let j = 0; j < qs.length; j++) {
+          res.push(qs[j]);
+        }
+      } else {
+        res.push(<Question>el);
+      }
+    }
     return res;
   }
   public getQuestions(includeNested: boolean): Array<Question> {

packages/survey-core/src/question_paneldynamic.ts

@@ -1241,7 +1241,7 @@ export class QuestionPanelDynamicModel extends Question
   }
   private fillSingleInputQuestionsByPanel(res: Array<Question>, panel: PanelModel): void {
     if (panel) {
-      panel.questions.forEach(q => q.addNestedQuestion(res, true, false, false));
+      panel.visibleQuestions.forEach(q => q.addNestedQuestion(res, true, false, false));
     }
   }
   protected getSingleQuestionLocTitleCore(): LocalizableString {

packages/survey-core/src/survey.ts

@@ -7758,7 +7758,7 @@ export class SurveyModel extends SurveyElementCore
   public calculateWidthMode(): string {
     if (this.widthMode == "auto") {
       let isResponsive = false;
-      if (this.questionsOnPageMode != "inputPerPage") {
+      if (!this.isSingleVisibleInput) {
         this.pages.forEach((page) => {
           if (page.needResponsiveWidth())
             isResponsive = true;

packages/survey-core/tests/inputPerPageTests.ts

@@ -2285,6 +2285,49 @@ QUnit.test("singleInput navigattion & errors for nested matrix #4, Bug#9982", as
   assert.equal(matrix.singleInputQuestion.name, "employee-name", "singleInputQuestion is employee-name, #5");
   assert.equal(matrix.singleInputQuestion.errors.length, 1, "singleInputQuestion show errors, #5");
 });
+QUnit.test("singleInput visibleIf in the container in dynamic panel, Bug#10360", assert => {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "paneldynamic", name: "panel", panelCount: 2, templateElements: [
+        { type: "text", name: "q1", isRequired: true, defaultValue: "a" },
+        { type: "panel", name: "p1", visibleIf: "{panel.q1} = 'a'",
+          elements: [{ type: "text", name: "q2", isRequired: true }]
+        }
+      ]
+      }
+    ],
+    questionsOnPageMode: "inputPerPage"
+  });
+  const panel = <QuestionPanelDynamicModel>survey.getQuestionByName("panel");
+  assert.equal(survey.currentSingleQuestion.name, "panel", "currentSingleQuestion is panel, #1");
+  assert.equal(panel.singleInputQuestion.name, "q1", "singleInputQuestion is q1, #1");
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "q2", "singleInputQuestion is q2, #2");
+  survey.performPrevious();
+  assert.equal(panel.singleInputQuestion.name, "q1", "singleInputQuestion is q1, #3");
+  assert.equal(panel.panels[0].getElementByName("p1").isVisible, true, "p1 is visible, #3");
+  panel.singleInputQuestion.value = "b";
+  assert.equal(panel.panels[0].getElementByName("p1").isVisible, false, "p1 is not visible, #4");
+  assert.equal(panel.panels[0].getQuestionByName("q2").isVisibleInSurvey, false, "q2 is not visible, #4");
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "q1", "singleInputQuestion is q1, #4");
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "q2", "singleInputQuestion is q2, #5");
+  panel.singleInputQuestion.value = "val1";
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "panel", "singleInputQuestion is panel - summary, #6");
+  panel.singleInputSummary?.items[1].btnEdit.action();
+  assert.equal(panel.singleInputQuestion.name, "q1", "singleInputQuestion is q1, #7");
+  panel.singleInputQuestion.value = "b";
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "panel", "singleInputQuestion is panel, #8");
+  panel.singleInputSummary?.items[1].btnEdit.action();
+  assert.equal(panel.singleInputQuestion.name, "q1", "singleInputQuestion is q1, #9");
+  panel.singleInputQuestion.value = "a";
+  survey.performNext();
+  assert.equal(panel.singleInputQuestion.name, "q2", "singleInputQuestion is q2, #10");
+});
+
 //TODO re-think this test. We need to include summaries into brasdscrum navigation
 QUnit.skip("singleInput bradscrum navigation for 3 level dynamic panels", assert => {
   const survey = new SurveyModel({