Bug/6639 panel dynamic nested footer css (#6969)

* The Remove buttons within a nested Panel Dynamic doesn't appear correctly fix #6639 * Fix unit test #6639
surveyjs · Sep 18, 2023 · b6c5754 · b6c5754
1 parent 964e63d
commit b6c5754
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/src/panel.ts b/src/panel.ts
@@ -1758,17 +1758,8 @@ export class PanelModel extends PanelModelBase implements IElement {
   }
   private footerToolbarValue: ActionContainer;
 
-  private footerToolbarCssValue: string;
-
-  public set footerToolbarCss(val: string) {
-    this.footerToolbarCssValue = val;
-  }
-
-  public get footerToolbarCss(): string {
-    return this.footerToolbarCssValue || this.cssClasses.panel?.footer;
-  }
   public onGetFooterActionsCallback: () => Array<IAction>;
-
+  public onGetFooterToolbarCssCallback: () => string;
   public getFooterToolbar(): ActionContainer {
     if (!this.footerToolbarValue) {
       var actions = this.footerActions;
@@ -1786,9 +1777,13 @@ export class PanelModel extends PanelModelBase implements IElement {
         actions = this.survey?.getUpdatedPanelFooterActions(this, actions);
       }
       this.footerToolbarValue = this.createActionContainer(this.allowAdaptiveActions);
-      // if (!!this.cssClasses.panel) {
-      this.footerToolbarValue.containerCss = this.footerToolbarCss;
-      // }
+      let footerCss = this.onGetFooterToolbarCssCallback ? this.onGetFooterToolbarCssCallback() : "";
+      if(!footerCss) {
+        footerCss = this.cssClasses.panel?.footer;
+      }
+      if(footerCss) {
+        this.footerToolbarValue.containerCss = footerCss;
+      }
       this.footerToolbarValue.setItems(actions);
     }
     return this.footerToolbarValue;

diff --git a/src/question_paneldynamic.ts b/src/question_paneldynamic.ts
@@ -1769,7 +1769,7 @@ export class QuestionPanelDynamicModel extends Question
     panel.onGetFooterActionsCallback = () => {
       return this.getPanelActions(panel);
     };
-    panel.footerToolbarCss = this.cssClasses.panelFooter;
+    panel.onGetFooterToolbarCssCallback = () => { return this.cssClasses.panelFooter; };
     panel.registerPropertyChangedHandlers(["visible"], () => {
       if(panel.visible) this.onPanelAdded(panel);
       else this.onPanelRemoved(panel);

diff --git a/tests/question_paneldynamic_tests.ts b/tests/question_paneldynamic_tests.ts
@@ -17,6 +17,7 @@ import { ItemValue } from "../src/itemvalue";
 import { StylesManager } from "../src/stylesmanager";
 import { settings } from "../src/settings";
 import { QuestionMatrixModel } from "../src/question_matrix";
+import { defaultStandardCss } from "../src/defaultCss/cssstandard";
 
 export default QUnit.module("Survey_QuestionPanelDynamic");
 
@@ -6186,4 +6187,33 @@ QUnit.test("nested panel.panelCount&expression question", function (assert) {
   assert.equal(panel.getQuestionByName("C").value, 1, "C");
   assert.equal(panel.getQuestionByName("D").value, 3, "D");
   assert.equal(panel.getQuestionByName("E").value, 3, "E");
+});
+QUnit.test("Footer css for nested panels", function(assert) {
+  const footerCss = "abcd";
+  defaultStandardCss.paneldynamic["panelFooter"] = footerCss;
+  const survey = new SurveyModel({
+    questions: [
+      {
+        type: "paneldynamic",
+        name: "q",
+        panelCount: 1,
+        templateElements: [
+          { type: "text", name: "q1" },
+          {
+            type: "paneldynamic",
+            name: "qq",
+            panelCount: 1,
+            templateElements: [{ type: "text", name: "q2" }],
+          },
+        ],
+      },
+    ],
+  });
+  const question = <QuestionPanelDynamicModel>survey.getQuestionByName("q");
+  assert.equal(question.panels[0].getFooterToolbar().containerCss, footerCss, "root footer container css");
+  const nested = <QuestionPanelDynamicModel>question.panels[0].getQuestionByName("qq");
+  assert.equal(nested.panels[0].getFooterToolbar().containerCss, footerCss, "nested footer container css on loading");
+  nested.addPanel();
+  assert.equal(nested.panels[1].getFooterToolbar().containerCss, footerCss, "nested footer container css on creating");
+  delete defaultStandardCss.paneldynamic["panelFooter"];
 });