@syncfusion/ej2-dropdowns 22.1.34 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@18.63.0",
+  "_id": "@syncfusion/ej2-dropdowns@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-rzvjRsRbQxKUndOXJMiMRTsrKgVpBif5/Hw9QVwm3PzLDRqPxY0OcayRbDnpcillEtHWqypHSLuNh6pEIGP4gg==",
+  "_integrity": "sha512-fHgDG/D8twNtHALliOERecK7QClG+Sr0260BDqSjwpo0JVsVj/g5jlVa+bWkGTXo/5BCkmuYObNY9Q8a2lvpfA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.63.0.tgz",
-  "_shasum": "f3fe366fa86013af30e9ceaed909a5788c686393",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-22.1.36.tgz",
+  "_shasum": "d0a7c1dc6f28b2f1c1a7ce5bb22e9c519bfca4c2",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.36",
     "@syncfusion/ej2-inputs": "~22.1.34",
     "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-navigations": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34"
+    "@syncfusion/ej2-navigations": "~22.1.36",
+    "@syncfusion/ej2-popups": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -73,7 +73,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -85,6 +85,7 @@ var ComboBox = /** @class */ (function (_super) {
             EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);
             EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);
             EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
+            EventHandler.add(window, 'resize', this.windowResize, this);
         }
         this.bindCommonEvent();
     };
@@ -439,6 +440,7 @@ var ComboBox = /** @class */ (function (_super) {
                 EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);
                 EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);
                 EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
+                EventHandler.remove(window, 'resize', this.windowResize);
             }
         }
         this.unBindCommonEvent();

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

@@ -216,6 +216,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isPreventChange: boolean;
     protected isDynamicDataChange: boolean;
     protected addedNewItem: boolean;
+    protected isAddNewItemTemplate: boolean;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.

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

@@ -89,6 +89,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isPreventChange = false;
         _this.isDynamicDataChange = false;
         _this.addedNewItem = false;
+        _this.isAddNewItemTemplate = false;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -271,7 +272,7 @@ var DropDownBase = /** @class */ (function (_super) {
         else {
             var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };
             var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);
-            if (componentLocale.getConstant('actionFailureTemplate') !== '') {
+            if (componentLocale.getConstant('actionFailureTemplate') !== '' || componentLocale.getConstant('noRecordsTemplate') !== '') {
                 this.l10n = componentLocale;
             }
             else {
@@ -1140,6 +1141,7 @@ var DropDownBase = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.list)) {
                 this.list.innerHTML = '';
                 this.list.classList.remove(dropDownBaseClasses.noData);
+                this.isAddNewItemTemplate = true;
                 if (!isNullOrUndefined(this.ulElement)) {
                     this.list.appendChild(this.ulElement);
                 }

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

@@ -380,6 +380,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private resetValueHandler;
     protected wireEvent(): void;
     protected bindCommonEvent(): void;
+    protected windowResize(): void;
     private bindClearEvent;
     protected unBindCommonEvent(): void;
     protected updateIconState(): void;

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

@@ -476,6 +476,7 @@ var DropDownList = /** @class */ (function (_super) {
         EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);
         EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);
         EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);
+        EventHandler.add(window, 'resize', this.windowResize, this);
         this.bindCommonEvent();
     };
     DropDownList.prototype.bindCommonEvent = function () {
@@ -496,6 +497,11 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.bindClearEvent();
     };
+    DropDownList.prototype.windowResize = function () {
+        if (this.isPopupOpen) {
+            this.popupObj.refreshPosition(this.inputWrapper.container);
+        }
+    };
     DropDownList.prototype.bindClearEvent = function () {
         if (this.showClearButton) {
             EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
@@ -821,6 +827,7 @@ var DropDownList = /** @class */ (function (_super) {
             EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
             EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
             EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+            EventHandler.remove(window, 'resize', this.windowResize);
         }
         this.unBindCommonEvent();
     };
@@ -2623,6 +2630,10 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        if (this.isReact && this.getModuleName() === 'combobox' && this.itemTemplate && this.isCustomFilter && this.isAddNewItemTemplate) {
+            this.renderList();
+            this.isAddNewItemTemplate = false;
+        }
         if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
             this.actionData.list && this.actionData.ulElement) {
             this.actionCompleteData = this.actionData;
@@ -2801,6 +2812,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.previousSelectedLI = null;
         this.valueTempElement = null;
         this.actionData.ulElement = null;
+        if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
+            this.inputElement.onchange = null;
+        }
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */

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

@@ -459,7 +459,7 @@ var ListBox = /** @class */ (function (_super) {
                 scrollParent = wrapper;
             }
             boundRect = scrollParent.getBoundingClientRect();
-            if ((boundRect.y + scrollParent.offsetHeight) - (event.pageY + scrollMoved) < 1) {
+            if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
                 scrollParent.scrollTop = scrollParent.scrollTop + scrollHeight;
             }
             else if ((event.pageY - scrollMoved) - boundRect.y < 1) {

package/src/mention/mention.d.ts

@@ -56,6 +56,7 @@ export declare class Mention extends DropDownBase {
     private isSelectCancel;
     private isTyped;
     private didPopupOpenByTypingInitialChar;
+    private isUpDownKey;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *

package/src/mention/mention.js

@@ -234,6 +234,7 @@ var Mention = /** @class */ (function (_super) {
         switch (e.action) {
             case 'down':
             case 'up':
+                this.isUpDownKey = true;
                 this.updateUpDownAction(e);
                 break;
             case 'tab':
@@ -298,6 +299,10 @@ var Mention = /** @class */ (function (_super) {
     };
     Mention.prototype.onKeyUp = function (e) {
         var rangetextContent;
+        if (this.isUpDownKey && this.isPopupOpen && e.keyCode === 229) {
+            this.isUpDownKey = false;
+            return;
+        }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
         if (document.activeElement != this.inputElement) {
             this.inputElement.focus();

package/styles/material3-dark.css

@@ -2584,12 +2584,6 @@ ejs-dropdownlist {
   padding: 4px 12px 4px;
 }
 
-.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
 .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
   padding: 0 8px;
 }

package/styles/material3.css

@@ -2640,12 +2640,6 @@ ejs-dropdownlist {
   padding: 4px 12px 4px;
 }
 
-.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
 .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
   padding: 0 8px;
 }

package/styles/multi-select/_layout.scss

@@ -1055,8 +1055,10 @@
 
 .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
 .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
-  padding-left: 8px;
-  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    padding-left: 8px;
+  }
+  @if $ddl-multiselect-skin-name == 'material' {
     padding-right: 8px;
   }
 }

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

@@ -1376,12 +1376,6 @@
   padding: 4px 12px 4px;
 }
 
-.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
 .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
   padding: 0 8px;
 }

package/styles/multi-select/material3.css

@@ -1432,12 +1432,6 @@
   padding: 4px 12px 4px;
 }
 
-.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
 .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
   padding: 0 8px;
 }