[Knockout] When Panel expanded state is set to collapsed, a panel is …

…collapsed on a design surface fix #7373 (#7374)
surveyjs · Nov 17, 2023 · cb923d8 · cb923d8
1 parent b8003fb
commit cb923d8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/knockout/templates/panel.html b/src/knockout/templates/panel.html
@@ -14,7 +14,7 @@
       <!-- ko template: { name: 'survey-question-errors', data: $data } -->
       <!-- /ko -->
     <!-- /ko -->
-    <!-- ko if: state != "collapsed" -->
+    <!-- ko if: state != "collapsed" || isDesignMode -->
     <div
       data-bind="style: { paddingLeft: innerPaddingLeft }, css: cssClasses.panel.content, attr: {id:contentId}"
     >

diff --git a/src/survey-element.ts b/src/survey-element.ts
@@ -288,8 +288,7 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
    * @see isExpanded
    */
   public get isCollapsed(): boolean {
-    if (this.isDesignMode) return;
-    return this.state === "collapsed";
+    return this.state === "collapsed" && !this.isDesignMode;
   }
   /**
    * Returns `true` if the survey element is expanded.

diff --git a/testCafe/questions/panel.js b/testCafe/questions/panel.js
@@ -170,3 +170,37 @@ frameworks.forEach((framework) => {
     assert.equal(json.title, newTitle);
   });
 });
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
+    async (t) => {
+      await initSurvey(framework, { elements: [{ type: "text", name: "q1" }] }, undefined, true);
+    }
+  );
+
+  test("Show content for collapsed panel in designer", async (t) => {
+    const updateSurvey = ClientFunction(() => {
+      window.survey.setDesignMode(true);
+      window.survey.fromJSON({
+        elements: [
+          {
+            "type": "panel",
+            "name": "panel1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ],
+            "state": "collapsed"
+          }
+        ]
+      });
+    });
+    await t
+      .expect(Selector("span").withText("question1").visible).notOk();
+    await updateSurvey();
+    await t
+      .expect(Selector("span").withText("question1").visible).ok();
+  });
+});