@syncfusion/ej2-dropdowns 20.2.43 → 20.2.46

package/dist/es6/ej2-dropdowns.es5.js

@@ -257,6 +257,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.isAngular = false;
         _this.isPreventChange = false;
         _this.isDynamicDataChange = false;
+        _this.addedNewItem = false;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -485,7 +486,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownBase.prototype.initialize = function () {
+    DropDownBase.prototype.initialize = function (e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
         if (this.element.tagName === 'UL') {
@@ -504,7 +505,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     };
     /**
@@ -612,7 +613,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.setListData = function (dataSource, fields, query) {
+    DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
         var _this = this;
         fields = fields ? fields : this.fields;
         var ulElement;
@@ -659,7 +660,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
                         if (!localDataArgs.cancel) {
                             ulElement = _this.renderItems(localDataArgs.result, fields);
-                            _this.onActionComplete(ulElement, localDataArgs.result);
+                            _this.onActionComplete(ulElement, localDataArgs.result, event);
                             if (_this.groupTemplate) {
                                 _this.renderGroupTemplate(ulElement);
                             }
@@ -1049,7 +1050,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    DropDownBase.prototype.resetList = function (dataSource, fields, query) {
+    DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1059,8 +1060,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     dataSource = this.selectData;
                 }
             }
-            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
-            this.setListData(dataSource, fields, query);
+            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
+            this.addedNewItem = false;
+            this.setListData(dataSource, fields, query, e);
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
@@ -1152,7 +1154,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @private
      * @returns {void}
      */
-    DropDownBase.prototype.render = function (isEmptyData) {
+    DropDownBase.prototype.render = function (e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1176,7 +1178,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.setEnableRtl();
         this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     };
     /**
@@ -1317,6 +1319,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         if (selectedItemValue || itemIndex === 0) {
             this.updateSelection();
         }
+        this.addedNewItem = true;
     };
     DropDownBase.prototype.validationAttribute = function (target, hidden) {
         var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
@@ -1611,8 +1614,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
-    DropDownList.prototype.renderList = function (isEmptyData) {
-        _super.prototype.render.call(this, isEmptyData);
+    DropDownList.prototype.renderList = function (e, isEmptyData) {
+        _super.prototype.render.call(this, e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -2097,7 +2100,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             var isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -2136,7 +2139,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -2328,7 +2331,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -2338,7 +2341,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
@@ -2983,26 +2986,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 this.initial = false;
             }
-            else if (this.getModuleName() === 'autocomplete' && this.value && this.typedString === '' && !(this.dataSource instanceof DataManager)) {
-                var checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
-                var checkValue = list.some(function (x) { return x[checkFields_1] === _this.value; });
-                var query = new Query();
-                if (!checkValue) {
-                    new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', this.value)))
-                        .then(function (e) {
-                        if (e.result.length > 0) {
-                            _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
-                            _this.addItem(e.result, list.length);
-                            _this.updateValues();
-                        }
-                        else {
-                            _this.updateValues();
-                        }
-                    });
-                }
-                else {
-                    this.updateValues();
-                }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -3025,7 +3010,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     };
@@ -3097,7 +3082,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
-    DropDownList.prototype.renderPopup = function () {
+    DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -3200,7 +3185,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 var animModel = { name: 'FadeIn', duration: 100 };
                 _this.beforePopupOpen = true;
                 var popupInstance = _this.popupObj;
-                var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -3522,14 +3507,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.element.tagName === 'INPUT') {
             this.inputElement = this.element;
             if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {
-                this.inputElement.setAttribute('role', 'textbox');
+                this.inputElement.setAttribute('role', 'combobox');
             }
             if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
                 this.inputElement.setAttribute('type', 'text');
             }
         }
         else {
-            this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -3578,6 +3563,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
+        if (this.targetElement() === this.inputElement) {
+            this.element.removeAttribute('aria-labelledby');
+        }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
             this.initValue();
         }
@@ -3608,12 +3596,22 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        var floatLabelElement = this.inputWrapper.container.getElementsByClassName('e-float-text')[0];
+        if (!isNullOrUndefined(this.element.id) && this.element.id !== '' && !isNullOrUndefined(floatLabelElement)) {
+            floatLabelElement.id = 'label_' + this.element.id.replace(/ /g, '_');
+            attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });
+        }
         this.renderComplete();
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -3805,6 +3803,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldText(oldProp.text);
                             }
@@ -3846,6 +3847,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldValue(oldProp.value);
                             }
@@ -3964,6 +3968,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    DropDownList.prototype.setInputValue = function (newProp, oldProp) {
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -3990,7 +3996,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownList.prototype.showPopup = function () {
+    DropDownList.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -4010,11 +4016,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     };
-    DropDownList.prototype.invokeRenderPopup = function () {
+    DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
@@ -4024,7 +4030,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             history.pushState({}, '');
         }
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+            this.renderPopup(e);
         }
         attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     };
@@ -7817,7 +7823,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ComboBox.prototype.incrementalSearch = function (e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -8080,8 +8086,8 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      * @deprecated
      */
-    ComboBox.prototype.showPopup = function () {
-        _super.prototype.showPopup.call(this);
+    ComboBox.prototype.showPopup = function (e) {
+        _super.prototype.showPopup.call(this, e);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -8318,10 +8324,10 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     function AutoComplete(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.isFiltered = false;
-        _this.searchList = false;
-        return _this;
+        var _this_1 = _super.call(this, options, element) || this;
+        _this_1.isFiltered = false;
+        _this_1.searchList = false;
+        return _this_1;
     }
     /**
      * Initialize the event handler
@@ -8369,17 +8375,17 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
-        var _this = this;
+        var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         if (isNullOrUndefined(this.list)) {
-            _super.prototype.renderList.call(this, true);
+            _super.prototype.renderList.call(this, e, true);
         }
         this.queryString = this.filterInput.value;
         if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
             this.queryString = this.queryString === '' ? null : this.queryString;
             this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
             return;
         }
         this.isSelected = false;
@@ -8391,15 +8397,15 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                 if (eventArgs.cancel) {
                     return;
                 }
-                _this.isFiltered = true;
-                _this.filterAction(dataSource, query, fields);
+                _this_1.isFiltered = true;
+                _this_1.filterAction(dataSource, query, fields);
             },
             cancel: false
         };
         this.trigger('filtering', eventArgs, function (eventArgs) {
-            if (!eventArgs.cancel && !_this.isFiltered && !eventArgs.preventDefaultAction) {
-                _this.searchList = true;
-                _this.filterAction(_this.dataSource, null, _this.fields);
+            if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {
+                _this_1.searchList = true;
+                _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);
             }
         });
     };
@@ -8416,13 +8422,13 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         this.isFiltered = true;
         this.filterAction(dataSource, query, fields);
     };
-    AutoComplete.prototype.filterAction = function (dataSource, query, fields) {
+    AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {
         this.beforePopupOpen = true;
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
-            this.resetList(dataSource, fields, query);
+            this.resetList(dataSource, fields, query, e);
         }
         else {
-            this.hidePopup();
+            this.hidePopup(e);
             this.beforePopupOpen = false;
         }
         this.renderReactTemplates();
@@ -8479,18 +8485,18 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         }
     };
     AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {
-        var _this = this;
+        var _this_1 = this;
         var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);
         if (isNullOrUndefined(fields.itemCreated)) {
             fields.itemCreated = function (e) {
-                if (_this.highlight) {
-                    if (_this.element.tagName === _this.getNgDirective() && _this.itemTemplate) {
+                if (_this_1.highlight) {
+                    if (_this_1.element.tagName === _this_1.getNgDirective() && _this_1.itemTemplate) {
                         setTimeout(function () {
-                            highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                            highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                         }, 0);
                     }
                     else {
-                        highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                        highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                     }
                 }
             };
@@ -8498,10 +8504,10 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         else {
             var itemCreated_1 = fields.itemCreated;
             fields.itemCreated = function (e) {
-                if (_this.highlight) {
-                    highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
+                if (_this_1.highlight) {
+                    highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                 }
-                itemCreated_1.apply(_this, [e]);
+                itemCreated_1.apply(_this_1, [e]);
             };
         }
         return fields;
@@ -8509,9 +8515,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.isFiltering = function () {
         return true;
     };
-    AutoComplete.prototype.renderPopup = function () {
+    AutoComplete.prototype.renderPopup = function (e) {
         this.list.scrollTop = 0;
-        _super.prototype.renderPopup.call(this);
+        _super.prototype.renderPopup.call(this, e);
     };
     AutoComplete.prototype.isEditTextBox = function () {
         return true && this.inputElement.value.trim() !== '';
@@ -8523,13 +8529,37 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.isSelectFocusItem = function (element) {
         return false;
     };
+    AutoComplete.prototype.setInputValue = function (newProp, oldProp) {
+        var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
+        var value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
+            var checkFields_1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
+            var listLength_1 = this.getItems().length;
+            var query = new Query();
+            var _this_2 = this;
+            new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1_1, 'equal', value)))
+                .then(function (e) {
+                if (e.result.length > 0) {
+                    _this_2.value = checkFields_1_1 !== '' ? e.result[0][_this_2.fields.value].toString() : e.result[0].toString();
+                    _this_2.addItem(e.result, listLength_1);
+                    _this_2.updateValues();
+                }
+                else {
+                    newProp && newProp.text ? _this_2.setOldText(oldValue) : newProp && newProp.value ? _this_2.setOldValue(oldValue) : _this_2.updateValues();
+                }
+            });
+        }
+        else if (newProp) {
+            newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);
+        }
+    };
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
      * @deprecated
      */
-    AutoComplete.prototype.showPopup = function () {
+    AutoComplete.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -8540,10 +8570,10 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         this.beforePopupOpen = true;
         this.preventAutoFill = true;
         if (isNullOrUndefined(this.list)) {
-            this.renderList();
+            this.renderList(e);
         }
         else {
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
         }
     };
     /**
@@ -8702,9 +8732,11 @@ var LABELBOTTOM = 'e-label-bottom';
 function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {
     var floatLinelement = createElement('span', { className: FLOATLINE });
     var floatLabelElement = createElement('label', { className: FLOATTEXT });
+    var id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
+    element.id = id;
     if (!isNullOrUndefined(element.id) && element.id !== '') {
         floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        attributes(element, { 'aria-labelledby': floatLabelElement.id });
+        attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
         floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);
@@ -9045,7 +9077,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.onPopupShown = function () {
+    MultiSelect.prototype.onPopupShown = function (e) {
         var _this = this;
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -9057,7 +9089,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             history.pushState({}, '');
         }
         var animModel = { name: 'FadeIn', duration: 100 };
-        var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
                 _this.focusAtFirstListItem();
@@ -9281,7 +9313,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     };
     MultiSelect.prototype.refreshSelection = function () {
@@ -9573,7 +9605,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -9867,7 +9899,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -11058,7 +11090,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -11205,7 +11237,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        _super.prototype.render.call(this, isEmptyData);
+        _super.prototype.render.call(this, null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     };
@@ -12478,7 +12510,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
      *
      * @returns {void}
      */
-    MultiSelect.prototype.showPopup = function () {
+    MultiSelect.prototype.showPopup = function (e) {
         var _this = this;
         if (!this.enabled) {
             return;
@@ -12488,7 +12520,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    _super.prototype.render.call(_this);
+                    _super.prototype.render.call(_this, e);
                     if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
@@ -12504,7 +12536,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     _this.beforePopupOpen = false;
                     return;
                 }
-                _this.onPopupShown();
+                _this.onPopupShown(e);
             }
         });
     };
@@ -12611,7 +12643,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';