@syncfusion/ej2-dropdowns 20.2.39 → 20.2.44

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();
     };
@@ -2472,7 +2472,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
             var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
@@ -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);
             }
         });
     };

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;
 }