From 960c094dc4c64d55e4dc8a6043d3495943e2e98e Mon Sep 17 00:00:00 2001
From: Andrew Telnov <andrew.telnov@gmail.com>
Date: Fri, 17 Nov 2023 15:47:47 +0200
Subject: [PATCH] [Knockout] When Panel expanded state is set to collapsed, a
 panel is collapsed on a design surface fix #7373

---
 src/knockout/templates/panel.html |  2 +-
 src/survey-element.ts             |  3 +--
 testCafe/questions/panel.js       | 34 +++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/knockout/templates/panel.html b/src/knockout/templates/panel.html
index b9df8c66da..5dacfafae6 100644
--- 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
index c6c31bd19a..70910dd82d 100644
--- 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
index bc2f2de7b5..ab3064a3ac 100644
--- 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();
+  });
+});
\ No newline at end of file