@syncfusion/ej2-dropdowns 20.3.57 → 20.3.58

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

@@ -2441,10 +2441,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 +2643,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 +3132,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 +3206,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 +3367,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 +3393,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 +3999,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
@@ -8979,12 +8980,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 +9130,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 +9228,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 +9676,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 +9824,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 +10326,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 +11342,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 +11915,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 +12301,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 +12536,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') {