survey-react-ui 1.11.14 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.11.14",
+  "version": "1.12.2",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -21,7 +21,7 @@
   },
   "typings": "./typings/src/entries/react-ui.d.ts",
   "peerDependencies": {
-    "survey-core": "1.11.14",
+    "survey-core": "1.12.2",
     "react": "^16.5.0 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.2.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.14
+ * surveyjs - Survey JavaScript library v1.12.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -103,7 +103,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "./src/entries/react-ui.ts":
 /*!**********************************************!*\
-  !*** ./src/entries/react-ui.ts + 95 modules ***!
+  !*** ./src/entries/react-ui.ts + 96 modules ***!
   \**********************************************/
 /*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, Model, settings, surveyLocalization, surveyStrings */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
@@ -345,6 +345,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     function SurveyElementBase(props) {
         var _this = _super.call(this, props) || this;
         _this._allowComponentUpdate = true;
+        _this.prevStateElements = [];
         return _this;
     }
     SurveyElementBase.renderLocString = function (locStr, style, key) {
@@ -364,9 +365,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.componentWillUnmount = function () {
         this.unMakeBaseElementsReact();
+        this.disableStateElementsRerenderEvent(this.getStateElements());
     };
     SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
         this.makeBaseElementsReact();
+        var stateElements = this.getStateElements();
+        this.disableStateElementsRerenderEvent(((_a = this.prevStateElements) !== null && _a !== void 0 ? _a : []).filter(function (el) { return !stateElements.includes(el); }));
+        this.prevStateElements = [];
         this.getStateElements().forEach(function (el) {
             el.afterRerender();
         });
@@ -381,6 +387,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (this._allowComponentUpdate) {
             this.unMakeBaseElementsReact();
+            this.prevStateElements = this.getStateElements();
         }
         return this._allowComponentUpdate;
     };
@@ -448,10 +455,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
-            els[i].disableOnElementRenderedEvent();
             this.unMakeBaseElementReact(els[i]);
         }
     };
+    SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
+        els.forEach(function (el) {
+            el.disableOnElementRenderedEvent();
+        });
+    };
     SurveyElementBase.prototype.getStateElements = function () {
         var el = this.getStateElement();
         return !!el ? [el] : [];
@@ -1643,28 +1654,27 @@ var title_content_TitleContent = /** @class */ (function (_super) {
         };
         var spans = [];
         if (element.isRequireTextOnStart) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         var questionNumber = element.no;
         if (questionNumber) {
-            var panelNumber = !!cssClasses.panel ? cssClasses.panel.number : undefined;
-            spans.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || panelNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
+            spans.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: element.cssTitleNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
             spans.push(getSpaceSpan("num-sp"));
         }
         if (element.isRequireTextBeforeTitle) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         spans.push(reactquestion_element_SurveyElementBase.renderLocString(element.locTitle, null, "q_title"));
         if (element.isRequireTextAfterTitle) {
             spans.push(getSpaceSpan("req-sp"));
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
         }
         return spans;
     };
-    TitleContent.prototype.renderRequireText = function (element, cssClasses) {
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "req-text", key: "req-text", className: cssClasses.requiredText || cssClasses.panel.requiredText, "aria-hidden": true }, element.requiredText));
+    TitleContent.prototype.renderRequireText = function (element) {
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "req-text", key: "req-text", className: element.cssRequiredText, "aria-hidden": true }, element.requiredText));
     };
     return TitleContent;
 }(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Component));
@@ -1840,6 +1850,56 @@ ReactElementFactory.Instance.registerElement("sv-character-counter", function (p
     return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(character_counter_CharacterCounterComponent, props);
 });
 
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/text-area.tsx
+var text_area_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var text_area_TextAreaComponent = /** @class */ (function (_super) {
+    text_area_extends(TextAreaComponent, _super);
+    function TextAreaComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.initialValue = _this.viewModel.getTextValue() || "";
+        return _this;
+    }
+    Object.defineProperty(TextAreaComponent.prototype, "viewModel", {
+        get: function () {
+            return this.props.viewModel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextAreaComponent.prototype.canRender = function () {
+        return !!this.viewModel.question;
+    };
+    TextAreaComponent.prototype.renderElement = function () {
+        var _this = this;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: function (textarea) { return (_this.viewModel.setElement(textarea)); }, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
+    };
+    TextAreaComponent.prototype.componentWillUnmount = function () {
+        this.viewModel.dispose();
+    };
+    return TextAreaComponent;
+}(reactquestion_element_SurveyElementBase));
+
+ReactElementFactory.Instance.registerElement("sv-text-area", function (props) {
+    return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(text_area_TextAreaComponent, props);
+});
+
 // CONCATENATED MODULE: ./packages/survey-react-ui/src/reactquestion_comment.tsx
 var reactquestion_comment_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1866,31 +1926,21 @@ var reactquestion_comment_SurveyQuestionComment = /** @class */ (function (_supe
     function SurveyQuestionComment(props) {
         return _super.call(this, props) || this;
     }
+    SurveyQuestionComment.prototype.renderCharacterCounter = function () {
+        var counter = null;
+        if (!!this.question.getMaxLength()) {
+            counter = external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter });
+        }
+        return counter;
+    };
     SurveyQuestionComment.prototype.renderElement = function () {
-        var _this = this;
-        var onBlur = function (e) {
-            if (!_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(e);
-            }
-            _this.question.onBlur(e);
-        };
-        var onInput = function (event) {
-            if (_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(event);
-            }
-            else {
-                _this.question.updateElement();
-            }
-            var newValue = event.target.value;
-            _this.question.updateRemainingCharacterCounter(newValue);
-        };
-        var placeholder = this.question.renderedPlaceholder;
         if (this.question.isReadOnlyRenderDiv()) {
             return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", null, this.question.value);
         }
-        var counter = !!this.question.getMaxLength() ? (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
+        var counter = this.renderCharacterCounter();
+        var textAreaModel = this.props.question.textAreaModel;
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](external_root_React_commonjs2_react_commonjs_react_amd_react_["Fragment"], null,
-            external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onFocus: function (event) { _this.question.onFocus(event); }, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "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, style: { resize: this.question.resizeStyle } }),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](text_area_TextAreaComponent, { viewModel: textAreaModel }),
             counter));
     };
     return SurveyQuestionComment;
@@ -1900,61 +1950,22 @@ var reactquestion_comment_SurveyQuestionCommentItem = /** @class */ (function (_
     reactquestion_comment_extends(SurveyQuestionCommentItem, _super);
     function SurveyQuestionCommentItem(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = { comment: _this.getComment() || "" };
+        _this.textAreaModel = _this.getTextAreaModel();
         return _this;
     }
-    SurveyQuestionCommentItem.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.updateDomElement = function () {
-        if (!!this.control) {
-            var control = this.control;
-            var newValue = this.getComment() || "";
-            if (!external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["Helpers"].isTwoValueEquals(newValue, control.value, false, true, false)) {
-                control.value = newValue;
-            }
-        }
-    };
-    SurveyQuestionCommentItem.prototype.setControl = function (element) {
-        if (!!element) {
-            this.control = element;
-        }
-    };
     SurveyQuestionCommentItem.prototype.canRender = function () {
         return !!this.props.question;
     };
-    SurveyQuestionCommentItem.prototype.onCommentChange = function (event) {
-        this.props.question.onCommentChange(event);
-    };
-    SurveyQuestionCommentItem.prototype.onCommentInput = function (event) {
-        this.props.question.onCommentInput(event);
-    };
-    SurveyQuestionCommentItem.prototype.getComment = function () {
-        return this.props.question.comment;
-    };
-    SurveyQuestionCommentItem.prototype.setComment = function (value) {
-        this.props.question.comment = value;
-    };
-    SurveyQuestionCommentItem.prototype.getId = function () {
-        return this.props.question.commentId;
-    };
-    SurveyQuestionCommentItem.prototype.getPlaceholder = function () {
-        return this.props.question.renderedCommentPlaceholder;
+    SurveyQuestionCommentItem.prototype.getTextAreaModel = function () {
+        return this.props.question.commentTextAreaModel;
     };
     SurveyQuestionCommentItem.prototype.renderElement = function () {
-        var _this = this;
         var question = this.props.question;
-        var className = this.props.otherCss || this.cssClasses.comment;
         if (question.isReadOnlyRenderDiv()) {
-            var comment = this.getComment() || "";
+            var comment = this.textAreaModel.getTextValue() || "";
             return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", null, comment);
         }
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](text_area_TextAreaComponent, { viewModel: this.textAreaModel }));
     };
     return SurveyQuestionCommentItem;
 }(ReactSurveyElement));
@@ -1964,23 +1975,8 @@ var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
     function SurveyQuestionOtherValueItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    SurveyQuestionOtherValueItem.prototype.onCommentChange = function (event) {
-        this.props.question.onOtherValueChange(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.onCommentInput = function (event) {
-        this.props.question.onOtherValueInput(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.getComment = function () {
-        return this.props.question.otherValue;
-    };
-    SurveyQuestionOtherValueItem.prototype.setComment = function (value) {
-        this.props.question.otherValue = value;
-    };
-    SurveyQuestionOtherValueItem.prototype.getId = function () {
-        return this.props.question.otherId;
-    };
-    SurveyQuestionOtherValueItem.prototype.getPlaceholder = function () {
-        return this.props.question.otherPlaceholder;
+    SurveyQuestionOtherValueItem.prototype.getTextAreaModel = function () {
+        return this.props.question.otherTextAreaModel;
     };
     return SurveyQuestionOtherValueItem;
 }(reactquestion_comment_SurveyQuestionCommentItem));
@@ -3596,7 +3592,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasHeadItems) {
             return this.question.headItems.map(function (item, ii) {
-                return _this.renderItem("item_h" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -3604,7 +3600,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -3615,7 +3611,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ii, item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -3631,8 +3627,8 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var renderedItems = [];
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var key = "item" + i;
-            var renderedItem = this.renderItem(key, item, i == 0, cssClasses, "" + i);
+            var key = "item" + item.value;
+            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
             if (!!renderedItem) {
                 renderedItems.push(renderedItem);
             }
@@ -3651,9 +3647,9 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionCheckbox.prototype.renderItem = function (key, item, isFirst, cssClasses, index) {
+    SurveyQuestionCheckbox.prototype.renderItem = function (item, isFirst, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -3679,6 +3675,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         _this.handleOnChange = function (event) {
             _this.question.clickItemHandler(_this.item, event.target.checked);
         };
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         return _this;
     }
     SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
@@ -3726,11 +3723,20 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionCheckboxItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
-        if (!this.question)
-            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -3755,7 +3761,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
                 this.cssClasses.materialDecorator ?
@@ -3767,6 +3773,18 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
                 itemLabel),
             otherItem));
     };
+    SurveyQuestionCheckboxItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionCheckboxItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionCheckboxItem;
 }(ReactSurveyElement));
 
@@ -4291,10 +4309,10 @@ var tagbox_filter_TagboxFilterString = /** @class */ (function (_super) {
         this.model.inputKeyHandler(e);
     };
     TagboxFilterString.prototype.onBlur = function (e) {
-        this.model.onBlur(e);
+        this.question.onBlur(e);
     };
     TagboxFilterString.prototype.onFocus = function (e) {
-        this.model.onFocus(e);
+        this.question.onFocus(e);
     };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
@@ -5509,7 +5527,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -5521,7 +5539,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ci + ii, item, value, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, value, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -5538,7 +5556,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var renderedItem = this.renderItem("item" + i, item, value, cssClasses, "" + i);
+            var renderedItem = this.renderItem(item, value, cssClasses, "" + i);
             items.push(renderedItem);
         }
         return items;
@@ -5554,9 +5572,9 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionRadiogroup.prototype.renderItem = function (key, item, value, cssClasses, index) {
+    SurveyQuestionRadiogroup.prototype.renderItem = function (item, value, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -5582,6 +5600,7 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     reactquestion_radiogroup_extends(SurveyQuestionRadioItem, _super);
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         _this.handleOnChange = _this.handleOnChange.bind(_this);
         _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
@@ -5650,12 +5669,23 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     SurveyQuestionRadioItem.prototype.canRender = function () {
         return !!this.question && !!this.item;
     };
+    SurveyQuestionRadioItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionRadioItem.prototype.renderElement = function () {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
@@ -5666,6 +5696,18 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
                     null,
                 itemLabel)));
     };
+    SurveyQuestionRadioItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionRadioItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionRadioItem;
 }(ReactSurveyElement));
 
@@ -6123,6 +6165,9 @@ var drag_drop_icon_SurveyQuestionMatrixDynamicDragDropIcon = /** @class */ (func
         configurable: true
     });
     SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderElement = function () {
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, this.renderIcon());
+    };
+    SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderIcon = function () {
         if (this.question.iconDragElement) {
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("svg", { className: this.question.cssClasses.dragElementDecorator },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("use", { xlinkHref: this.question.iconDragElement })));
@@ -6753,7 +6798,7 @@ var paneldynamic_add_btn_SurveyQuestionPanelDynamicAddButton = /** @class */ (fu
         if (!this.question.canAddPanel)
             return null;
         var btnText = this.renderLocString(this.question.locPanelAddText);
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
@@ -9168,7 +9213,7 @@ ReactElementFactory.Instance.registerElement(external_root_Survey_commonjs2_surv
 
 
 
-Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.11.14", "survey-react-ui");
+Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.2", "survey-react-ui");
 
 
 /***/ }),