survey-react 1.10.4 → 1.10.5

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.4
+ * surveyjs - Survey JavaScript library v1.10.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5430,6 +5430,7 @@ var defaultV2Css = {
     rootFitToContainer: "sd-root-modern--full-container",
     rootWrapper: "sd-root-modern__wrapper",
     rootWrapperFixed: "sd-root-modern__wrapper--fixed",
+    rootWrapperHasImage: "sd-root-modern__wrapper--has-image",
     rootBackgroundImage: "sd-root_background-image",
     container: "sd-container-modern",
     header: "sd-title sd-container-modern__title",
@@ -8530,7 +8531,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.changeSelectionWithKeyboard(false);
     };
     DropdownListModel.prototype.onClear = function (event) {
-        this.question.clearValue();
+        this.question.clearValue(true);
         this._popupModel.isVisible = false;
         if (event) {
             event.preventDefault();
@@ -9824,8 +9825,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.4";
-ReleaseDate = "" + "2024-05-15";
+Version = "" + "1.10.5";
+ReleaseDate = "" + "2024-05-20";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -39966,15 +39967,18 @@ var Question = /** @class */ (function (_super) {
      * @see value
      * @see comment
      */
-    Question.prototype.clearValue = function () {
+    Question.prototype.clearValue = function (keepComment) {
         if (this.value !== undefined) {
             this.value = undefined;
         }
-        if (!!this.comment) {
+        if (!!this.comment && keepComment !== true) {
             this.comment = undefined;
         }
         this.setValueChangedDirectly(false);
     };
+    Question.prototype.clearValueOnly = function () {
+        this.clearValue(true);
+    };
     Question.prototype.unbindValue = function () {
         this.clearValue();
     };
@@ -40658,6 +40662,8 @@ var Question = /** @class */ (function (_super) {
         return new _error__WEBPACK_IMPORTED_MODULE_3__["CustomError"](error, this.survey);
     };
     Question.prototype.removeError = function (error) {
+        if (!error)
+            return;
         var errors = this.errors;
         var index = errors.indexOf(error);
         if (index !== -1)
@@ -41102,14 +41108,18 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getDesktopRenderAs = function () {
         return "default";
     };
+    Question.prototype.onBeforeSetCompactRenderer = function () { };
+    Question.prototype.onBeforeSetDesktopRenderer = function () { };
     Question.prototype.processResponsiveness = function (requiredWidth, availableWidth) {
         availableWidth = Math.round(availableWidth);
         if (Math.abs(requiredWidth - availableWidth) > 2) {
             var oldRenderAs = this.renderAs;
             if (requiredWidth > availableWidth) {
+                this.onBeforeSetCompactRenderer();
                 this.renderAs = this.getCompactRenderAs();
             }
             else {
+                this.onBeforeSetDesktopRenderer();
                 this.renderAs = this.getDesktopRenderAs();
             }
             return oldRenderAs !== this.renderAs;
@@ -42338,8 +42348,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isSettingComment = false;
         }
     };
-    QuestionSelectBase.prototype.clearValue = function () {
-        _super.prototype.clearValue.call(this);
+    QuestionSelectBase.prototype.clearValue = function (keepComment) {
+        _super.prototype.clearValue.call(this, keepComment);
         this.prevOtherValue = undefined;
     };
     QuestionSelectBase.prototype.updateCommentFromSurvey = function (newValue) {
@@ -42596,6 +42606,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isLockVisibleChoices = !!question && question.name === val;
             if (!!question && question.name !== val) {
                 question.removeDependedQuestion(this);
+                if (this.isDesignMode && !this.isLoadingFromJson && !!val) {
+                    this.setPropertyValue("choicesFromQuestion", undefined);
+                }
             }
             this.setPropertyValue("choicesFromQuestion", val);
             this.isLockVisibleChoices = false;
@@ -43545,7 +43558,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.clearIncorrectValuesCore = function () {
         var val = this.value;
         if (this.canClearValueAnUnknown(val)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.canClearValueAnUnknown = function (val) {
@@ -43555,7 +43568,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.clearDisabledValuesCore = function () {
         if (this.isValueDisabled(this.value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.clearUnusedValues = function () {
@@ -44983,7 +44996,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                 this.selectAll();
             }
             else {
-                this.clearValue();
+                this.clearValue(true);
             }
         },
         enumerable: false,
@@ -45395,7 +45408,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                     this.value = null;
                 }
                 else {
-                    this.clearValue();
+                    this.clearValue(true);
                 }
             }
             this.isChangingValueOnClearIncorrect = false;
@@ -45426,7 +45439,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             return;
         this.isChangingValueOnClearIncorrect = true;
         if (newValue.length == 0) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = newValue;
@@ -47332,9 +47345,9 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.getInputId = function () {
         return this.inputId + "_0";
     };
-    QuestionDropdownModel.prototype.clearValue = function () {
+    QuestionDropdownModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.lastSelectedItemValue = null;
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
@@ -47344,7 +47357,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.onKeyUp = function (event) {
         var char = event.which || event.keyCode;
         if (char === 46) {
-            this.clearValue();
+            this.clearValue(true);
             event.preventDefault();
             event.stopPropagation();
         }
@@ -48165,9 +48178,9 @@ var QuestionFileModelBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionFileModelBase.prototype.clearValue = function () {
+    QuestionFileModelBase.prototype.clearValue = function (keepComment) {
         this.clearOnDeletingContainer();
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
     };
     QuestionFileModelBase.prototype.clearOnDeletingContainer = function () {
         if (!this.survey)
@@ -50074,7 +50087,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (!val)
                 return;
             if (!Array.isArray(val) || val.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
                 return;
             }
             var newValue = [];
@@ -50086,7 +50099,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (newValue.length == val.length)
                 return;
             if (newValue.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
             }
             else {
                 this.value = newValue;
@@ -52024,10 +52037,10 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             this.detailPanel.runCondition(values, newProps);
         }
     };
-    MatrixDropdownRowModelBase.prototype.clearValue = function () {
+    MatrixDropdownRowModelBase.prototype.clearValue = function (keepComment) {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].clearValue();
+            questions[i].clearValue(keepComment);
         }
     };
     MatrixDropdownRowModelBase.prototype.onAnyValueChanged = function (name, questionName) {
@@ -53433,23 +53446,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.checkIfValueInRowDuplicated = function (checkedRow, cellQuestion) {
         if (!this.generatedVisibleRows)
             return false;
-        var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            var row = this.generatedVisibleRows[i];
-            if (checkedRow === row)
-                continue;
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(row.getValue(cellQuestion.name), cellQuestion.value, true, this.isUniqueCaseSensitive)) {
-                res = true;
-                break;
-            }
-        }
-        if (res) {
-            this.addDuplicationError(cellQuestion);
-        }
-        else {
-            cellQuestion.clearErrors();
-        }
-        return res;
+        return this.isValueInColumnDuplicated(cellQuestion.name, true, checkedRow);
     };
     /**
      * Assigns values to a row.
@@ -53787,51 +53784,104 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.isValueDuplicated = function () {
         if (!this.generatedVisibleRows)
             return false;
-        var columns = this.getUniqueColumns();
-        var res = false;
-        for (var i = 0; i < columns.length; i++) {
-            res = this.isValueInColumnDuplicated(columns[i]) || res;
-        }
-        return res;
-    };
-    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (column) {
-        var keyValues = [];
+        var names = this.getUniqueColumnsNames();
         var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            res =
-                this.isValueDuplicatedInRow(this.generatedVisibleRows[i], column, keyValues) || res;
+        for (var i = 0; i < names.length; i++) {
+            res = this.isValueInColumnDuplicated(names[i], true) || res;
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.getUniqueColumns = function () {
+    QuestionMatrixDropdownModelBase.prototype.getUniqueColumnsNames = function () {
         var res = new Array();
         for (var i = 0; i < this.columns.length; i++) {
             if (this.columns[i].isUnique) {
-                res.push(this.columns[i]);
+                res.push(this.columns[i].name);
             }
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.isValueDuplicatedInRow = function (row, column, keyValues) {
-        var question = row.getQuestionByColumn(column);
-        if (!question || question.isEmpty())
-            return false;
-        var value = question.value;
-        for (var i = 0; i < keyValues.length; i++) {
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(value, keyValues[i], true, this.isUniqueCaseSensitive)) {
-                this.addDuplicationError(question);
-                return true;
+    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (columnName, showErrors, row) {
+        var rows = this.getDuplicatedRows(columnName);
+        if (showErrors) {
+            this.showDuplicatedErrorsInRows(rows, columnName);
+        }
+        this.removeDuplicatedErrorsInRows(rows, columnName);
+        return !!row ? rows.indexOf(row) > -1 : rows.length > 0;
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicatedRows = function (columnName) {
+        var keyValues = {};
+        var res = [];
+        var rows = this.generatedVisibleRows;
+        for (var i = 0; i < rows.length; i++) {
+            var val = undefined;
+            var question = rows[i].getQuestionByName(columnName);
+            if (!!question) {
+                val = question.value;
+            }
+            else {
+                var rowVal = this.getRowValue(i);
+                val = !!rowVal ? rowVal[columnName] : undefined;
+            }
+            if (!this.isValueEmpty(val)) {
+                if (!this.isUniqueCaseSensitive && typeof val === "string") {
+                    val = val.toLocaleLowerCase();
+                }
+                if (!keyValues[val]) {
+                    keyValues[val] = [];
+                }
+                keyValues[val].push(rows[i]);
             }
         }
-        keyValues.push(value);
-        return false;
+        for (var key in keyValues) {
+            if (keyValues[key].length > 1) {
+                keyValues[key].forEach(function (row) { return res.push(row); });
+            }
+        }
+        return res;
+    };
+    QuestionMatrixDropdownModelBase.prototype.showDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        duplicatedRows.forEach(function (row) {
+            var question = row.getQuestionByName(columnName);
+            if (!question && _this.detailPanel.getQuestionByName(columnName)) {
+                row.showDetailPanel();
+                if (row.detailPanel) {
+                    question = row.detailPanel.getQuestionByName(columnName);
+                }
+            }
+            if (question) {
+                row.showDetailPanel();
+                _this.addDuplicationError(question);
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        this.generatedVisibleRows.forEach(function (row) {
+            if (duplicatedRows.indexOf(row) < 0) {
+                var question = row.getQuestionByName(columnName);
+                if (question) {
+                    _this.removeDuplicationError(question);
+                }
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicationError = function (question) {
+        var errors = question.errors;
+        for (var i = 0; i < errors.length; i++) {
+            if (errors[i].getErrorType() === "keyduplicationerror")
+                return errors[i];
+        }
+        return null;
     };
     QuestionMatrixDropdownModelBase.prototype.addDuplicationError = function (question) {
-        var keyError = question.errors.find(function (error) { return error.getErrorType() === "keyduplicationerror"; });
-        if (!keyError) {
+        if (!this.getDuplicationError(question)) {
             question.addError(new _error__WEBPACK_IMPORTED_MODULE_10__["KeyDuplicationError"](this.keyDuplicationError, this));
         }
     };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicationError = function (question) {
+        question.removeError(this.getDuplicationError(question));
+    };
     QuestionMatrixDropdownModelBase.prototype.getFirstQuestionToFocus = function (withError) {
         return this.getFirstCellQuestion(withError);
     };
@@ -53977,6 +54027,9 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 this.onCellValueChanged(row, columnName, combine.rowValue);
             }
         }
+        if (this.getUniqueColumnsNames().indexOf(columnName) > -1) {
+            this.isValueInColumnDuplicated(columnName, !!rowObj);
+        }
     };
     QuestionMatrixDropdownModelBase.prototype.getNewValueOnRowChanged = function (row, columnName, newRowValue, isDeletingValue, newValue) {
         var rowValue = this.getRowValueCore(row, newValue, true);
@@ -57537,13 +57590,11 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         }
         return setRowCount < this.minRowCount;
     };
-    QuestionMatrixDynamicModel.prototype.getUniqueColumns = function () {
-        var res = _super.prototype.getUniqueColumns.call(this);
-        if (!!this.keyName) {
-            var column = this.getColumnByName(this.keyName);
-            if (!!column && res.indexOf(column) < 0) {
-                res.push(column);
-            }
+    QuestionMatrixDynamicModel.prototype.getUniqueColumnsNames = function () {
+        var res = _super.prototype.getUniqueColumnsNames.call(this);
+        var name = this.keyName;
+        if (!!name && res.indexOf(name) < 0) {
+            res.push(name);
         }
         return res;
     };
@@ -62100,7 +62151,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
             var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
                 title: this.clearButtonCaption,
                 id: "sv-clr-btn-" + this.id,
-                action: function () { _this.clearValue(); },
+                action: function () { _this.clearValue(true); },
                 innerCss: this.cssClasses.clearButton,
                 visible: new _base__WEBPACK_IMPORTED_MODULE_4__["ComputedUpdater"](function () { return _this.canShowClearButton; })
             });
@@ -62317,7 +62368,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.createNewArray("rankingChoices");
         _this.createNewArray("unRankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
-            _this.clearValue();
+            _this.clearValue(true);
             _this.setDragDropRankingChoices();
             _this.updateRankingChoicesSync();
         });
@@ -62932,8 +62983,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./dropdownListModel */ "./src/dropdownListModel.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -62966,6 +63018,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var RenderedRatingItem = /** @class */ (function (_super) {
     __extends(RenderedRatingItem, _super);
     function RenderedRatingItem(itemValue, locString) {
@@ -63257,19 +63310,19 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.updateColors = function (themeVariables) {
         if (this.colorMode === "monochrome")
             return;
-        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].isAvailable())
+        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].isAvailable())
             return;
         if (QuestionRatingModel.colorsCalculated)
             return;
         function getRGBColor(colorName, varName) {
             var str = !!themeVariables && themeVariables[colorName];
             if (!str) {
-                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].getDocumentElement());
+                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].getDocumentElement());
                 str = style.getPropertyValue && style.getPropertyValue(varName);
             }
             if (!str)
                 return null;
-            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].createElement("canvas");
+            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].createElement("canvas");
             if (!canvasElement)
                 return null;
             var ctx = canvasElement.getContext("2d");
@@ -63541,7 +63594,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.setValueFromClick = function (value) {
         if (this.value === parseFloat(value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = value;
@@ -63551,7 +63604,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseIn = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         if (this.isReadOnly || !item.itemValue.isEnabled || this.isDesignMode)
             return;
@@ -63570,7 +63623,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseOut = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         this.renderedRateItems.forEach(function (item) { return item.highlight = "none"; });
     };
@@ -63841,6 +63894,11 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.supportResponsiveness = function () {
         return true;
     };
+    QuestionRatingModel.prototype.onBeforeSetCompactRenderer = function () {
+        if (!this.dropdownListModelValue) {
+            this.dropdownListModel = new _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__["DropdownListModel"](this);
+        }
+    };
     QuestionRatingModel.prototype.getCompactRenderAs = function () {
         return (this.displayMode == "buttons") ? "default" : "dropdown";
     };
@@ -63860,6 +63918,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "dropdownListModel", {
         get: function () {
+            if (this.renderAs === "dropdown") {
+                this.onBeforeSetCompactRenderer();
+            }
             return this.dropdownListModelValue;
         },
         set: function (val) {
@@ -64505,9 +64566,9 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         this.value = (arg === null || arg === void 0 ? void 0 : arg.length) ? arg.map(function (r) { return r.content; })[0] : undefined;
         this.valueIsUpdatingInternally = false;
     };
-    QuestionSignaturePadModel.prototype.clearValue = function () {
+    QuestionSignaturePadModel.prototype.clearValue = function (keepComment) {
         this.valueWasChangedFromLastUpload = false;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.refreshCanvas();
     };
     QuestionSignaturePadModel.prototype.endLoadingFromJson = function () {
@@ -64903,9 +64964,9 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
             this.dropdownListModel.dispose();
         }
     };
-    QuestionTagboxModel.prototype.clearValue = function () {
+    QuestionTagboxModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     Object.defineProperty(QuestionTagboxModel.prototype, "showClearButton", {
@@ -69788,9 +69849,6 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 this.renderReadOnlyElement());
         }
         else {
-            if (!this.question["dropdownListModel"]) {
-                this.question["dropdownListModel"] = new survey_core__WEBPACK_IMPORTED_MODULE_1__["DropdownListModel"](this.question);
-            }
             selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
                 this.renderInput(this.question["dropdownListModel"]),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_2__["Popup"], { model: (_b = (_a = this.question) === null || _a === void 0 ? void 0 : _a.dropdownListModel) === null || _b === void 0 ? void 0 : _b.popupModel }));
@@ -75088,7 +75146,7 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
         var clearButton = null;
         if (this.question.showClearButtonInContent) {
             clearButton = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(); }, value: this.question.clearButtonCaption })));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(true); }, value: this.question.clearButtonCaption })));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage },
             this.question.hasColumns
@@ -76150,7 +76208,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             return null;
         var cssClasses = this.question.cssClasses;
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.controls },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValue(); } }, this.question.cssClasses.clearButtonIconId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, "\u2716")));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValue(true); } }, this.question.cssClasses.clearButtonIconId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, "\u2716")));
     };
     return SurveyQuestionSignaturePad;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -81755,7 +81813,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.updateWrapperFormCss = function () {
         this.wrapperFormCss = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_18__["CssClassBuilder"]()
             .append(this.css.rootWrapper)
-            .append(this.css.rootWrapperFixed, this.backgroundImageAttachment === "fixed")
+            .append(this.css.rootWrapperHasImage, !!this.backgroundImage)
+            .append(this.css.rootWrapperFixed, !!this.backgroundImage && this.backgroundImageAttachment === "fixed")
             .toString();
     };
     Object.defineProperty(SurveyModel.prototype, "completedHtml", {
@@ -85513,7 +85572,7 @@ var SurveyModel = /** @class */ (function (_super) {
         page.name = name;
         return page;
     };
-    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue) {
+    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue, questionValueName) {
         if (!!this.editingObj) {
             var prop = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(this.editingObj.getType(), valueName);
             if (!!prop)
@@ -85523,7 +85582,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return newValue;
         var options = {
             name: valueName,
-            question: this.getQuestionByValueName(valueName),
+            question: this.getQuestionByValueName(questionValueName || valueName),
             value: this.getUnbindValue(newValue),
             oldValue: this.getValue(valueName),
         };
@@ -86478,6 +86537,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isTwoValueEquals(newValue, this.getComment(name)))
             return;
         var commentName = name + this.commentSuffix;
+        newValue = this.questionOnValueChanging(commentName, newValue, name);
         if (this.isValueEmpty(newValue)) {
             this.deleteDataValueCore(this.valuesHash, commentName);
         }
@@ -86504,6 +86564,10 @@ var SurveyModel = /** @class */ (function (_super) {
                 question: question,
                 value: newValue,
             });
+            question.comment = newValue;
+            if (question.comment != newValue) {
+                question.comment = newValue;
+            }
         }
     };
     /**
@@ -87651,7 +87715,11 @@ var SurveyModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isCompact", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            onSet: function (newValue, target) {
+                target.updateCss();
+            }
+        })
     ], SurveyModel.prototype, "backgroundImage", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()