Fix templateVisibleIf doesnt work in list render mode

surveyjs · Apr 11, 2024 · 0390003 · 0390003
1 parent d3a4ecd
commit 0390003
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue
@@ -100,7 +100,7 @@ useQuestion(
 );
 
 const renderedPanels = computed(() => {
-  if (props.question.isRenderModeList) return props.question.panels;
+  if (props.question.isRenderModeList) return props.question.visiblePanels;
   const panels = [];
   if (props.question.currentPanel) {
     panels.push(props.question.currentPanel);

diff --git a/src/knockout/templates/question-paneldynamic.html b/src/knockout/templates/question-paneldynamic.html
@@ -10,7 +10,7 @@
         </div>
     <!-- /ko -->
     <!-- ko if: question.koIsList() -->
-      <!-- ko foreach: { data: question.panels } -->
+      <!-- ko foreach: { data: question.visiblePanels } -->
         <div data-bind="css: question.getPanelWrapperCss($data)">
           <!-- ko let: { question: $data } -->
             <!-- ko component: { name: survey.getElementWrapperComponentName(question), params: { componentData:  survey.getElementWrapperComponentData(question), templateData: { name: question.koElementType, data: question, afterRender: $parent.koPanelAfterRender } } } -->

diff --git a/src/react/reactquestion_paneldynamic.tsx b/src/react/reactquestion_paneldynamic.tsx
@@ -3,13 +3,10 @@ import { SurveyQuestionElementBase } from "./reactquestion_element";
 import { SurveyModel, QuestionPanelDynamicModel } from "survey-core";
 import { SurveyPanel } from "./panel";
 import { ReactQuestionFactory } from "./reactquestion_factory";
-import { SvgIcon } from "./components/svg-icon/svg-icon";
 import { SurveyActionBar } from "./components/action-bar/action-bar";
 import { SurveyQuestionPanelDynamicNextButton } from "./components/paneldynamic-actions/paneldynamic-next-btn";
 import { SurveyQuestionPanelDynamicPrevButton } from "./components/paneldynamic-actions/paneldynamic-prev-btn";
 import { SurveyQuestionPanelDynamicProgressText } from "./components/paneldynamic-actions/paneldynamic-progress-text";
-import { SurveyQuestionPanelDynamicAddButton } from "./components/paneldynamic-actions/paneldynamic-add-btn";
-import { SurveyQuestionPanelDynamicRemoveButton } from "./components/paneldynamic-actions/paneldynamic-remove-btn";
 import { ReactElementFactory } from "./element-factory";
 
 export class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
@@ -47,8 +44,8 @@ export class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
   protected renderElement(): JSX.Element {
     const panels:Array<JSX.Element> = [];
     if (this.question.isRenderModeList) {
-      for (let i = 0; i < this.question.panels.length; i++) {
-        const panel = this.question.panels[i];
+      for (let i = 0; i < this.question.visiblePanels.length; i++) {
+        const panel = this.question.visiblePanels[i];
         panels.push(
           <SurveyQuestionPanelDynamicItem
             key={panel.id}

diff --git a/src/vue/paneldynamic.vue b/src/vue/paneldynamic.vue
@@ -42,7 +42,7 @@ import { default as QuestionVue } from "./question";
 @Component
 export class PanelDynamic extends QuestionVue<QuestionPanelDynamicModel> {
   get renderedPanels(): PanelModel[] {
-    if (this.question.isRenderModeList) return this.question.panels;
+    if (this.question.isRenderModeList) return this.question.visiblePanels;
     const panels = [];
     if (this.question.currentPanel) {
       panels.push(this.question.currentPanel);

diff --git a/testCafe/questions/paneldynamic.ts b/testCafe/questions/paneldynamic.ts
@@ -337,6 +337,21 @@ frameworks.forEach((framework) => {
       .expect(addNewSelector.count).eql(1)
       .expect(Selector("span").withText("#1-2").visible).ok();
   });
+  test("templateVisibleIf renderMode: list", async (t) => {
+    await ClientFunction(() => {
+      (window as any).survey.getQuestionByName("panel").renderMode = "list";
+    })();
+    const titleSelector = Selector("span").withText("q1");
+    await t
+      .expect(titleSelector.count).eql(0)
+      .pressKey("b")
+      .pressKey("tab")
+      .expect(titleSelector.count).eql(0)
+      .pressKey("tab")
+      .pressKey("a")
+      .pressKey("tab")
+      .expect(titleSelector.count).eql(1);
+  });
 });
 const jsonCheckboxRestFul = {
   storeOthersAsComment: false,