@syncfusion/ej2-splitbuttons 19.3.43 → 19.3.48

package/dist/es6/ej2-splitbuttons.es2015.js

@@ -393,13 +393,23 @@ let DropDownButton = class DropDownButton extends Component {
         }
         this.appendArrowSpan();
         this.setActiveElem([this.element]);
-        if (this.target || !this.createPopupOnClick) {
+        if ((this.target && !this.isColorPicker()) || !this.createPopupOnClick) {
             this.createPopup();
         }
         else {
             this.isPopupCreated = false;
         }
     }
+    isColorPicker() {
+        if (!this.element) {
+            return false;
+        }
+        const prevElem = this.element.previousSibling;
+        if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {
+            return true;
+        }
+        return false;
+    }
     appendArrowSpan() {
         this.element.appendChild(this.createElement('span', {
             className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1
@@ -450,6 +460,7 @@ let DropDownButton = class DropDownButton extends Component {
             attrList.forEach((key) => {
                 this.element.removeAttribute(key);
             });
+            this.popupUnWireEvents();
             this.destroyPopup();
             this.isPopupCreated = false;
             if (!this.disabled) {
@@ -491,16 +502,33 @@ let DropDownButton = class DropDownButton extends Component {
     }
     wireEvents() {
         this.delegateMousedownHandler = this.mousedownHandler.bind(this);
-        EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        if (!this.createPopupOnClick) {
+            EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        }
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
     }
     popupWireEvents() {
         const popupElement = this.getPopUpElement();
-        EventHandler.add(popupElement, 'click', this.clickHandler, this);
-        EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        if (this.createPopupOnClick) {
+            EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        }
+        if (popupElement) {
+            EventHandler.add(popupElement, 'click', this.clickHandler, this);
+            EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        }
         this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
     }
+    popupUnWireEvents() {
+        const popupElement = this.getPopUpElement();
+        if (this.createPopupOnClick) {
+            EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        }
+        if (popupElement && popupElement.parentElement) {
+            EventHandler.remove(popupElement, 'click', this.clickHandler);
+            EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);
+        }
+    }
     /**
      * Handles the keyboard interactions.
      *
@@ -569,7 +597,7 @@ let DropDownButton = class DropDownButton extends Component {
     clickHandler(e) {
         const trgt = e.target;
         if (closest(trgt, '[id="' + this.element.id + '"]')) {
-            if (!this.createPopupOnClick || this.target) {
+            if (!this.createPopupOnClick || (this.target && !this.isColorPicker())) {
                 if (this.getPopUpElement().classList.contains('e-popup-close')) {
                     this.openPopUp(e);
                 }
@@ -631,6 +659,7 @@ let DropDownButton = class DropDownButton extends Component {
         }
         this.trigger('beforeClose', beforeCloseArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
+                this.popupUnWireEvents();
                 const ul = this.getULElement();
                 const selectedLi = ul.querySelector('.e-selected');
                 if (selectedLi) {
@@ -647,7 +676,7 @@ let DropDownButton = class DropDownButton extends Component {
                 if (!this.target && ul) {
                     detach(ul);
                 }
-                if (!this.target) {
+                if (!this.target || this.isColorPicker()) {
                     if (this.createPopupOnClick) {
                         this.destroyPopup();
                     }
@@ -659,7 +688,9 @@ let DropDownButton = class DropDownButton extends Component {
         });
     }
     unWireEvents() {
-        EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        if (!this.createPopupOnClick) {
+            EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        }
         EventHandler.remove(this.element, 'click', this.clickHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         if (this.isPopupCreated) {