@syncfusion/ej2-dropdowns 20.3.59 → 20.4.38

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 } from '@syncfusion/ej2-popups';import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';
+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 {MentionChangeEventArgs} from "./mention";
 
 /**
@@ -62,7 +62,7 @@ export interface MentionModel {
     minLength?: number;
 
     /**
-     * Specifies the order to sort the data source. The possible sort orders are, 
+     * Specifies the order to sort the data source. The possible sort orders are,
      * * `None` - The data source is not sorted.
      * * `Ascending` - The data source is sorted in ascending order.
      * * `Descending` - The data source is sorted in descending order.

package/src/mention/mention.d.ts

@@ -45,6 +45,7 @@ export declare class Mention extends DropDownBase {
     private isFiltered;
     private beforePopupOpen;
     private listHeight;
+    private isListResetted;
     private range;
     private displayTempElement;
     private isCollided;
@@ -337,6 +338,7 @@ export declare class Mention extends DropDownBase {
     /**
      * Hides the spinner loader.
      *
+     * @private
      * @returns {void}
      */
     hideSpinner(): void;
@@ -383,6 +385,7 @@ export declare class Mention extends DropDownBase {
     hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
     private closePopup;
     private renderPopup;
+    private setHeight;
     private checkCollision;
     private getTriggerCharPosition;
     private initializePopup;
@@ -418,7 +421,7 @@ export declare class Mention extends DropDownBase {
     private updateMentionValue;
     private mentionVal;
     private setDisplayTemplate;
-    renderTemplates(callBack?: any): void;
+    private renderTemplates;
     private setSpinnerTemplate;
     private onChangeEvent;
     private detachMentionChanges;

package/src/mention/mention.js

@@ -22,7 +22,7 @@ import { isNullOrUndefined, detach, Event, Complex, addClass, removeClass, close
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Popup, isCollide, createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';
 import { highlightSearch, revertHighlightSearch } from '../common/highlight-search';
 /**
  * The Mention component is used to list someone or something based on user input in textarea, input,
@@ -99,6 +99,7 @@ var Mention = /** @class */ (function (_super) {
         this.isFiltered = false;
         this.beforePopupOpen = false;
         this.initRemoteRender = false;
+        this.isListResetted = false;
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
@@ -165,6 +166,7 @@ var Mention = /** @class */ (function (_super) {
     /**
      * Hides the spinner loader.
      *
+     * @private
      * @returns {void}
      */
     Mention.prototype.hideSpinner = function () {
@@ -220,6 +222,7 @@ var Mention = /** @class */ (function (_super) {
                 break;
             case 'tab':
                 if (this.isPopupOpen) {
+                    e.preventDefault();
                     var li = this.list.querySelector('.' + dropDownBaseClasses.selected);
                     if (li) {
                         this.setSelection(li, e);
@@ -259,7 +262,8 @@ var Mention = /** @class */ (function (_super) {
             var startIndex = 0;
             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);
             }
@@ -284,9 +288,14 @@ var Mention = /** @class */ (function (_super) {
         }
         var currentRange = this.getTextRange();
         var lastWordRange = this.getLastLetter(currentRange);
+        // eslint-disable-next-line security/detect-non-literal-regexp
         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 ||
@@ -315,7 +324,7 @@ var Mention = /** @class */ (function (_super) {
                 if (!this.isContentEditable(this.inputElement)) {
                     this.showPopup();
                 }
-                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement) {
+                else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement && e.keyCode !== 9) {
                     this.showPopup();
                 }
             }
@@ -344,8 +353,12 @@ var Mention = /** @class */ (function (_super) {
             this.searchLists(e);
         }
         else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
-            this.resetList(this.dataSource, this.fields);
+            this.searchLists(e);
+            if (!this.isListResetted) {
+                this.resetList(this.dataSource, this.fields);
+            }
         }
+        this.isListResetted = false;
     };
     Mention.prototype.isMatchedText = function () {
         var isMatched = false;
@@ -379,7 +392,7 @@ var Mention = /** @class */ (function (_super) {
         this.activeIndex = null;
         var eventArgs = {
             preventDefaultAction: false,
-            text: this.elementValue(),
+            text: this.queryString,
             updateData: function (dataSource, query, fields) {
                 if (eventArgs.cancel) {
                     return;
@@ -397,8 +410,9 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.filterAction = function (dataSource, query, fields) {
         this.beforePopupOpen = true;
-        if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
+        if (this.queryString.length >= this.minLength) {
             this.resetList(dataSource, fields, query);
+            this.isListResetted = true;
         }
         else {
             if (this.isPopupOpen) {
@@ -520,12 +534,14 @@ var Mention = /** @class */ (function (_super) {
             }
         }
         else {
-            var selectedElem = this.range.startContainer;
-            if (!isNullOrUndefined(selectedElem)) {
-                var workingNodeContent = selectedElem.textContent;
-                var selectStartOffset = this.range.startOffset;
-                if (workingNodeContent && selectStartOffset >= 0) {
-                    text = workingNodeContent.substring(0, selectStartOffset);
+            if (this.range) {
+                var selectedElem = this.range.startContainer;
+                if (!isNullOrUndefined(selectedElem)) {
+                    var workingNodeContent = selectedElem.textContent;
+                    var selectStartOffset = this.range.startOffset;
+                    if (workingNodeContent && selectStartOffset >= 0) {
+                        text = workingNodeContent.substring(0, selectStartOffset);
+                    }
                 }
             }
         }
@@ -549,6 +565,10 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.showPopup = function () {
+        this.beforePopupOpen = true;
+        if (isNullOrUndefined(this.list)) {
+            this.initValue();
+        }
         this.renderPopup();
         attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
         if (this.selectedElementID == null) {
@@ -614,18 +634,13 @@ var Mention = /** @class */ (function (_super) {
                     }
                 }
                 append([_this.list], popupEle_1);
-                if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) || !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
+                if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||
+                    !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
                     document.body.appendChild(popupEle_1);
                 }
                 var coordinates_1;
                 popupEle_1.style.visibility = 'hidden';
-                if (_this.popupHeight !== 'auto') {
-                    _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
-                    popupEle_1.style.maxHeight = formatUnit(_this.popupHeight);
-                }
-                else {
-                    popupEle_1.style.height = 'auto';
-                }
+                _this.setHeight(popupEle_1);
                 var offsetValue = 0;
                 var left = 0;
                 _this.initializePopup(popupEle_1, offsetValue, left);
@@ -648,6 +663,9 @@ var Mention = /** @class */ (function (_super) {
                     if (!eventArgs.cancel) {
                         _this.renderReactTemplates();
                         _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        if (isNullOrUndefined(_this.getTriggerCharPosition())) {
+                            return;
+                        }
                         coordinates_1 = _this.getCoordinates(_this.inputElement, _this.getTriggerCharPosition());
                         if (!_this.isCollided) {
                             popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(coordinates_1.left.toString(), 'px;\nposition: absolute;\n display: block;');
@@ -657,6 +675,8 @@ var Mention = /** @class */ (function (_super) {
                             _this.isCollided = false;
                         }
                         popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';
+                        _this.setHeight(popupEle_1);
+                        popupEle_1.style.zIndex = _this.zIndex === 1000 ? getZindexPartial(popupEle_1).toString() : _this.zIndex.toString();
                     }
                     else {
                         _this.beforePopupOpen = false;
@@ -669,6 +689,15 @@ var Mention = /** @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.setHeight = function (popupEle) {
+        if (this.popupHeight !== 'auto') {
+            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            popupEle.style.maxHeight = formatUnit(this.popupHeight);
+        }
+        else {
+            popupEle.style.height = 'auto';
+        }
+    };
     Mention.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
             var collision = isCollide(popupEle);
@@ -749,7 +778,9 @@ var Mention = /** @class */ (function (_super) {
             computed = getComputedStyle(element);
             div.style.position = 'absolute';
             div.style.visibility = 'hidden';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             properties.forEach(function (prop) {
+                // eslint-disable-next-line security/detect-object-injection
                 div.style[prop] = computed[prop];
             });
             div.textContent = element.value.substring(0, position);
@@ -783,13 +814,12 @@ var Mention = /** @class */ (function (_super) {
         }
         else {
             coordinates = {
-                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize),
+                top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize, 10),
                 left: rect.left + windowLeft
             };
         }
         return coordinates;
     };
-    ;
     Mention.prototype.initValue = function () {
         this.renderList();
         if (this.dataSource instanceof DataManager) {
@@ -985,8 +1015,8 @@ var Mention = /** @class */ (function (_super) {
         }
         return items;
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Mention.prototype.setValue = function (e) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             if (!isNullOrUndefined(this.displayTemplate)) {
                 this.setDisplayTemplate();
@@ -1014,7 +1044,7 @@ var Mention = /** @class */ (function (_super) {
         var selection = this.inputElement.ownerDocument.getSelection();
         var startPos = this.getTriggerCharPosition();
         textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
-        if (dataItem.value !== null) {
+        if (dataItem.text !== null) {
             value = this.mentionVal(dataItem.text);
         }
         if (!this.isContentEditable(this.inputElement)) {
@@ -1046,6 +1076,7 @@ var Mention = /** @class */ (function (_super) {
             var frag = document.createDocumentFragment();
             var node = void 0;
             var lastNode = void 0;
+            // eslint-disable-next-line no-cond-assign
             while (node = element.firstChild) {
                 lastNode = frag.appendChild(node);
             }
@@ -1101,6 +1132,7 @@ var Mention = /** @class */ (function (_super) {
                 this.displayTempElement.appendChild(displayCompTemp[i]);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             this.renderTemplates();
         }
@@ -1110,6 +1142,7 @@ var Mention = /** @class */ (function (_super) {
             });
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Mention.prototype.renderTemplates = function (callBack) {
         this.renderReactTemplates(callBack);
     };
@@ -1139,6 +1172,7 @@ var Mention = /** @class */ (function (_super) {
                 this.spinnerTemplateElement.appendChild(spinnerCompTemp[i]);
             }
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!this.isReact) {
             this.renderTemplates();
             this.popupObj.element.appendChild(this.spinnerTemplateElement);
@@ -1233,7 +1267,7 @@ var Mention = /** @class */ (function (_super) {
         this.setHover(currentLi);
     };
     Mention.prototype.setHover = function (li) {
-        if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
+        if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
             this.removeHover();
             addClass([li], dropDownBaseClasses.hover);
         }
@@ -1258,8 +1292,13 @@ var Mention = /** @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.search = function (text, positionX, positionY) {
-        if ((this.ignoreCase && (text === this.elementValue() || text === this.elementValue().toLowerCase()))
-            || !this.ignoreCase && text === this.elementValue()) {
+        if (this.isContentEditable(this.inputElement)) {
+            this.range = this.getCurrentRange();
+        }
+        var currentRange = this.getTextRange();
+        var lastWordRange = this.getLastLetter(currentRange);
+        if ((this.ignoreCase && (text === lastWordRange || text === lastWordRange.toLowerCase()))
+            || !this.ignoreCase && text === lastWordRange) {
             this.resetList(this.dataSource, this.fields);
         }
         else {

package/src/multi-select/checkbox-selection.js

@@ -164,6 +164,12 @@ var CheckBoxSelection = /** @class */ (function () {
     CheckBoxSelection.prototype.destroy = function () {
         this.removeEventListener();
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        this.checkAllParent = null;
+        this.clearIconElement = null;
+        this.filterInput = null;
+        this.filterInputObj = null;
+        this.checkWrapper = null;
+        this.selectAllSpan = null;
     };
     CheckBoxSelection.prototype.listSelection = function (args) {
         var target;
@@ -240,10 +246,6 @@ var CheckBoxSelection = /** @class */ (function () {
                 this.setLocale();
             }
         }
-        ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
-        if (!isNullOrUndefined(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
-        }
     };
     CheckBoxSelection.prototype.setSearchBox = function (args) {
         if (isNullOrUndefined(this.parent.filterParent)) {
@@ -404,8 +406,8 @@ var CheckBoxSelection = /** @class */ (function () {
                     e.preventDefault();
                 }
             }
-            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]')) &&
-                !this.parent.overAllWrapper.contains(e.target)) {
+            if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]'))
+                && !isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target)) {
                 if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {
                     this.parent.inputFocus = false;
                     this.parent.scrollFocusStatus = false;
@@ -418,7 +420,7 @@ var CheckBoxSelection = /** @class */ (function () {
                 this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') &&
                     (document.activeElement === this.filterInput);
             }
-            if (!this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
+            if (!isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
                 !this.parent.isPopupOpen()) {
                 if (Browser.isIE) {
                     this.parent.onBlurHandler();
@@ -449,7 +451,7 @@ var CheckBoxSelection = /** @class */ (function () {
         }
     };
     CheckBoxSelection.prototype.checkSelectAll = function (e) {
-        if (e.value === 'check' && this.checkAllParent.getAttribute('aria-checked') !== 'true') {
+        if (e.value === 'check') {
             this.changeState(this.checkAllParent, e.value, null, null, false);
             this.setLocale(true);
         }

package/src/multi-select/multi-select.d.ts

@@ -611,9 +611,9 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      */
     filter(dataSource: {
@@ -805,7 +805,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */