@syncfusion/ej2-dropdowns 20.3.57 → 20.3.59

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

@@ -851,18 +851,20 @@ let DropDownBase = class DropDownBase extends Component {
         return extend({}, options, fields, true);
     }
     setFloatingHeader(e) {
-        if (isNullOrUndefined(this.fixedHeaderElement)) {
-            this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-            if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
-                this.fixedHeaderElement.style.display = 'none';
+        if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+            if (isNullOrUndefined(this.fixedHeaderElement)) {
+                this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
+                if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                    this.fixedHeaderElement.style.display = 'none';
+                }
+                prepend([this.fixedHeaderElement], this.list);
+                this.setFixedHeader();
             }
-            prepend([this.fixedHeaderElement], this.list);
-            this.setFixedHeader();
-        }
-        if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
-            this.setFixedHeader();
+            if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
+                this.setFixedHeader();
+            }
+            this.scrollStop(e);
         }
-        this.scrollStop(e);
     }
     scrollStop(e) {
         let target = !isNullOrUndefined(e) ? e.target : this.list;
@@ -2441,10 +2443,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.setScrollPosition(e);
         }
         if (Browser.info.name !== 'mozilla') {
-            attributes(this.inputElement, { 'aria-label': this.inputElement.value });
+            attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
             attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
             this.targetElement().removeAttribute('aria-live');
         }
+        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+            attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+        }
+        else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+            attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
+        }
     }
     dropdownCompiler(dropdownTemplate) {
         let checkTemplate = false;
@@ -2637,6 +2645,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.preventAutoFill = false;
                     }
                     this.preventAltUp = false;
+                    if (this.getModuleName() === 'autocomplete' && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+                        attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+                    }
                     e.preventDefault();
                     break;
                 case 46: //delete
@@ -3123,19 +3134,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 for (const element of scrollParentElements) {
                     EventHandler.add(element, 'scroll', this.scrollHandler, this);
                 }
-                if (Browser.isDevice && this.isFilterLayout()) {
-                    EventHandler.add(this.list, 'scroll', this.listScroll, this);
-                }
                 if (!isNullOrUndefined(this.list)) {
                     this.unWireListEvents();
                     this.wireListEvents();
                 }
                 this.selectedElementID = this.selectedLI ? this.selectedLI.id : null;
-                attributes(this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options', 'aria-activedescendant': this.selectedElementID });
+                attributes(this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
                 this.inputElement.setAttribute('aria-expanded', 'true');
-                if (this.selectedElementID == null) {
-                    this.targetElement().removeAttribute('aria-activedescendant');
-                }
                 const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 const animModel = { name: 'FadeIn', duration: 100 };
@@ -3203,6 +3208,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const actionList = this.actionCompleteData && this.actionCompleteData.ulElement &&
                     this.actionCompleteData.ulElement.querySelector('li');
                 const ulElement = this.list.querySelector('ul li');
+                if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+                    attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+                }
+                else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+                    attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
+                }
                 if (this.isFiltering() && this.itemTemplate && (this.element.tagName === this.getNgDirective()) &&
                     (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&
                     this.element.tagName !== 'EJS-COMBOBOX') {
@@ -3358,9 +3369,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
     }
-    listScroll() {
-        this.filterInput.blur();
-    }
     setEleWidth(width) {
         if (!isNullOrUndefined(width)) {
             if (typeof width === 'number') {
@@ -3387,7 +3395,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (Browser.isDevice && this.isFilterLayout()) {
             removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);
-            EventHandler.remove(this.list, 'scroll', this.listScroll);
         }
         if (this.isFilterLayout()) {
             if (!Browser.isDevice) {
@@ -3994,10 +4001,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
             this.renderPopup(e);
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedElementID });
-        if (this.selectedElementID == null) {
-            this.targetElement().removeAttribute('aria-activedescendant');
-        }
     }
     renderHightSearch() {
         // update high light search
@@ -7611,7 +7614,7 @@ let ComboBox = class ComboBox extends DropDownList {
         this.itemData = this.getDataByValue(this.value);
         const dataItem = this.getItemData();
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);
+            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
         }
     }
     /**
@@ -8979,12 +8982,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.renderReactTemplates();
                 this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
-                if (this.selectedElementID == null) {
-                    this.inputElement.removeAttribute('aria-activedescendant');
-                }
-                else {
-                    attributes(this.inputElement, { 'aria-activedescendant': this.selectedElementID });
-                }
+                this.updateAriaActiveDescendant();
                 if (this.isFirstClick) {
                     this.loadTemplate();
                 }
@@ -9134,13 +9132,23 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
             for (let i = 0; i < this.value.length; i++) {
                 const checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
-                if (!checkEle) {
+                if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
                     i -= 1;
                 }
             }
         }
-        this.updateActionList(ulElement, list, e);
+        let valuecheck = [];
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+            valuecheck = this.presentItemValue(this.ulElement);
+        }
+        if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+            && this.listData != null) {
+            this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
+        }
+        else {
+            this.updateActionList(ulElement, list, e);
+        }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
         }
@@ -9222,6 +9230,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
                         if (listEle.length > 0) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
+                            this.updateAriaActiveDescendant();
                         }
                         else {
                             //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
@@ -9669,6 +9678,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.tempValues = this.value.slice();
         }
     }
+    updateAriaActiveDescendant() {
+        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+            attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+        }
+    }
     getPagingCount() {
         const height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
@@ -9812,6 +9826,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
             element.classList.add(dropDownBaseClasses.focus);
             this.scrollBottom(element);
+            this.updateAriaActiveDescendant();
         }
     }
     onKeyDown(e) {
@@ -10313,7 +10328,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     invokeCheckboxSelection(element, eve, isClearAll) {
         this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });
-        attributes(this.inputElement, { 'aria-activedescendant': element.id });
+        this.updateAriaActiveDescendant();
         if ((this.value && this.value.length !== this.mainData.length)
             && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {
             this.notify('checkSelectAll', {
@@ -11329,10 +11344,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enabled && this.isValidLI(element)) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
+            this.updateAriaActiveDescendant();
         }
         else {
             if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
                 addClass([element], dropDownBaseClasses.focus);
+                this.updateAriaActiveDescendant();
             }
         }
     }
@@ -11900,6 +11917,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         target.classList.remove('e-active');
                     }
                     target.classList.add('e-item-focus');
+                    this.updateAriaActiveDescendant();
                 }
                 this.textboxValueUpdate();
                 this.checkPlaceholderSize();
@@ -12285,7 +12303,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     ;
     addNonPresentItems(valuecheck, ulElement, list, event) {
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then((e) => {
-            this.addItem(e.result, list.length);
+            if (e.result.length > 0) {
+                this.addItem(e.result, list.length);
+            }
             this.updateActionList(ulElement, list, event);
         });
     }
@@ -12518,7 +12538,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 spellcheck: 'false',
                 type: 'text',
                 autocomplete: 'off',
-                tabindex: '0'
+                tabindex: '0',
+                role: 'combobox'
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
@@ -14505,12 +14526,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         if (li && li.parentElement) {
             currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
             if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || Browser.isDevice) && this.isSelected(li)) {
+                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
                     li.classList.remove(cssClass.selected);
                     li.removeAttribute('aria-selected');
                     isSelect = false;
                 }
-                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || Browser.isDevice))) {
+                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
                     this.getSelectedItems().forEach((ele) => {
                         ele.removeAttribute('aria-selected');
                     });
@@ -14976,12 +14997,21 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         return listObj;
     }
-    getGrabbedItems() {
+    getGrabbedItems(args) {
+        let grabbItems = false;
         for (let i = 0; i < this.value.length; i++) {
-            const liColl = this.list.querySelectorAll('[aria-selected="true"]');
-            for (let j = 0; j < liColl.length; j++) {
-                if (this.value[i] === liColl[j].textContent) {
-                    liColl[j].classList.add('e-grabbed');
+            if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {
+                grabbItems = true;
+                break;
+            }
+        }
+        if (grabbItems) {
+            for (let i = 0; i < this.value.length; i++) {
+                const liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (let j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
             }
         }
@@ -14995,7 +15025,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         return elems;
     }
     getDragArgs(args, isDragEnd) {
-        let elems = this.getGrabbedItems();
+        let elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);