@syncfusion/ej2-dropdowns 20.3.57 → 20.3.59

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

@@ -876,18 +876,20 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         return extend({}, options, fields, true);
     };
     DropDownBase.prototype.setFloatingHeader = function (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);
     };
     DropDownBase.prototype.scrollStop = function (e) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
@@ -2488,10 +2490,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 +2692,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 +3188,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 +3263,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 +3424,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 +3452,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 +4065,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
@@ -7728,7 +7731,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         this.itemData = this.getDataByValue(this.value);
         var 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);
         }
     };
     /**
@@ -9136,12 +9139,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 +9289,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 +9387,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 +9835,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 +9983,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 +10485,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 +11508,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 +12082,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 +12473,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 +12711,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') {
@@ -14725,12 +14746,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         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(function (ele) {
                         ele.removeAttribute('aria-selected');
                     });
@@ -15202,12 +15223,21 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         }
         return listObj;
     };
-    ListBox.prototype.getGrabbedItems = function () {
+    ListBox.prototype.getGrabbedItems = function (args) {
+        var grabbItems = false;
         for (var i = 0; i < this.value.length; i++) {
-            var liColl = this.list.querySelectorAll('[aria-selected="true"]');
-            for (var 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 (var i = 0; i < this.value.length; i++) {
+                var liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (var j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
             }
         }
@@ -15221,7 +15251,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {
-        var elems = this.getGrabbedItems();
+        var elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);