diff --git a/src/survey.ts b/src/survey.ts index 283f8d1aa7..b79bb59792 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -3562,7 +3562,7 @@ export class SurveyModel extends SurveyElementCore return this.mode == "edit"; } public get isDisplayMode(): boolean { - return this.mode == "display" || this.state == "preview"; + return this.mode == "display" && !this.isDesignMode || this.state == "preview"; } public get isUpdateValueTextOnTyping(): boolean { return this.textUpdateMode == "onTyping"; @@ -4735,7 +4735,7 @@ export class SurveyModel extends SurveyElementCore .append(this.css.root) .append(this.css.rootMobile, this.isMobile) .append(this.css.rootAnimationDisabled, !settings.animationEnabled) - .append(this.css.rootReadOnly, this.mode === "display") + .append(this.css.rootReadOnly, this.mode === "display" && !this.isDesignMode) .append(this.css.rootCompact, this.isCompact) .append(this.css.rootFitToContainer, this.fitToContainer) .toString(); diff --git a/tests/surveytests.ts b/tests/surveytests.ts index e3b4e993f9..9adac7e3cb 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -19285,3 +19285,20 @@ QUnit.test("Advanced header title/description color", function (assert) { headerModel = headerLayoutElement.data as Cover; assert.equal(headerModel.headerClasses, "sv-header"); }); +QUnit.test("Display mode in design time", function (assert) { + const survey = new SurveyModel(); + assert.equal(survey.css.rootReadOnly, "sd-root--readonly"); + assert.equal(survey.mode, "edit"); + assert.equal(survey.isDisplayMode, false); + assert.equal(survey.getRootCss(), "sd-root-modern"); + + survey.mode = "display"; + assert.equal(survey.mode, "display"); + assert.equal(survey.isDisplayMode, true); + assert.ok(survey.getRootCss().indexOf(survey.css.rootReadOnly) !== -1); + + survey.setDesignMode(true); + assert.equal(survey.mode, "display"); + assert.equal(survey.isDisplayMode, false); + assert.equal(survey.getRootCss(), "sd-root-modern"); +});