@syncfusion/ej2-dropdowns 20.3.56 → 20.3.58

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

@@ -2488,10 +2488,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             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 });
+        }
     };
     DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {
         var checkTemplate = false;
@@ -2684,6 +2690,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         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
@@ -3177,19 +3186,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     var element = scrollParentElements_1[_i];
                     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');
-                }
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
@@ -3258,6 +3261,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&
                     _this.actionCompleteData.ulElement.querySelector('li');
                 var 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') {
@@ -3413,9 +3422,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
     };
-    DropDownList.prototype.listScroll = function () {
-        this.filterInput.blur();
-    };
     DropDownList.prototype.setEleWidth = function (width) {
         if (!isNullOrUndefined(width)) {
             if (typeof width === 'number') {
@@ -3444,7 +3450,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         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) {
@@ -4058,10 +4063,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         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');
-        }
     };
     DropDownList.prototype.renderHightSearch = function () {
         // update high light search
@@ -9136,12 +9137,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 _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();
                 }
@@ -9291,13 +9287,23 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
             for (var i = 0; i < this.value.length; i++) {
                 var 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);
+        var 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();
         }
@@ -9379,6 +9385,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                             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;)
@@ -9826,6 +9833,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.tempValues = this.value.slice();
         }
     };
+    MultiSelect.prototype.updateAriaActiveDescendant = function () {
+        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 });
+        }
+    };
     MultiSelect.prototype.getPagingCount = function () {
         var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
@@ -9969,6 +9981,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
             element.classList.add(dropDownBaseClasses.focus);
             this.scrollBottom(element);
+            this.updateAriaActiveDescendant();
         }
     };
     MultiSelect.prototype.onKeyDown = function (e) {
@@ -10470,7 +10483,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.invokeCheckboxSelection = function (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', {
@@ -11493,10 +11506,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         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();
             }
         }
     };
@@ -12065,6 +12080,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         target.classList.remove('e-active');
                     }
                     target.classList.add('e-item-focus');
+                    this.updateAriaActiveDescendant();
                 }
                 this.textboxValueUpdate();
                 this.checkPlaceholderSize();
@@ -12455,7 +12471,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
         var _this = this;
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
-            _this.addItem(e.result, list.length);
+            if (e.result.length > 0) {
+                _this.addItem(e.result, list.length);
+            }
             _this.updateActionList(ulElement, list, event);
         });
     };
@@ -12691,7 +12709,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 spellcheck: 'false',
                 type: 'text',
                 autocomplete: 'off',
-                tabindex: '0'
+                tabindex: '0',
+                role: 'combobox'
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {