#6019 Do not render content of the collapsed elements on designer sur…

…face Fixes #6019
surveyjs · Nov 4, 2024 · 1b86e3d · 1b86e3d
1 parent e3e3976
commit 1b86e3d
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 35 deletions.
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
@@ -420,6 +420,30 @@ test("Question adorner - collapse button in differen modes", async (t) => {
   await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "never"; })();
 });
 
+test("Question adorner - do not render content when initially collapsed", async (t) => {
+  await t.resizeWindow(1920, 1080);
+  const json = {
+    elements: [
+      {
+        type: "text",
+        name: "question1"
+      }
+    ]
+  };
+  await setJSON(json);
+  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "onhover"; })();
+  const qContent = Selector(".svc-question__content");
+  const qCollapseButton = Selector(".svc-question__content #collapse");
+  await t.hover(qContent, { offsetX: 10, offsetY: 10 });
+  await t.expect(Selector(".svc-question__adorner").hasClass("svc-hovered")).ok();
+  await t.expect(qCollapseButton.visible).notOk();
+  await t.click(qContent, { offsetX: 10, offsetY: 10 });
+  await t.expect(qContent.hasClass("svc-question__content--selected")).ok();
+  await t.expect(qCollapseButton.visible).notOk();
+
+  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "never"; })();
+});
+
 test("Question adorner - collapse button visibility inside panels", async (t) => {
   await t.resizeWindow(1920, 1080);
   const json = {
@@ -436,33 +460,22 @@ test("Question adorner - collapse button visibility inside panels", async (t) =>
       }
     ]
   };
-  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "onhover"; })();
+  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; })();
   await setJSON(json);
   await t.hover(getToolboxItemByText("Single-Line Input"));
   const qContent = Selector(".svc-question__content--text");
-  const pContent = Selector(".svc-question__content--panel");
   const qCollapseButton = Selector(".svc-question__content--text #collapse");
-  const pCollapseButton = Selector(".svc-question__content--panel #collapse");
-
-  await t.hover(qContent, { offsetX: 10, offsetY: 10 });
-  await t.expect(Selector(".svc-question__adorner.svc-hovered > .svc-question__content--text").exists).ok();
   await t.expect(qCollapseButton.visible).ok();
-  await t.expect(pCollapseButton.visible).notOk();
-
-  await t.hover(pContent, { offsetX: 10, offsetY: 10 });
-  await t.expect(Selector(".svc-question__adorner.svc-hovered > .svc-question__content--panel").exists).ok();
-  await t.expect(qCollapseButton.visible).notOk();
-  await t.expect(pCollapseButton.visible).ok();
+  await t.click(qCollapseButton);
 
-  await t.click(qContent, { offsetX: 10, offsetY: 10 });
-  await t.expect(qContent.hasClass("svc-question__content--selected")).ok();
-  await t.expect(qCollapseButton.visible).ok();
-  await t.expect(pCollapseButton.visible).notOk();
+  await t.click(Selector(".svc-tabbed-menu-item").withText("Preview"));
+  await t.click(Selector(".svc-tabbed-menu-item").withText("Designer"));
 
-  await t.click(pContent, { offsetX: 10, offsetY: 10 });
-  await t.expect(pContent.hasClass("svc-question__content--selected")).ok();
-  await t.expect(qCollapseButton.visible).notOk();
-  await t.expect(pCollapseButton.visible).ok();
+  await t.expect(qContent.find(".sd-element").exists).notOk();
+  await t.click(qCollapseButton);
+  await t.expect(qContent.find(".sd-element").exists).ok();
+  await t.click(qCollapseButton);
+  await t.expect(qContent.find(".sd-element").exists).ok();
 });
 
 test("Question adorner - doubleclick", async (t) => {

diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -94,11 +94,12 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   protected get dragInsideCollapsedContainer(): boolean {
     return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
   }
-
+  @property({ defaultValue: true }) needToRenderContent: boolean;
   @property({ defaultValue: true }) allowExpandCollapse: boolean;
   @property({
     onSet: (val, target: SurveyElementAdornerBase<T>) => {
       target.renderedCollapsed = val;
+      if (!val) target.needToRenderContent = true;
       if (target.creator.designerStateManager && !target.creator.designerStateManager.isSuspended && target.surveyElement) {
         target.creator.designerStateManager.getElementState(target.surveyElement).collapsed = val;
       }
@@ -293,6 +294,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       const state = this.creator.designerStateManager?.getElementState(this.surveyElement);
       this.collapsed = state.collapsed;
     }
+    this.needToRenderContent = !this.collapsed;
   }
 
   protected detachElement(surveyElement: T): void {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -766,6 +766,7 @@ svc-question,
     transition: opacity 150ms;
   }
 }
+.svc-element__header--lazy,
 .svc-element__header--hidden.sd-question__header--location--left {
   .svc-string-editor,
   sv-ng-string > .svc-string-editor {
@@ -774,7 +775,6 @@ svc-question,
       content: none;
     }
   }
-
 }
 
 .svc-question__adorner {

diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
@@ -227,7 +227,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     return (this.element)?.getPropertyValue("isMessagePanelVisible");
   }
   get cssCollapsedHiddenHeader(): string {
-    return (this.element as PanelModel | Question).cssHeader + " svc-element__header--hidden";
+    const css = new CssClassBuilder()
+      .append((this.element as PanelModel | Question).cssHeader)
+      .append("svc-element__header--hidden")
+      .append("svc-element__header--lazy", !this.needToRenderContent)
+      .toString();
+    return css;
   }
   get cssCollapsedHiddenTitle(): string {
     return this.element.cssTitle + " svc-element__title--hidden";
@@ -350,7 +355,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   }
 
   public get showHiddenTitle() {
-    return (!this.element.hasTitle || this.isTitleLeft) && this.element.isInteractiveDesignElement;
+    return (!this.element.hasTitle || this.isTitleLeft || !this.needToRenderContent) && this.element.isInteractiveDesignElement;
   }
   public get placeholderText(): string {
     if (this.surveyElement instanceof QuestionHtmlModel) {

diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx
@@ -9,7 +9,8 @@ import {
   attachKey2click,
   SvgIcon,
   Popup,
-  SurveyElementBase
+  SurveyElementBase,
+  TitleElement
 } from "survey-react-ui";
 import { CreatorModelElement } from "../ModelElement";
 
@@ -76,7 +77,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     return true;
   }
   protected renderContent(allowInteractions: boolean): JSX.Element {
-    var content = this.renderElementContent();
+    var content = this.model.needToRenderContent ? this.renderElementContent() : null;
     //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
     return attachKey2click(
       <div
@@ -107,17 +108,21 @@ export class QuestionAdornerComponent extends CreatorModelElement<
   }
 
   protected renderQuestionTitle(): JSX.Element {
-    if (!this.model.showHiddenTitle) return null;
     const element = this.model.element as Question | PanelModel;
+    if (!this.model.showHiddenTitle) return null;
     return (
-      <div className={this.model.cssCollapsedHiddenHeader} >
-        <div
-          ref={node => node && (!this.model.renderedCollapsed ?
-            node.setAttribute("inert", "") : node.removeAttribute("inert")
-          )}
-          className={this.model.cssCollapsedHiddenTitle} >
-          {element.hasTitle ? SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : <span className="svc-fake-title">{element.name}</span>}
-        </div>
+      <div
+        ref={node => node && (!this.model.renderedCollapsed ?
+          node.setAttribute("inert", "") : node.removeAttribute("inert")
+        )} className={this.model.cssCollapsedHiddenHeader} >
+        {(
+          element.hasTitle ?
+            <TitleElement element={element}></TitleElement> :
+            <div
+              className={this.model.cssCollapsedHiddenTitle} >
+              <span className="svc-fake-title">{element.name}</span>
+            </div>
+        )}
       </div>
     );
   }