@syncfusion/ej2-dropdowns 20.4.54 → 21.1.35

package/dist/es6/ej2-dropdowns.es2015.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
+ */
 let queryString = '';
 let prevString = '';
 let matches$1 = [];
@@ -95,6 +98,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                 let fieldValue = fields.text.split('.');
                 dataSource.filter(function (data) {
                     Array.prototype.slice.call(fieldValue).forEach(function (value) {
+                        /* eslint-disable security/detect-object-injection */
                         if (type === 'object' && checkField.textContent.toString().indexOf(data[value]) !== -1 && checkField.getAttribute('data-value') === data[fields.value].toString() || type === 'string' && checkField.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;
@@ -109,9 +114,11 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
             }
         }
         return itemData;
+        /* eslint-enable security/detect-non-literal-regexp */
     }
     return itemData;
 }
+/* eslint-enable security/detect-object-injection */
 function escapeCharRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -124,7 +131,6 @@ function resetIncrementalSearchValues(elementId) {
     }
 }
 
-/* eslint-disable jsdoc/require-param, valid-jsdoc */
 /**
  * Function helps to find which highlightSearch is to call based on your data.
  *
@@ -144,6 +150,7 @@ function highlightSearch(element, query, ignoreCase, type) {
         query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
         const replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?
             '(' + query + ')$' : '(' + query + ')';
+        // eslint-disable-next-line security/detect-non-literal-regexp
         findTextNode(element, new RegExp(replaceQuery, ignoreRegex));
     }
 }
@@ -877,8 +884,8 @@ let DropDownBase = class DropDownBase extends Component {
         }
     }
     scrollStop(e) {
-        let target = !isNullOrUndefined(e) ? e.target : this.list;
-        let liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
+        const target = !isNullOrUndefined(e) ? e.target : this.list;
+        const liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         const topIndex = Math.round(target.scrollTop / liHeight);
         const liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         for (let i = topIndex; i > -1; i--) {
@@ -1652,7 +1659,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             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();
@@ -1701,6 +1709,14 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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 {
                     const defaultAttr = ['title', 'id', 'placeholder',
                         'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
@@ -2071,7 +2087,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         const preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
         this.isTabKey = !this.isPopupOpen && e.action === 'tab';
-        const isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';
         const 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) {
@@ -2155,7 +2170,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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;
             }
-            const nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            const nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                : this.liCollections[index];
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -2425,9 +2441,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             detach(this.valueTempElement);
             this.inputElement.style.display = 'block';
         }
-        let clearIcon = dropDownListClasses.clearIcon;
-        let isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
-        let clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
+        const clearIcon = dropDownListClasses.clearIcon;
+        const isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');
+        const clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
@@ -2472,8 +2488,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         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');
             }
         }
@@ -2955,7 +2970,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 if (this.value && this.dataSource instanceof DataManager) {
                     const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     const fieldValue = this.fields.value.split('.');
-                    const checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ? this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
+                    const checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                        this.checkFieldValue(x, fieldValue) === this.value : x[checkField] === this.value);
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', this.value)))
                             .then((e) => {
@@ -3005,7 +3021,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     checkFieldValue(list, fieldValue) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let checkField = list;
         fieldValue.forEach((value) => {
             checkField = checkField[value];
@@ -3043,8 +3061,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     actionCompleteDataUpdate(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));
@@ -3087,7 +3106,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.trigger('beforeOpen', args, (args) => {
             if (!args.cancel) {
                 const 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 : '')
                 });
                 const searchBox = this.setSearchBox(popupEle);
                 this.listHeight = formatUnit(this.popupHeight);
@@ -3231,10 +3250,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                 if (this.isReact) {
                     this.clearTemplate(['headerTemplate', 'footerTemplate']);
                 }
-                const 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);
@@ -3494,8 +3513,10 @@ let DropDownList = class DropDownList extends DropDownBase {
     destroyPopup() {
         this.isPopupOpen = false;
         this.isFilterFocus = false;
-        this.popupObj.destroy();
-        detach(this.popupObj.element);
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
     }
     clickOnBackIcon() {
         this.hidePopup();
@@ -3530,7 +3551,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         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({
@@ -3572,6 +3593,12 @@ let DropDownList = class DropDownList extends DropDownBase {
         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();
@@ -3916,14 +3943,16 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'valueTemplate':
-                    if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {
+                    if (!isNullOrUndefined(this.itemData) && this.valueTemplate !== null) {
                         this.setValueTemplate();
                     }
                     break;
                 case 'allowFiltering':
                     if (this.allowFiltering) {
-                        this.actionCompleteData = { ulElement: this.ulElement,
-                            list: this.listData, isUpdated: true };
+                        this.actionCompleteData = {
+                            ulElement: this.ulElement,
+                            list: this.listData, isUpdated: true
+                        };
                         this.actionData = this.actionCompleteData;
                         this.updateSelectElementData(this.allowFiltering);
                     }
@@ -3987,6 +4016,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setInputValue(newProp, oldProp) {
     }
     setCssClass(newClass, oldClass) {
@@ -4010,16 +4040,18 @@ let DropDownList = class DropDownList extends DropDownBase {
     getModuleName() {
         return 'dropdownlist';
     }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
      * @returns {void}
      */
     showPopup(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);
@@ -4048,7 +4080,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             };
             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);
         }
     }
@@ -5377,7 +5410,7 @@ let DropDownTree = class DropDownTree extends Component {
             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);
             }
         }
@@ -5487,36 +5520,36 @@ let DropDownTree = class DropDownTree extends Component {
         if (Object.keys(this.htmlAttributes).length) {
             for (const htmlAttr of Object.keys(this.htmlAttributes)) {
                 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 {
                     const defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
                         'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     const 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}`]);
                     }
                 }
             }
@@ -5931,7 +5964,7 @@ let DropDownTree = class DropDownTree extends Component {
             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);
         }
     }
@@ -6336,7 +6369,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     ensurePlaceHolder() {
-        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);
@@ -7687,7 +7720,7 @@ let ComboBox = class ComboBox extends DropDownList {
             const dataSource = this.sortedData;
             const type = this.typeOfData(dataSource).typeof;
             const activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
-            var activeElement = activeItem.item;
+            const activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
                 const height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
@@ -8106,6 +8139,7 @@ let ComboBox = class ComboBox extends DropDownList {
     filter(dataSource, query, fields) {
         super.filter(dataSource, query, fields);
     }
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
@@ -8113,6 +8147,7 @@ let ComboBox = class ComboBox extends DropDownList {
      * @deprecated
      */
     showPopup(e) {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         super.showPopup(e);
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
@@ -13884,7 +13919,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     setCssClass() {
         const 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');
@@ -15504,7 +15539,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     text = value;
                 }
                 if (typeof (text) === 'string') {
-                    text = text.split("\\").join("\\\\");
+                    text = text.split('\\').join('\\\\');
                 }
                 li = this.list.querySelector('[data-value="' + text + '"]');
                 if (li) {
@@ -15706,7 +15741,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                         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':
@@ -16034,8 +16069,11 @@ let Mention = class Mention extends DropDownBase {
      * @returns {void}
      */
     render() {
-        this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
-            document.querySelector(this.target) : this.target : this.element;
+        const 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']);
@@ -16043,6 +16081,7 @@ let Mention = class Mention extends DropDownBase {
                 addClass([this.inputElement], ['e-editable-element']);
             }
         }
+        this.inputElement.setAttribute('role', 'textbox');
         this.queryString = this.elementValue();
         this.wireEvent();
     }
@@ -16078,6 +16117,18 @@ let Mention = class Mention extends DropDownBase {
             detach(this.spinnerTemplateElement);
         }
     }
+    checkAndUpdateInternalComponent(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')) {
+            const parentElement = targetElement.parentElement;
+            if (parentElement && parentElement.classList.contains('e-richtexteditor')) {
+                return parentElement.querySelector('.e-content');
+            }
+        }
+        return targetElement;
+    }
     /**
      * Shows the spinner loader.
      *
@@ -16134,7 +16185,7 @@ let Mention = class Mention extends DropDownBase {
                 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;
@@ -16180,6 +16231,10 @@ let Mention = class Mention extends DropDownBase {
     }
     onKeyUp(e) {
         let 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('');
@@ -16190,10 +16245,6 @@ let Mention = class Mention extends DropDownBase {
         const Regex = new RegExp(this.mentionChar, 'g');
         const 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 ||
@@ -16208,7 +16259,7 @@ let Mention = class Mention extends DropDownBase {
                 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;
             }
@@ -16238,6 +16289,7 @@ let Mention = class Mention extends DropDownBase {
                 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();
@@ -16462,6 +16514,17 @@ let Mention = class Mention extends DropDownBase {
      */
     showPopup() {
         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();
         }
@@ -16594,7 +16657,7 @@ let Mention = class Mention extends DropDownBase {
         });
     }
     setHeight(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);
         }
@@ -16623,7 +16686,7 @@ let Mention = class Mention extends DropDownBase {
                 mostRecentTriggerCharPos = idx;
             }
         }
-        return mostRecentTriggerCharPos;
+        return mostRecentTriggerCharPos ? mostRecentTriggerCharPos : 0;
     }
     initializePopup(element, offsetValue, left) {
         this.popupObj = new Popup(element, {
@@ -16700,14 +16763,37 @@ let Mention = class Mention extends DropDownBase {
             const 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();
         }
         const doc = document.documentElement;
         const windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
         const windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+        let width = 0;
+        if (!isNullOrUndefined(range) && range.getBoundingClientRect().top === 0) {
+            for (let 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 !== '') {
+                    let span = document.createElement("span");
+                    span.innerHTML = this.range.startContainer.childNodes[i].nodeValue;
+                    document.body.appendChild(span);
+                    let textNodeWidth = span.offsetWidth;
+                    document.body.removeChild(span);
+                    width += textNodeWidth;
+                }
+            }
+        }
         if (!this.isContentEditable(this.inputElement)) {
             coordinates = {
                 top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
@@ -16719,7 +16805,7 @@ let Mention = class Mention extends DropDownBase {
         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;
@@ -16770,6 +16856,7 @@ let Mention = class Mention extends DropDownBase {
         if (!this.isValidLI(li)) {
             return;
         }
+        this.isSelected = true;
         this.setSelection(li, e);
         const delay = 100;
         this.closePopup(delay, e);
@@ -16781,7 +16868,7 @@ let Mention = class Mention extends DropDownBase {
         this.removeHover();
         const value = this.getFormattedValue(li.getAttribute('data-value'));
         const selectedData = this.getDataByValue(value);
-        if (!preventSelect && !isNullOrUndefined(e)) {
+        if (!preventSelect && !isNullOrUndefined(e) && !(e.action === "down" || e.action === "up")) {
             const items = this.detachChanges(selectedData);
             this.isSelected = true;
             const eventArgs = {
@@ -16794,6 +16881,8 @@ let Mention = class Mention extends DropDownBase {
             this.trigger('select', eventArgs, (eventArgs) => {
                 if (eventArgs.cancel) {
                     li.classList.remove(dropDownBaseClasses.selected);
+                    this.isSelected = false;
+                    this.isSelectCancel = true;
                 }
                 else {
                     this.selectEventCallback(li, selectedData, value);
@@ -16947,6 +17036,10 @@ let Mention = class Mention extends DropDownBase {
         const selection = this.inputElement.ownerDocument.getSelection();
         const 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);
         }
@@ -16971,8 +17064,21 @@ let Mention = class Mention extends DropDownBase {
             }
             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();
             const element = this.createElement('div');
             element.innerHTML = value;