@syncfusion/ej2-dropdowns 20.2.40 → 20.2.45

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

@@ -150,8 +150,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
-    DropDownList.prototype.renderList = function (isEmptyData) {
-        _super.prototype.render.call(this, isEmptyData);
+    DropDownList.prototype.renderList = function (e, isEmptyData) {
+        _super.prototype.render.call(this, e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -636,7 +636,7 @@ var DropDownList = /** @class */ (function (_super) {
             var isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -675,7 +675,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -867,7 +867,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -877,7 +877,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
@@ -1522,26 +1522,8 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 this.initial = false;
             }
-            else if (this.getModuleName() === 'autocomplete' && this.value && this.typedString === '' && !(this.dataSource instanceof DataManager)) {
-                var checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
-                var checkValue = list.some(function (x) { return x[checkFields_1] === _this.value; });
-                var query = new Query();
-                if (!checkValue) {
-                    new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', this.value)))
-                        .then(function (e) {
-                        if (e.result.length > 0) {
-                            _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
-                            _this.addItem(e.result, list.length);
-                            _this.updateValues();
-                        }
-                        else {
-                            _this.updateValues();
-                        }
-                    });
-                }
-                else {
-                    this.updateValues();
-                }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -1564,7 +1546,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     };
@@ -1636,7 +1618,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
-    DropDownList.prototype.renderPopup = function () {
+    DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -1739,7 +1721,7 @@ var DropDownList = /** @class */ (function (_super) {
                 var animModel = { name: 'FadeIn', duration: 100 };
                 _this.beforePopupOpen = true;
                 var popupInstance = _this.popupObj;
-                var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -2061,14 +2043,14 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.element.tagName === 'INPUT') {
             this.inputElement = this.element;
             if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {
-                this.inputElement.setAttribute('role', 'textbox');
+                this.inputElement.setAttribute('role', 'combobox');
             }
             if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
                 this.inputElement.setAttribute('type', 'text');
             }
         }
         else {
-            this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -2117,6 +2099,9 @@ var DropDownList = /** @class */ (function (_super) {
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
+        if (this.targetElement() === this.inputElement) {
+            this.element.removeAttribute('aria-labelledby');
+        }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
             this.initValue();
         }
@@ -2152,7 +2137,12 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -2344,6 +2334,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldText(oldProp.text);
                             }
@@ -2385,6 +2378,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldValue(oldProp.value);
                             }
@@ -2503,6 +2499,8 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    DropDownList.prototype.setInputValue = function (newProp, oldProp) {
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -2529,7 +2527,7 @@ var DropDownList = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownList.prototype.showPopup = function () {
+    DropDownList.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -2549,11 +2547,11 @@ 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)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     };
-    DropDownList.prototype.invokeRenderPopup = function () {
+    DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
@@ -2563,7 +2561,7 @@ var DropDownList = /** @class */ (function (_super) {
             history.pushState({}, '');
         }
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+            this.renderPopup(e);
         }
         attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     };

package/src/list-box/list-box.d.ts

@@ -320,7 +320,7 @@ export declare class ListBox extends DropDownBase {
     private initDraggable;
     protected updateActionCompleteData(li: HTMLElement, item: {
         [key: string]: Object;
-    }): void;
+    }, index: number): void;
     private initToolbar;
     private createButtons;
     protected validationAttribute(input: HTMLInputElement, hiddenSelect: HTMLSelectElement): void;

package/src/list-box/list-box.js

@@ -210,8 +210,8 @@ var ListBox = /** @class */ (function (_super) {
             });
         }
     };
-    ListBox.prototype.updateActionCompleteData = function (li, item) {
-        this.jsonData.push(item);
+    ListBox.prototype.updateActionCompleteData = function (li, item, index) {
+        this.jsonData.splice(index, 0, item);
     };
     ListBox.prototype.initToolbar = function () {
         var pos = this.toolbarSettings.position;
@@ -756,7 +756,7 @@ var ListBox = /** @class */ (function (_super) {
             var objValue = void 0;
             var dupData = [];
             var itemIdx = void 0;
-            extend(dupData, [], this.listData);
+            extend(dupData, [], this.jsonData);
             var removeIdxes = [];
             var removeLiIdxes = [];
             for (var j = 0; j < items.length; j++) {
@@ -1543,9 +1543,8 @@ var ListBox = /** @class */ (function (_super) {
         fListBox.value = [];
         listData = listData
             .filter(function (data) { return data.isHeader !== true; });
-        tListBox.listData = listData;
-        tListBox.jsonData = jsonData;
-        if (this.listData.length == this.jsonData.length) {
+        tListBox.listData = tListBox.jsonData = listData;
+        if (fListBox.listData.length == fListBox.jsonData.length) {
             fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
         }
         else if (this.allowFiltering) {

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

@@ -823,7 +823,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Based on the state parameter, entire list item will be selected/deselected.
      * parameter

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

@@ -224,7 +224,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.onPopupShown = function () {
+    MultiSelect.prototype.onPopupShown = function (e) {
         var _this = this;
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -236,7 +236,7 @@ var MultiSelect = /** @class */ (function (_super) {
             history.pushState({}, '');
         }
         var animModel = { name: 'FadeIn', duration: 100 };
-        var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
                 _this.focusAtFirstListItem();
@@ -460,7 +460,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     };
     MultiSelect.prototype.refreshSelection = function () {
@@ -752,7 +752,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -1046,7 +1046,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -2237,7 +2237,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -2384,7 +2384,7 @@ var MultiSelect = /** @class */ (function (_super) {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        _super.prototype.render.call(this, isEmptyData);
+        _super.prototype.render.call(this, null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     };
@@ -3657,7 +3657,7 @@ var MultiSelect = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    MultiSelect.prototype.showPopup = function () {
+    MultiSelect.prototype.showPopup = function (e) {
         var _this = this;
         if (!this.enabled) {
             return;
@@ -3667,7 +3667,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    _super.prototype.render.call(_this);
+                    _super.prototype.render.call(_this, e);
                     if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
@@ -3683,7 +3683,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.beforePopupOpen = false;
                     return;
                 }
-                _this.onPopupShown();
+                _this.onPopupShown(e);
             }
         });
     };
@@ -3790,7 +3790,6 @@ var MultiSelect = /** @class */ (function (_super) {
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';

package/styles/multi-select/_layout.scss

@@ -104,6 +104,9 @@
     display: none;
     flex-direction: row;
     margin-top: $ddl-clear-margin-top;
+    @if $ddl-multiselect-skin-name == 'tailwind' {
+      margin-top: -1.45em;
+    }
     outline: 0;
     padding: 0;
     position: absolute;
@@ -389,6 +392,7 @@
   }
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-clear-icon-height;
+    margin-top: $ddl-clear-margin-top;
     width: $ddl-bigger-clear-icon-width;
   }
 }

package/styles/multi-select/tailwind-dark.css

@@ -221,6 +221,7 @@
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -401,6 +402,7 @@
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/multi-select/tailwind.css

@@ -221,6 +221,7 @@
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -401,6 +402,7 @@
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/tailwind-dark.css

@@ -1426,6 +1426,7 @@ ejs-dropdownlist {
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -1606,6 +1607,7 @@ ejs-dropdownlist {
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/tailwind.css

@@ -1426,6 +1426,7 @@ ejs-dropdownlist {
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -1606,6 +1607,7 @@ ejs-dropdownlist {
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }