Bug/7401 panel state title designer (#7402)

* Panel isn't displayed if it is collapsed and doesn't have a title in Creator fix #7401 * Fix unit tests #7401
surveyjs · Nov 22, 2023 · f759a43 · f759a43
1 parent 541d992
commit f759a43
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/src/panel.ts b/src/panel.ts
@@ -309,7 +309,7 @@ export class PanelModelBase extends SurveyElement<Question>
   get hasTitle(): boolean {
     return (
       (this.canShowTitle() && this.locTitle.textOrHtml.length > 0) ||
-      (this.showTitle && this.isDesignMode && settings.designMode.showEmptyTitles)
+      (this.isDesignMode && (this.showTitle && settings.designMode.showEmptyTitles))
     );
   }
   public delete(doDispose: boolean = true): void {
@@ -1667,10 +1667,16 @@ export class PanelModel extends PanelModelBase implements IElement {
       Helpers.getNumberByIndex(this.visibleIndex, this.getStartIndex())
     );
   }
+  protected notifyStateChanged(): void {
+    if(!this.isLoadingFromJson) {
+      this.locTitle.strChanged();
+    }
+    super.notifyStateChanged();
+  }
   protected createLocTitleProperty(): LocalizableString {
     const locTitleValue = super.createLocTitleProperty();
     locTitleValue.onGetTextCallback = (text: string): string => {
-      if (!text && (this.isExpanded || this.isCollapsed)) {
+      if (!text && (this.state !== "default")) {
         text = this.name;
       }
       return text;

diff --git a/tests/paneltests.ts b/tests/paneltests.ts
@@ -1940,4 +1940,35 @@ QUnit.test("Check panel styles with originalPage and showPreview", function(asse
 
   assert.ok(question2["getIsNested"]());
   assert.notOk(question2["getHasFrameV2"]());
+});
+QUnit.test("Render name for collapsed/expanded questions in design-time", function(assert) {
+  const survey = new SurveyModel();
+  survey.setDesignMode(true);
+  survey.fromJSON({
+    elements: [
+      {
+        type: "panel",
+        name: "panel",
+        state: "collapsed",
+        elements: [
+          {
+            "type": "text",
+            "name": "q2"
+          }
+        ]
+      }
+    ]
+  });
+  const panel = <PanelModel>survey.getPanelByName("panel");
+  assert.equal(panel.state, "collapsed", "the panel is collapsed");
+  assert.equal(panel.hasTitle, true, "We are in design mode and state is not default, #1");
+  assert.equal(panel.locTitle.renderedHtml, "panel", "Render name, #1");
+  panel.expand();
+  assert.equal(panel.state, "expanded", "the panel is expanded");
+  assert.equal(panel.hasTitle, true, "We are in design mode and state is not default, #2");
+  assert.equal(panel.locTitle.renderedHtml, "panel", "Render name, #2");
+  panel.state = "default";
+  assert.equal(panel.state, "default", "the panel is not collapsed or expanded");
+  assert.equal(panel.hasTitle, false, "We do not render the title");
+  assert.notOk(panel.locTitle.renderedHtml, "Render title is empty, #3");
 });