survey-react-ui 1.9.77 → 1.9.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.77",
+  "version": "1.9.79",
   "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": "survey-react-ui.d.ts",
   "dependencies": {
-    "survey-core": "1.9.77",
+    "survey-core": "1.9.79",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   }

package/survey-react-ui.d.ts

@@ -694,6 +694,7 @@ declare module "react/tagbox-filter" {
         onChange(e: any): void;
         keyhandler(e: any): void;
         onBlur(e: any): void;
+        onFocus(e: any): void;
         constructor(props: any);
         getStateElement(): DropdownMultiSelectListModel;
         render(): JSX.Element;
@@ -722,6 +723,8 @@ declare module "react/dropdown-base" {
         clear: (event: any) => void;
         keyhandler: (event: any) => void;
         blur: (event: any) => void;
+        focus: (event: any) => void;
+        protected getStateElement(): any;
         protected setValueCore(newValue: any): void;
         protected getValueCore(): any;
         protected renderSelect(cssClasses: any): JSX.Element;
@@ -1144,6 +1147,7 @@ declare module "react/components/list/list" {
         getStateElement(): ListModel<import("survey-core").Action>;
         componentDidMount(): void;
         renderElement(): JSX.Element;
+        renderList(): JSX.Element | null;
         renderItems(): JSX.Element[] | null;
         searchElementContent(): JSX.Element | null;
         emptyContent(): JSX.Element;
@@ -1237,7 +1241,6 @@ declare module "react/image" {
         componentDidMount(): void;
         componentWillUnmount(): void;
         protected get question(): QuestionImageModel;
-        protected canRender(): boolean;
         protected renderElement(): JSX.Element;
     }
 }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.77
+ * surveyjs - Survey JavaScript library v1.9.79
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1183,7 +1183,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.77", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.79", "survey-react-ui");
 
 
 /***/ }),
@@ -2133,14 +2133,19 @@ var List = /** @class */ (function (_super) {
         }
     };
     List.prototype.renderElement = function () {
-        var items = this.renderItems();
-        var ulStyle = { display: this.model.isEmpty ? "none" : null };
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.root, ref: this.listContainerRef },
             this.searchElementContent(),
             this.emptyContent(),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.cssClasses.itemsContainer, style: ulStyle, role: "listbox", onMouseDown: function (e) {
-                    e.preventDefault();
-                }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items)));
+            this.renderList()));
+    };
+    List.prototype.renderList = function () {
+        if (!this.model.renderElements)
+            return null;
+        var items = this.renderItems();
+        var ulStyle = { display: this.model.isEmpty ? "none" : null };
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.cssClasses.itemsContainer, style: ulStyle, role: "listbox", onMouseDown: function (e) {
+                e.preventDefault();
+            }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items));
     };
     List.prototype.renderItems = function () {
         var _this = this;
@@ -2536,7 +2541,9 @@ var NotifierComponent = /** @class */ (function (_super) {
         return this.notifier;
     };
     NotifierComponent.prototype.renderElement = function () {
-        var style = { display: this.notifier.active ? "" : "none" };
+        if (!this.notifier.isDisplayed)
+            return null;
+        var style = { visibility: this.notifier.active ? "visible" : "hidden" };
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.notifier.message),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__["SurveyActionBar"], { model: this.notifier.actionBar })));
@@ -3156,8 +3163,8 @@ var RatingItemStar = /** @class */ (function (_super) {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: 48, iconName: "icon-rating-star", title: this.item.text }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: 48, iconName: "icon-rating-star-2", title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: "icon-rating-star", title: this.item.text }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: "icon-rating-star-2", title: this.item.text })));
     };
     return RatingItemStar;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -3977,8 +3984,15 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
             _this.updateInputDomElement();
         };
+        _this.focus = function (event) {
+            var _a;
+            (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
+        };
         return _this;
     }
+    SurveyQuestionDropdownBase.prototype.getStateElement = function () {
+        return this.question["dropdownListModel"];
+    };
     SurveyQuestionDropdownBase.prototype.setValueCore = function (newValue) {
         this.questionBase.renderedValue = newValue;
     };
@@ -4020,16 +4034,23 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         var valueElement = this.renderValueElement(dropdownListModel);
         var onInputChange = function (e) {
             if (e.target === document.activeElement) {
-                dropdownListModel.filterString = e.target.value;
+                dropdownListModel.inputStringRendered = e.target.value;
             }
         };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            dropdownListModel.showHintPrefix ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.controlValue },
+                dropdownListModel.showHintString ?
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffix },
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.question.readOnlyText, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: dropdownListModel.placeholderRendered, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -4054,9 +4075,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.updateInputDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.question.dropdownListModel.filterString;
+            var newValue = this.question.dropdownListModel.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.question.dropdownListModel.filterString;
+                control.value = this.question.dropdownListModel.inputStringRendered;
             }
         }
     };
@@ -4499,6 +4520,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4517,6 +4539,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionImage = /** @class */ (function (_super) {
     __extends(SurveyQuestionImage, _super);
     function SurveyQuestionImage(props) {
@@ -4540,25 +4563,30 @@ var SurveyQuestionImage = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionImage.prototype.canRender = function () {
-        return _super.prototype.canRender.call(this) && !!this.question.imageLink;
-    };
     SurveyQuestionImage.prototype.renderElement = function () {
+        var _this = this;
         var cssClasses = this.question.getImageCss();
         var style = { objectFit: this.question.imageFit };
         var control = null;
         if (this.question.renderedMode === "image") {
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
                 //alt={item.text || item.value}
-                style: style }));
+                style: style, onLoad: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "video") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style, onLoadedMetadata: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "youtube") {
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("iframe", { className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style }));
         }
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root }, control);
+        var noImage = null;
+        if (!this.question.imageLink || this.question.contentNotLoaded) {
+            noImage = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.noImage },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.noImageSvgIconId, size: 48 })));
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root },
+            control,
+            noImage);
     };
     return SurveyQuestionImage;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -4741,20 +4769,19 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         var style = { objectFit: this.question.imageFit };
         var control = null;
         if (item.locImageLink.renderedHtml && this.question.contentMode === "image") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, alt: item.locText.renderedHtml, style: style, onLoad: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); } }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, alt: item.locText.renderedHtml, style: style, onLoad: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); }, onError: function (event) { item.onErrorHandler(item, event.nativeEvent); } }));
         }
         if (item.locImageLink.renderedHtml && this.question.contentMode === "video") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, style: style, onLoadedMetadata: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); } }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, style: style, onLoadedMetadata: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); }, onError: function (event) { item.onErrorHandler(item, event.nativeEvent); } }));
         }
-        if (!item.locImageLink.renderedHtml) {
+        if (!item.locImageLink.renderedHtml || item.contentNotLoaded) {
             var style_1 = {
                 width: this.question.renderedImageWidth,
                 height: this.question.renderedImageHeight,
                 objectFit: this.question.imageFit
             };
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.itemNoImage, style: style_1 }, cssClasses.itemNoImageSvgIcon ?
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.itemNoImageSvgIcon },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: cssClasses.itemNoImageSvgIconId })) :
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { className: cssClasses.itemNoImageSvgIcon, iconName: this.question.cssClasses.itemNoImageSvgIconId, size: 48 }) :
                 null));
         }
         var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass },
@@ -6705,6 +6732,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     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 ||
@@ -9082,6 +9111,8 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     SurveyQuestionRadioItem.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 ||
@@ -9519,7 +9550,7 @@ var SurveyQuestionText = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: inputClass, type: this.question.inputType, 
                 //ref={this.controlRef}
-                ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: this.question.onBlur, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: this.question.onBlur, onFocus: this.question.onFocus, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
             counter));
     };
     SurveyQuestionText.prototype.renderElement = function () {
@@ -10198,15 +10229,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.updateDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.model.filterString;
+            var newValue = this.model.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.model.filterString;
+                control.value = this.model.inputStringRendered;
             }
         }
     };
     TagboxFilterString.prototype.onChange = function (e) {
         if (e.target === document.activeElement) {
-            this.model.filterString = e.target.value;
+            this.model.inputStringRendered = e.target.value;
         }
     };
     TagboxFilterString.prototype.keyhandler = function (e) {
@@ -10215,12 +10246,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.onBlur = function (e) {
         this.model.onBlur(e);
     };
+    TagboxFilterString.prototype.onFocus = function (e) {
+        this.model.onFocus(e);
+    };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
     };
     TagboxFilterString.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.filterString ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }));
     };
     return TagboxFilterString;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));