@syncfusion/ej2-splitbuttons 20.3.56 → 20.4.40

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

@@ -304,8 +304,7 @@ let DropDownButton = class DropDownButton extends Component {
         this.dropDown.hide();
         attributes(this.element, {
             ['aria-haspopup']: this.items.length || this.target ? 'true' : 'false', ['aria-expanded']: 'false',
-            ['aria-owns']: this.getPopUpElement().id, ['type']: 'button',
-            ['aria-label']: this.element.textContent ? this.element.textContent : 'dropdownbutton'
+            ['type']: 'button', ['aria-label']: this.element.textContent ? this.element.textContent : 'dropdownbutton'
         });
         if (this.cssClass) {
             addClass([div], this.cssClass.split(' '));
@@ -337,7 +336,7 @@ let DropDownButton = class DropDownButton extends Component {
             li = this.createElement('li', {
                 innerHTML: item.url ? '' : tempItem,
                 className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
-                attrs: { 'role': 'menuItem', 'tabindex': '-1', 'aria-label': tempItem },
+                attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },
                 id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')
             });
             if (this.enableHtmlSanitizer) {
@@ -380,7 +379,7 @@ let DropDownButton = class DropDownButton extends Component {
     }
     hasIcon(items, field) {
         for (let i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i][`${field}`]) {
                 return true;
             }
         }
@@ -611,14 +610,14 @@ let DropDownButton = class DropDownButton extends Component {
     }
     focusoutHandler(e) {
         if (this.isPopupCreated && !this.canOpen()) {
-            let liTarget = e.relatedTarget;
+            const liTarget = e.relatedTarget;
             if (liTarget && liTarget.className.indexOf('e-item') > -1) {
                 const li = this.getLI(liTarget);
                 if (li) {
-                    let liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);
-                    let item = this.items[liIdx];
+                    const liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);
+                    const item = this.items[liIdx];
                     if (item) {
-                        let selectEventArgs = { element: li, item: item };
+                        const selectEventArgs = { element: li, item: item };
                         this.trigger('select', selectEventArgs);
                     }
                 }
@@ -670,7 +669,7 @@ let DropDownButton = class DropDownButton extends Component {
         }
         else {
             if (this.activeElem.length > 1) {
-                let splitButton = getComponent(this.activeElem[0], 'split-btn');
+                const splitButton = getComponent(this.activeElem[0], 'split-btn');
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (splitButton.isReact && popupElem.childNodes.length < 1) {
                     splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());
@@ -694,6 +693,7 @@ let DropDownButton = class DropDownButton extends Component {
                 this.dropDown.show(null, this.element);
                 addClass([this.element], 'e-active');
                 this.element.setAttribute('aria-expanded', 'true');
+                this.element.setAttribute('aria-owns', this.getPopUpElement().id);
                 if (ul) {
                     ul.focus();
                 }
@@ -705,12 +705,12 @@ let DropDownButton = class DropDownButton extends Component {
     closePopup(e = null, focusEle) {
         const ul = this.getULElement();
         const beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };
-        let popupElement = this.getPopUpElement();
-        if (popupElement) {
-            EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);
-        }
         this.trigger('beforeClose', beforeCloseArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
+                const popupElement = this.getPopUpElement();
+                if (popupElement) {
+                    EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);
+                }
                 this.popupUnWireEvents();
                 const ul = this.getULElement();
                 let selectedLi;
@@ -723,6 +723,7 @@ let DropDownButton = class DropDownButton extends Component {
                 this.dropDown.hide();
                 removeClass(this.activeElem, 'e-active');
                 this.element.setAttribute('aria-expanded', 'false');
+                this.element.removeAttribute('aria-owns');
                 if (focusEle) {
                     focusEle.focus();
                 }
@@ -740,6 +741,11 @@ let DropDownButton = class DropDownButton extends Component {
                     this.isPopupCreated = this.createPopupOnClick ? false : true;
                 }
             }
+            else {
+                if (ul) {
+                    ul.focus();
+                }
+            }
         });
     }
     unWireEvents() {