@syncfusion/ej2-dropdowns 20.4.54 → 21.1.36

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

@@ -6,6 +6,9 @@ import { Input, TextBox } from '@syncfusion/ej2-inputs';
 import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
+/**
+ * IncrementalSearch module file
+ */
 var queryString = '';
 var prevString = '';
 var matches$1 = [];
@@ -95,6 +98,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                 var fieldValue_1 = fields.text.split('.');
                 dataSource.filter(function (data) {
                     Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
+                        /* eslint-disable security/detect-object-injection */
                         if (type === 'object' && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value].toString() || type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1) {
                             filterValue = type === 'object' ? data[value] : data;
                         }
@@ -102,6 +106,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                 });
             }
             text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            /* eslint-disable security/detect-non-literal-regexp */
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
@@ -114,9 +119,11 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                 return state_1.value;
         }
         return itemData;
+        /* eslint-enable security/detect-non-literal-regexp */
     }
     return itemData;
 }
+/* eslint-enable security/detect-object-injection */
 function escapeCharRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -129,7 +136,6 @@ function resetIncrementalSearchValues(elementId) {
     }
 }
 
-/* eslint-disable jsdoc/require-param, valid-jsdoc */
 /**
  * Function helps to find which highlightSearch is to call based on your data.
  *
@@ -149,6 +155,7 @@ function highlightSearch(element, query, ignoreCase, type) {
         query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
         var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?
             '(' + query + ')$' : '(' + query + ')';
+        // eslint-disable-next-line security/detect-non-literal-regexp
         findTextNode(element, new RegExp(replaceQuery, ignoreRegex));
     }
 }
@@ -1701,7 +1708,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             else {
                 if (this.allowFiltering && this.getModuleName() !== 'autocomplete'
-                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) && this.actionCompleteData.list.length > 0) {
+                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) &&
+                    this.actionCompleteData.list.length > 0) {
                     this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);
                 }
                 this.resetFocusElement();
@@ -1751,6 +1759,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 else if (htmlAttr === 'style') {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
+                else if (htmlAttr === 'aria-label') {
+                    if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+                        this.inputElement.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
+                    }
+                    else {
+                        this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
+                    }
+                }
                 else {
                     var defaultAttr = ['title', 'id', 'placeholder',
                         'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
@@ -2122,7 +2138,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
         this.isTabKey = !this.isPopupOpen && e.action === 'tab';
-        var isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';
         var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
             || e.action === 'home' || e.action === 'end');
         if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {
@@ -2206,7 +2221,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
                 index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
             }
-            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                : this.liCollections[index];
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -2524,8 +2540,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         if (Browser.info.name !== 'mozilla') {
             if (this.targetElement()) {
-                attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
-                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
+                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id !== '' ? this.inputElement.id : this.element.id });
                 this.targetElement().removeAttribute('aria-live');
             }
         }
@@ -3010,7 +3025,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 if (this.value && this.dataSource instanceof DataManager) {
                     var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     var fieldValue_1 = this.fields.value.split('.');
-                    var checkVal = list.some(function (x) { return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ? _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value; });
+                    var checkVal = list.some(function (x) {
+                        return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
+                            _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
+                    });
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))
                             .then(function (e) {
@@ -3060,7 +3078,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DropDownList.prototype.checkFieldValue = function (list, fieldValue) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var checkField = list;
         fieldValue.forEach(function (value) {
             checkField = checkField[value];
@@ -3100,8 +3120,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {
-        if (index != null) {
-            this.actionCompleteData.ulElement.insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);
+        if (index !== null) {
+            this.actionCompleteData.ulElement.
+                insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);
         }
         else {
             this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));
@@ -3145,7 +3166,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
                 var popupEle = _this.createElement('div', {
-                    id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass != null ? _this.cssClass : '')
+                    id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
                 var searchBox = _this.setSearchBox(popupEle);
                 _this.listHeight = formatUnit(_this.popupHeight);
@@ -3291,10 +3312,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 if (_this.isReact) {
                     _this.clearTemplate(['headerTemplate', 'footerTemplate']);
                 }
-                var isResetItem = (_this.getModuleName() === 'autocomplete') ? true : false;
                 _this.isNotSearchList = false;
                 _this.isDocumentClick = false;
                 _this.destroyPopup();
+                EventHandler.remove(document, 'mousedown', _this.onDocumentClick);
                 if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
                     _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
@@ -3556,8 +3577,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
         this.isFilterFocus = false;
-        this.popupObj.destroy();
-        detach(this.popupObj.element);
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
     };
     DropDownList.prototype.clickOnBackIcon = function () {
         this.hidePopup();
@@ -3592,7 +3615,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
         }
-        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.inputWrapper = Input.createInput({
@@ -3634,6 +3657,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
         this.targetElement().setAttribute('tabindex', this.tabIndex);
+        if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+            this.inputElement.setAttribute('aria-label', this.getModuleName());
+        }
+        else {
+            attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
+        }
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
@@ -3979,14 +4008,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'valueTemplate':
-                    if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate != null) {
+                    if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate !== null) {
                         this_1.setValueTemplate();
                     }
                     break;
                 case 'allowFiltering':
                     if (this_1.allowFiltering) {
-                        this_1.actionCompleteData = { ulElement: this_1.ulElement,
-                            list: this_1.listData, isUpdated: true };
+                        this_1.actionCompleteData = {
+                            ulElement: this_1.ulElement,
+                            list: this_1.listData, isUpdated: true
+                        };
                         this_1.actionData = this_1.actionCompleteData;
                         this_1.updateSelectElementData(this_1.allowFiltering);
                     }
@@ -4056,6 +4087,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DropDownList.prototype.setInputValue = function (newProp, oldProp) {
     };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
@@ -4079,16 +4111,18 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.getModuleName = function () {
         return 'dropdownlist';
     };
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
      * @returns {void}
      */
     DropDownList.prototype.showPopup = function (e) {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (!this.enabled) {
             return;
         }
-        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&
+        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
             this.actionData.list && this.actionData.ulElement) {
             this.actionCompleteData = this.actionData;
             this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);
@@ -4117,7 +4151,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             };
             history.pushState({}, '');
         }
-        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData))) {
+        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) ||
+            this.list.classList.contains(dropDownBaseClasses.noData))) {
             this.renderPopup(e);
         }
     };
@@ -5477,7 +5512,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null || (this.value && this.value.length === 0) || this.chipWrapper) {
+            else if (this.value === null || (this.value && this.value.length === 0) || this.checkWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -5589,36 +5624,36 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
                 if (htmlAttr === 'class') {
-                    this.inputWrapper.classList.add(this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.classList.add(this.htmlAttributes["" + htmlAttr]);
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
                     this.setProperties({ enabled: false }, true);
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes["" + htmlAttr])) {
                     this.setProperties({ readonly: true }, true);
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else {
                     var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
                         'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     var validateAttr = ['name', 'required'];
                     if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                     else if (defaultAttr.indexOf(htmlAttr) > -1) {
                         if (htmlAttr === 'placeholder') {
-                            Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputEle);
+                            Input.setPlaceholder(this.htmlAttributes["" + htmlAttr], this.inputEle);
                         }
                         else {
-                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -6036,7 +6071,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
+        else if (this.inputWrapper != null && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     };
@@ -6441,7 +6476,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.ensurePlaceHolder = function () {
-        if (this.value && this.value.length === 0) {
+        if (isNullOrUndefined(this.value) || (this.value && this.value.length === 0)) {
             removeClass([this.inputEle], CHIP_INPUT);
             if (this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
@@ -8231,6 +8266,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     ComboBox.prototype.filter = function (dataSource, query, fields) {
         _super.prototype.filter.call(this, dataSource, query, fields);
     };
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
@@ -8238,6 +8274,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
      * @deprecated
      */
     ComboBox.prototype.showPopup = function (e) {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         _super.prototype.showPopup.call(this, e);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
@@ -14095,7 +14132,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
     ListBox.prototype.setCssClass = function () {
         var wrap = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
         if (this.cssClass) {
-            addClass([wrap], this.cssClass.split(' '));
+            addClass([wrap], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             addClass([this.list], 'e-rtl');
@@ -15744,7 +15781,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     text = value;
                 }
                 if (typeof (text) === 'string') {
-                    text = text.split("\\").join("\\\\");
+                    text = text.split('\\').join('\\\\');
                 }
                 li = _this.list.querySelector('[data-value="' + text + '"]');
                 if (li) {
@@ -15948,7 +15985,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                         removeClass([wrap], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([wrap], newProp.cssClass.split(' '));
+                        addClass([wrap], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     break;
                 case 'enableRtl':
@@ -16293,8 +16330,11 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.render = function () {
-        this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
-            document.querySelector(this.target) : this.target : this.element;
+        var isSelector = typeof this.target === 'string';
+        this.inputElement = !isNullOrUndefined(this.target) ?
+            this.checkAndUpdateInternalComponent(isSelector
+                ? document.querySelector(this.target)
+                : this.target) : this.element;
         if (this.isContentEditable(this.inputElement)) {
             this.inputElement.setAttribute('contenteditable', 'true');
             addClass([this.inputElement], ['e-mention']);
@@ -16302,6 +16342,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 addClass([this.inputElement], ['e-editable-element']);
             }
         }
+        this.inputElement.setAttribute('role', 'textbox');
         this.queryString = this.elementValue();
         this.wireEvent();
     };
@@ -16337,6 +16378,18 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             detach(this.spinnerTemplateElement);
         }
     };
+    Mention.prototype.checkAndUpdateInternalComponent = function (targetElement) {
+        if (!this.isVue && targetElement.classList.contains('e-richtexteditor')) {
+            return targetElement.querySelector('.e-content');
+        }
+        if (this.isVue && targetElement.nodeName === 'TEXTAREA' && targetElement.classList.contains('e-rte-hidden')) {
+            var parentElement = targetElement.parentElement;
+            if (parentElement && parentElement.classList.contains('e-richtexteditor')) {
+                return parentElement.querySelector('.e-content');
+            }
+        }
+        return targetElement;
+    };
     /**
      * Shows the spinner loader.
      *
@@ -16393,7 +16446,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 if (this.isPopupOpen) {
                     e.preventDefault();
                     if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {
-                        this.setValue(e);
+                        this.updateSelectedItem(this.selectedLI, e, false, true);
                     }
                 }
                 break;
@@ -16439,6 +16492,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.onKeyUp = function (e) {
         var rangetextContent;
+        this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
+        if (document.activeElement != this.inputElement) {
+            this.inputElement.focus();
+        }
         if (this.isContentEditable(this.inputElement)) {
             this.range = this.getCurrentRange();
             rangetextContent = this.range.startContainer.textContent.split('');
@@ -16449,10 +16506,6 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         var Regex = new RegExp(this.mentionChar, 'g');
         var charRegex = new RegExp('[a-zA-Z]', 'g');
         if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
-            if ((e.keyCode === 37 || e.keyCode === 39) && !isNullOrUndefined(currentRange) &&
-                currentRange.indexOf(this.mentionChar) === -1 && this.isPopupOpen) {
-                this.hidePopup();
-            }
             return;
         }
         if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
@@ -16467,7 +16520,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
-            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange)) {
+            else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange) && (e.code !== 'ArrowDown' && e.code !== 'ArrowUp')) {
                 this.hidePopup();
                 this.lineBreak = true;
             }
@@ -16497,6 +16550,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 this.initValue();
             }
             if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
+                this.didPopupOpenByTypingInitialChar = true;
                 this.showPopup();
                 if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
                     this.showWaitingSpinner();
@@ -16723,6 +16777,17 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      */
     Mention.prototype.showPopup = function () {
         this.beforePopupOpen = true;
+        if (document.activeElement != this.inputElement) {
+            this.inputElement.focus();
+        }
+        this.queryString = this.didPopupOpenByTypingInitialChar ? this.queryString : '';
+        this.didPopupOpenByTypingInitialChar = false;
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+        }
+        if (!this.isTyped) {
+            this.resetList(this.dataSource, this.fields);
+        }
         if (isNullOrUndefined(this.list)) {
             this.initValue();
         }
@@ -16857,7 +16922,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         });
     };
     Mention.prototype.setHeight = function (popupEle) {
-        if (this.popupHeight !== 'auto') {
+        if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
             popupEle.style.maxHeight = formatUnit(this.popupHeight);
         }
@@ -16886,7 +16951,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 mostRecentTriggerCharPos = idx;
             }
         }
-        return mostRecentTriggerCharPos;
+        return mostRecentTriggerCharPos ? mostRecentTriggerCharPos : 0;
     };
     Mention.prototype.initializePopup = function (element, offsetValue, left) {
         var _this = this;
@@ -16964,14 +17029,37 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             var selectedNodePosition = this.getTriggerCharPosition();
             globalRange = this.range;
             range = document.createRange();
-            range.setStart(globalRange.startContainer, selectedNodePosition);
-            range.setEnd(globalRange.startContainer, selectedNodePosition);
+            if (this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1 && this.isTyped) {
+                range.setStart(globalRange.startContainer, selectedNodePosition);
+                range.setEnd(globalRange.startContainer, selectedNodePosition);
+            }
+            else {
+                range.setStart(globalRange.startContainer, globalRange.startOffset);
+                range.setEnd(globalRange.startContainer, globalRange.endOffset);
+            }
+            this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect();
+            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] : range.getBoundingClientRect();
         }
         var doc = document.documentElement;
         var windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
         var windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+        var width = 0;
+        if (!isNullOrUndefined(range) && range.getBoundingClientRect().top === 0) {
+            for (var i = 0; i < this.range.startContainer.childNodes.length; i++) {
+                if (this.range.startContainer.childNodes[i].nodeType !== Node.TEXT_NODE && this.range.startContainer.childNodes[i].textContent.trim() !== '') {
+                    width += this.range.startContainer.childNodes[i].getClientRects()[0].width;
+                }
+                else if (this.range.startContainer.childNodes[i].textContent !== '') {
+                    var span_1 = document.createElement("span");
+                    span_1.innerHTML = this.range.startContainer.childNodes[i].nodeValue;
+                    document.body.appendChild(span_1);
+                    var textNodeWidth = span_1.offsetWidth;
+                    document.body.removeChild(span_1);
+                    width += textNodeWidth;
+                }
+            }
+        }
         if (!this.isContentEditable(this.inputElement)) {
             coordinates = {
                 top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
@@ -16983,7 +17071,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         else {
             coordinates = {
                 top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10) - (this.isCollided ? 10 : 0),
-                left: rect.left + windowLeft
+                left: rect.left + windowLeft + width
             };
         }
         return coordinates;
@@ -17034,6 +17122,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         if (!this.isValidLI(li)) {
             return;
         }
+        this.isSelected = true;
         this.setSelection(li, e);
         var delay = 100;
         this.closePopup(delay, e);
@@ -17046,7 +17135,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.removeHover();
         var value = this.getFormattedValue(li.getAttribute('data-value'));
         var selectedData = this.getDataByValue(value);
-        if (!preventSelect && !isNullOrUndefined(e)) {
+        if (!preventSelect && !isNullOrUndefined(e) && !(e.action === "down" || e.action === "up")) {
             var items = this.detachChanges(selectedData);
             this.isSelected = true;
             var eventArgs = {
@@ -17059,6 +17148,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             this.trigger('select', eventArgs, function (eventArgs) {
                 if (eventArgs.cancel) {
                     li.classList.remove(dropDownBaseClasses.selected);
+                    _this.isSelected = false;
+                    _this.isSelectCancel = true;
                 }
                 else {
                     _this.selectEventCallback(li, selectedData, value);
@@ -17212,6 +17303,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         var selection = this.inputElement.ownerDocument.getSelection();
         var startPos = this.getTriggerCharPosition();
         textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
+        if (this.isSelectCancel) {
+            this.isSelectCancel = false;
+            return;
+        }
         if (dataItem.text !== null) {
             value = this.mentionVal(dataItem.text);
         }
@@ -17236,8 +17331,21 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
             globalRange = this.range;
             range = document.createRange();
-            range.setStart(globalRange.startContainer, startPos);
-            range.setEnd(globalRange.startContainer, endPos);
+            if (((this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1 && this.isTyped) || this.getTextRange() && this.getTextRange().trim() === '@')) {
+                range.setStart(globalRange.startContainer, startPos);
+                range.setEnd(globalRange.startContainer, endPos);
+            }
+            else {
+                if (globalRange.commonAncestorContainer.textContent.trim() !== '' && !isNullOrUndefined(globalRange.commonAncestorContainer.textContent.trim()) && this.getTextRange() && this.getTextRange().lastIndexOf(this.mentionChar) !== -1) {
+                    range.setStart(globalRange.startContainer, globalRange.startOffset - 1);
+                    range.setEnd(globalRange.startContainer, globalRange.endOffset - 1);
+                }
+                else {
+                    range.setStart(globalRange.startContainer, globalRange.startOffset);
+                    range.setEnd(globalRange.startContainer, globalRange.endOffset);
+                }
+            }
+            this.isTyped = false;
             range.deleteContents();
             var element = this.createElement('div');
             element.innerHTML = value;