unify hidden title behavior

packages/survey-creator-angular/src/panel.component.html

@@ -17,7 +17,12 @@
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
         </div>
       </div>
-
+      <div *ngIf="adorner.showHiddenTitle" [class]="adorner.cssCollapsedHiddenHeader">
+        <div [class]="adorner.cssCollapsedHiddenTitle">
+          <sv-ng-string *ngIf="!!model.title" [model]="model.locTitle"></sv-ng-string>
+          <span *ngIf="!model.title" class="svc-fake-title">{{model.name}}</span>
+        </div>
+      </div>
       <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
 
       <div *ngIf="adorner.isEmptyElement" class="svc-panel__placeholder_frame-wrapper">

packages/survey-creator-angular/src/question.component.html

@@ -16,7 +16,7 @@
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
         </div>
       </div>
-      <div *ngIf="!model.hasTitle" [class]="adorner.cssCollapsedHiddenHeader">
+      <div *ngIf="adorner.showHiddenTitle" [class]="adorner.cssCollapsedHiddenHeader">
         <div [class]="adorner.cssCollapsedHiddenTitle">
           <sv-ng-string [model]="model.locTitle"></sv-ng-string>
         </div>

packages/survey-creator-core/src/components/question.scss

@@ -153,11 +153,6 @@ svc-question {
     user-select: all;
     pointer-events: all;
   }
-
-  .sd-question__header--hidden,
-  .svc-question__header--hidden {
-    padding-bottom: calcSize(1);
-  }
 }
 
 .svc-question__content>div,
@@ -604,6 +599,26 @@ svc-question,
   z-index: 1;
 }
 
+.svc-element__header--hidden {
+  display: block;
+  padding-bottom: calcSize(1);
+  box-sizing: border-box;
+  .svc-string-editor,
+  .svc-fake-title,
+  sv-ng-string>.svc-string-editor{
+    display: inline-flex;
+    &::before {
+      content: '('
+    }
+    &::after {
+      content: ')'
+    }
+  }
+  .svc-element__title--hidden {
+    display: none;
+  }
+}
+
 .svc-question__adorner {
   .svc-question__content--collapsed {
     &>* {
@@ -627,32 +642,11 @@ svc-question,
         display: none;
       }
 
-      &.sd-panel__header--hidden,
-      &.sd-question__header--hidden,
-      &.svc-question__header--hidden {
+      &.svc-element__header--hidden {
         display: block;
       }
-
-      .sd-element__title,
-      .sd-title.sd-element__title {
-
-        &.sd-element__title--hidden,
-        &.svc-element__title--hidden {
-          display: block;
-
-          &>.svc-string-editor,
-          &>sv-ng-string>.svc-string-editor {
-            display: inline-flex;
-
-            &::before {
-              content: "(";
-            }
-
-            &::after {
-              content: ")";
-            }
-          }
-        }
+      .svc-element__title--hidden {
+        display: block;
       }
     }
   }
@@ -1043,9 +1037,7 @@ svc-question,
 .svc-question__content.svc-question__content--collapsed {
   .sd-element--complex>.sd-element__header--location-top {
 
-    &.sd-panel__header--hidden,
-    &.sd-question__header--hidden,
-    &.svc-question__header--hidden {
+    &.svc-element__header--hidden {
       padding: 0;
     }
   }
@@ -1060,9 +1052,7 @@ svc-question,
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
     padding-top: 0;
 
-    &.sd-panel__header--hidden,
-    &.sd-question__header--hidden,
-    &.svc-question__header--hidden {
+    &.svc-element__header--hidden {
       padding-bottom: calcSize(1);
     }
 

packages/survey-creator-core/src/components/question.ts

@@ -190,7 +190,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     return (this.element)?.getPropertyValue("isMessagePanelVisible");
   }
   get cssCollapsedHiddenHeader(): string {
-    return (this.element as PanelModel | Question).cssHeader + " svc-question__header--hidden";
+    return (this.element as PanelModel | Question).cssHeader + " svc-element__header--hidden";
   }
   get cssCollapsedHiddenTitle(): string {
     return this.element.cssTitle + " svc-element__title--hidden";
@@ -294,6 +294,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     return false;
   }
 
+  public get showHiddenTitle() {
+    return !this.element.hasTitle && this.element.isInteractiveDesignElement;
+  }
   public get placeholderText(): string {
     if (this.surveyElement instanceof QuestionHtmlModel) {
       return getLocString("ed.htmlPlaceHolder");

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -42,10 +42,6 @@ svc-tab-designer {
 
   .sd-title {
     display: flex;
-    &.sd-element__title--hidden,
-    &.svc-element__title--hidden {
-      display: none;
-    }
   }
 
   .sd-container-modern {

packages/survey-creator-knockout/src/adorners/panel.html

@@ -17,9 +17,20 @@
     </div>
     <!-- /ko -->
 
+    <!-- ko if: $data.showHiddenTitle -->
+    <div data-bind="css: $data.cssCollapsedHiddenHeader">
+      <div data-bind="css: $data.cssCollapsedHiddenTitle">
+        <!-- ko if: !!$data.element.title -->
+        <!-- ko template: { name: 'survey-string', data: $data.element.locTitle } --><!-- /ko -->
+        <!-- /ko -->
+        <!-- ko ifnot: !!$data.element.title -->
+        <span class="svc-fake-title" data-bind="text: element.name"></span>
+        <!-- /ko -->
+      </div>
+    </div>
+    <!-- /ko -->
     <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: templateData } } -->
     <!-- /ko -->
-
     <!-- ko if: koIsEmptyElement() -->
     <div class="svc-panel__placeholder_frame-wrapper">
       <div class="svc-panel__placeholder_frame">

packages/survey-creator-knockout/src/adorners/question.html

@@ -16,7 +16,7 @@
       </div>
     </div>
     <!-- /ko -->
-    <!-- ko ifnot: $data.element.hasTitle -->
+    <!-- ko if: $data.showHiddenTitle -->
     <div data-bind="css: $data.cssCollapsedHiddenHeader">
       <div data-bind="css: $data.cssCollapsedHiddenTitle">
         <!-- ko template: { name: 'survey-string', data: $data.element.locTitle } --><!-- /ko -->

packages/survey-creator-react/index.html

@@ -8,8 +8,8 @@
   <meta name="description" content="SurveyJS Creator Demo" />
   <title>SurveyJS Creator React</title>
   <!-- <script src="https://cdn.accesslint.com/accesslint-1.1.2.js"></script> -->
-  <script src="./node_modules/react/umd/react.development.js"></script>
-  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
 
   <script src="./node_modules/survey-core/survey.core.js"></script>

packages/survey-creator-react/src/adorners/Question.tsx

@@ -104,12 +104,12 @@ export class QuestionAdornerComponent extends CreatorModelElement<
   }
 
   protected renderQuestionTitle(): JSX.Element {
-    if (this.model.element.hasTitle || this.model.element.isPanel) return null;
+    if (!this.model.showHiddenTitle) return null;
     const element = this.model.element as Question | PanelModel;
     return (
       <div className={this.model.cssCollapsedHiddenHeader} >
         <div className={this.model.cssCollapsedHiddenTitle} >
-          {SurveyElementBase.renderLocString(element.locTitle, null, "q_title")}
+          {element.title ? SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : <span className="svc-fake-title">{element.name}</span>}
         </div>
       </div>
     );

packages/survey-creator-vue/src/adorners/Panel.vue

@@ -51,6 +51,12 @@
           ></SvComponent>
         </div>
       </div>
+      <div v-if="adorner.showHiddenTitle" :class="adorner.cssCollapsedHiddenHeader">
+        <div :class="adorner.cssCollapsedHiddenTitle">
+          <SvComponent v-if="!!adorner.element.title" :is="'survey-string'" :locString="adorner.element.locTitle" />
+          <span v-else class="svc-fake-title">{{adorner.element.name}}</span>
+        </div>
+      </div>
       <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
       <div
         v-if="adorner.isEmptyElement"

packages/survey-creator-vue/src/adorners/QuestionBase.vue

@@ -53,7 +53,7 @@
           ></SvComponent>
         </div>
       </div>
-      <div v-if="!element.hasTitle" :class="model.cssCollapsedHiddenHeader">
+      <div v-if="model.showHiddenTitle" :class="model.cssCollapsedHiddenHeader">
         <div :class="model.cssCollapsedHiddenTitle">
           <SvComponent :is="'survey-string'" :locString="element.locTitle" />
         </div>

testCafe/property-grid/panels.ts

@@ -50,27 +50,3 @@ test("Panel stay focused on question change", async (t) => {
     .click(question1)
     .expect(Selector("div [data-name=\"minWidth\"] input").focused).ok();
 });
-test("Show/hide panel header on entering/deleting the panel title, Bug#5720", async (t) => {
-  const json = {
-    elements: [
-      {
-        type: "panel",
-        name: "panel1"
-      }
-    ]
-  };
-  const panel = Selector(".svc-panel__placeholder");
-  const hiddenPanelTitle = Selector(".sd-element__title--hidden");
-  const titleEditor = Selector("[data-name='title']").find("textarea");
-  await setJSON(json);
-  await t
-    .click(panel)
-    .expect(hiddenPanelTitle.exists).ok()
-    .click(titleEditor)
-    .typeText(titleEditor, "MyTitle")
-    .expect(hiddenPanelTitle.exists).notOk()
-    .expect(Selector(".sv-string-editor").withText("MyTitle").exists).ok()
-    .selectText(titleEditor)
-    .pressKey("delete")
-    .expect(hiddenPanelTitle.exists).ok();
-});