@syncfusion/ej2-dropdowns 24.2.7 → 24.2.9

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.7
+*  version : 24.2.9
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@24.2.6",
+  "_id": "@syncfusion/ej2-dropdowns@24.2.8",
   "_inBundle": false,
-  "_integrity": "sha512-kpe97YspOpxho03cZHTvb9PMfHFW1AzulVU2WjKkcu9hWsnO2dDfr3WTTJvuqSAUXNLkk//71q81j3qFdKQ35g==",
+  "_integrity": "sha512-1A5QIAOOlqg4IJjwTgMqNV6xiPutc4FoqN7uskqXelOBGeTgCx4jEpZhh+X9dDCxKXV2iPNOEw2CSFyKTIc2Iw==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.2.6.tgz",
-  "_shasum": "890abdc1d9f968194287b33258c071719ac88f5f",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.2.8.tgz",
+  "_shasum": "7f4577968b80659bca4fea10937d125be58ad1a3",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -45,11 +45,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~24.2.7",
     "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-lists": "~24.2.4",
-    "@syncfusion/ej2-navigations": "~24.2.4",
+    "@syncfusion/ej2-inputs": "~24.2.9",
+    "@syncfusion/ej2-lists": "~24.2.8",
+    "@syncfusion/ej2-navigations": "~24.2.8",
     "@syncfusion/ej2-notifications": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.5"
+    "@syncfusion/ej2-popups": "~24.2.9"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "24.2.7",
+  "version": "24.2.9",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/combo-box/combo-box-model.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';import { FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { DataManager, Query } from '@syncfusion/ej2-data';
+import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';import { FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { DataManager, DataOptions, Predicate, Query } from '@syncfusion/ej2-data';
 import {CustomValueSpecifierEventArgs} from "./combo-box";
 import {DropDownListModel} from "../drop-down-list/drop-down-list-model";
 

package/src/combo-box/combo-box.js

@@ -25,6 +25,7 @@ import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-l
 import { Search } from '../common/incremental-search';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
+import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
 var SPINNER_CLASS = 'e-atc-spinner-icon';
 dropDownListClasses.root = 'e-combobox';
 var inputObject = {
@@ -141,13 +142,39 @@ var ComboBox = /** @class */ (function (_super) {
     ComboBox.prototype.updateValues = function () {
         if (!isNullOrUndefined(this.value)) {
             var li = this.getElementByValue(this.value);
+            var isExistItem = !isNullOrUndefined(li) ? true : false;
+            if (this.enableVirtualization && this.value) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        isExistItem = true;
+                        var dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
+                    }
+                }
+                else {
+                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        isExistItem = true;
+                        var dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
+                    }
+                }
+            }
             if (li) {
                 this.setSelection(li, null);
             }
-            else if (this.allowCustom) {
+            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {
                 this.valueMuteChange(this.value);
             }
-            else {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {
                 this.valueMuteChange(null);
             }
         }

package/src/drop-down-base/drop-down-base.d.ts

@@ -234,6 +234,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     }[] | DataManager | string[] | number[] | boolean[];
     protected isIncrementalRequest: boolean;
     protected itemCount: number;
+    protected initialRemoteRender: boolean;
     /**
 
     /**

package/src/drop-down-base/drop-down-base.js

@@ -506,7 +506,7 @@ var DropDownBase = /** @class */ (function (_super) {
                             _this.trigger('actionComplete', e, function (e) {
                                 if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
                                     _this.isRemoteDataUpdated = true;
-                                    if ((_this.getModuleName() === 'combobox' && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
+                                    if ((_this.getModuleName() === 'combobox' && !_this.initialRemoteRender && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
                                         e.result = e.result.result;
                                     }
                                     if (e.result.length > 0) {

package/src/drop-down-list/drop-down-list.d.ts

@@ -69,7 +69,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private isFilterFocus;
     protected beforePopupOpen: boolean;
     protected initial: boolean;
-    private initRemoteRender;
     private searchBoxHeight;
     private popupObj;
     private popupContentElement;

package/src/drop-down-list/drop-down-list.js

@@ -160,7 +160,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.isFilterFocus = false;
         this.beforePopupOpen = false;
         this.initial = true;
-        this.initRemoteRender = false;
+        this.initialRemoteRender = false;
         this.isNotSearchList = false;
         this.isTyped = false;
         this.isSelected = false;
@@ -451,7 +451,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
-            this.initRemoteRender = true;
+            this.initialRemoteRender = true;
         }
         else {
             this.updateValues();
@@ -1430,7 +1430,6 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.setSelection = function (li, e) {
-        var _this = this;
         if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
             && li.classList.contains(dropDownBaseClasses.selected)))) {
             this.updateSelectedItem(li, e, false, true);
@@ -1439,17 +1438,15 @@ var DropDownList = /** @class */ (function (_super) {
             this.setSelectOptions(li, e);
             if (this.enableVirtualization) {
                 var fields = (this.fields.value) ? this.fields.value : '';
-                if (this.dataSource instanceof DataManager) {
-                    this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', this.value)))
-                        .then(function (e) {
-                        if (e.result.length > 0) {
-                            _this.itemData = e.result[0];
-                            var dataItem = _this.getItemData();
-                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) || (_this.value !== dataItem.value && _this.text === dataItem.text)) {
-                                _this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
-                            }
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        var dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
                         }
-                    });
+                    }
                 }
                 else {
                     var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
@@ -2106,10 +2103,10 @@ var DropDownList = /** @class */ (function (_super) {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
-            if (this.initRemoteRender) {
+            if (this.initialRemoteRender) {
                 this.initial = true;
                 this.activeIndex = this.index;
-                this.initRemoteRender = false;
+                this.initialRemoteRender = false;
                 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('.');
@@ -2117,6 +2114,12 @@ var DropDownList = /** @class */ (function (_super) {
                         return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
                             _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
                     });
+                    if (this.enableVirtualization && this.virtualGroupDataSource) {
+                        checkVal = this.virtualGroupDataSource.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) {
@@ -2433,6 +2436,9 @@ var DropDownList = /** @class */ (function (_super) {
                 _this.getFocusElement();
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
+                    if ((parseInt(_this.popupWidth.toString(), 10) > window.outerWidth) && !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {
+                        _this.popupObj.element.classList.add('e-wide-popup');
+                    }
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'
                         && !_this.allowFiltering && _this.isDropDownClick)) {
@@ -2948,8 +2954,8 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
         });
-        if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
-            this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
+        if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {
+            this.popupObj.element.classList.remove('e-wide-popup');
         }
         var dataSourceCount;
         if (this.dataSource instanceof DataManager) {
@@ -3377,11 +3383,11 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender) {
+                    if (!this_1.initialRemoteRender) {
                         var li = this_1.getElementByText(newProp.text);
                         if (!this_1.checkValidLi(li)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -3430,11 +3436,11 @@ var DropDownList = /** @class */ (function (_super) {
                     this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender) {
+                    if (!this_1.initialRemoteRender) {
                         var item = this_1.getElementByValue(newProp.value);
                         if (!this_1.checkValidLi(item)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -3474,11 +3480,11 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender && this_1.liCollections) {
+                    if (!this_1.initialRemoteRender && this_1.liCollections) {
                         var element = this_1.liCollections[newProp.index];
                         if (!this_1.checkValidLi(element)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -3645,6 +3651,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
+            if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
+                this.isSecondClick = false;
+            }
             this.renderList(e);
         }
         if (this.enableVirtualization && this.listData && this.listData.length) {
@@ -3851,7 +3860,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.getItems = function () {
         if (!this.list) {
             if (this.dataSource instanceof DataManager) {
-                this.initRemoteRender = true;
+                this.initialRemoteRender = true;
             }
             this.renderList();
         }

package/src/mention/mention-model.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvents, compile, Property, EventHandler, Animation, AnimationModel, KeyboardEventArgs, formatUnit, append, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, detach, Event, EmitType, Complex, addClass, removeClass, closest, isUndefined, getValue, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType } from '../drop-down-base/drop-down-base';import { DropDownBase, PopupEventArgs, SelectEventArgs, BeforeOpenEventArgs, dropDownBaseClasses } from '../drop-down-base/drop-down-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';
+import { compile, Property, EventHandler, Animation, AnimationModel, KeyboardEventArgs, formatUnit, append, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, detach, Event, EmitType, Complex, addClass, removeClass, closest, isUndefined, getValue, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings, FilteringEventArgs, FilterType } from '../drop-down-base/drop-down-base';import { DropDownBase, PopupEventArgs, SelectEventArgs, BeforeOpenEventArgs, dropDownBaseClasses } from '../drop-down-base/drop-down-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';
 import {MentionChangeEventArgs} from "./mention";
 
 /**

package/src/mention/mention.d.ts

@@ -41,7 +41,6 @@ export declare class Mention extends DropDownBase {
     private previousSelectedLI;
     private previousItemData;
     private activeIndex;
-    private keyConfigure;
     private isFiltered;
     private beforePopupOpen;
     private listHeight;
@@ -357,6 +356,7 @@ export declare class Mention extends DropDownBase {
      * @returns {void}
      */
     private showWaitingSpinner;
+    private keyDownHandler;
     private keyActionHandler;
     private updateUpDownAction;
     private isSelectFocusItem;

package/src/mention/mention.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { KeyboardEvents, compile, Property, EventHandler, Animation, formatUnit, append, attributes } from '@syncfusion/ej2-base';
+import { compile, Property, EventHandler, Animation, formatUnit, append, attributes } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, detach, Event, Complex, addClass, removeClass, closest, isUndefined, getValue, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
@@ -103,21 +103,6 @@ var Mention = /** @class */ (function (_super) {
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
-        this.keyConfigure = {
-            tab: 'tab',
-            enter: '13',
-            escape: '27',
-            end: '35',
-            home: '36',
-            down: '40',
-            up: '38',
-            pageUp: '33',
-            pageDown: '34',
-            open: 'alt+40',
-            close: 'shift+tab',
-            hide: 'alt+38',
-            space: '32'
-        };
     };
     /**
      * Execute before render the list items
@@ -163,9 +148,7 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.keyboardModule = new KeyboardEvents(this.inputElement, {
-                keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
-            });
+            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
         }
     };
     /**
@@ -217,6 +200,47 @@ var Mention = /** @class */ (function (_super) {
             }
         }
     };
+    Mention.prototype.keyDownHandler = function (e) {
+        var isKeyAction = true;
+        switch (e.keyCode) {
+            case 38:
+                e.action = e.altKey ? 'hide' : 'up';
+                break;
+            case 40:
+                e.action = e.altKey ? 'open' : 'down';
+                break;
+            case 33:
+                e.action = 'pageUp';
+                break;
+            case 34:
+                e.action = 'pageDown';
+                break;
+            case 36:
+                e.action = 'home';
+                break;
+            case 35:
+                e.action = 'end';
+                break;
+            case 9:
+                e.action = e.shiftKey ? 'close' : 'tab';
+                break;
+            case 27:
+                e.action = 'escape';
+                break;
+            case 32:
+                e.action = 'space';
+                break;
+            case 13:
+                e.action = 'enter';
+                break;
+            default:
+                isKeyAction = false;
+                break;
+        }
+        if (isKeyAction) {
+            this.keyActionHandler(e);
+        }
+    };
     Mention.prototype.keyActionHandler = function (e) {
         var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
             || e.action === 'home' || e.action === 'end');
@@ -295,7 +319,7 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.unBindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.keyboardModule.destroy();
+            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), true);
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -332,7 +356,7 @@ var Mention = /** @class */ (function (_super) {
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
-            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+            if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
                 && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
                 (this.list && this.list.querySelectorAll('ul').length > 0)) {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
@@ -840,6 +864,9 @@ var Mention = /** @class */ (function (_super) {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
+        if (this.list.classList.contains('e-nodata')) {
+            this.list = null;
+        }
     };
     Mention.prototype.onDocumentClick = function (e) {
         var target = e.target;
@@ -950,6 +977,7 @@ var Mention = /** @class */ (function (_super) {
         return coordinates;
     };
     Mention.prototype.initValue = function () {
+        this.isDataFetched = false;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -975,7 +1003,7 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.wireListEvents = function () {
-        EventHandler.add(this.list, 'click', this.onMouseClick, this);
+        EventHandler.add(this.list, 'mousedown', this.onMouseClick, this);
         EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
     };
@@ -985,7 +1013,7 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.unWireListEvents = function () {
-        EventHandler.remove(this.list, 'click', this.onMouseClick);
+        EventHandler.remove(this.list, 'mousedown', this.onMouseClick);
         EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
     };
@@ -1000,6 +1028,7 @@ var Mention = /** @class */ (function (_super) {
         var delay = 100;
         this.closePopup(delay, e);
         this.inputElement.focus();
+        e.preventDefault();
     };
     Mention.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
         var _this = this;

package/styles/bootstrap-dark.css

@@ -531,7 +531,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/bootstrap.css

@@ -531,7 +531,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/bootstrap4.css

@@ -578,7 +578,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/bootstrap5-dark.css

@@ -597,7 +597,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/bootstrap5.css

@@ -597,7 +597,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/_layout.scss

@@ -53,7 +53,7 @@
     }
   }
 
-  .e-popup.e-ddl-device.e-popup-close {
+  .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;
   }

package/styles/drop-down-list/bootstrap-dark.css

@@ -171,7 +171,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/bootstrap.css

@@ -171,7 +171,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/bootstrap4.css

@@ -218,7 +218,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/bootstrap5-dark.css

@@ -231,7 +231,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/bootstrap5.css

@@ -231,7 +231,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/fabric-dark.css

@@ -147,7 +147,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/fabric.css

@@ -140,7 +140,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/fluent-dark.css

@@ -211,7 +211,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/fluent.css

@@ -211,7 +211,7 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }

package/styles/drop-down-list/highcontrast-light.css

@@ -158,7 +158,7 @@
   padding: 4px 0;
 }
 
-.e-popup.e-ddl-device.e-popup-close {
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
 }