@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-3197

package/src/multi-select/multi-select.js

@@ -22,6 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Input } from '@syncfusion/ej2-inputs';
 import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
 import { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';
@@ -101,6 +102,8 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
+        _this.resetMainList = null;
+        _this.resetFilteredData = false;
         _this.scrollFocusStatus = false;
         _this.keyDownStatus = false;
         return _this;
@@ -143,7 +146,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 var htmlAttr = _a[_i];
                 switch (htmlAttr) {
                     case 'class': {
-                        var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.overAllWrapper], updatedClassValue.split(' '));
                             addClass([this.popupWrapper], updatedClassValue.split(' '));
@@ -155,7 +158,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         break;
                     case 'placeholder':
                         if (!this.placeholder) {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                             this.setProperties({ placeholder: this.inputElement.placeholder }, true);
                             this.refreshPlaceHolder();
                         }
@@ -165,16 +168,16 @@ var MultiSelect = /** @class */ (function (_super) {
                         var validateAttr = ['name', 'required', 'aria-required', 'form'];
                         var containerAttr = ['title', 'role', 'style', 'class'];
                         if (defaultAttr.indexOf(htmlAttr) > -1) {
-                            this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.element.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         else if (containerAttr.indexOf(htmlAttr) > -1) {
-                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
-                        else if (htmlAttr !== 'size') {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        else if (htmlAttr !== 'size' && !isNullOrUndefined(this.inputElement)) {
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                         break;
                     }
@@ -183,11 +186,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateReadonly = function (state) {
-        if (state || this.mode === 'CheckBox') {
-            this.inputElement.setAttribute('readonly', 'true');
-        }
-        else {
-            this.inputElement.removeAttribute('readonly');
+        if (!isNullOrUndefined(this.inputElement)) {
+            if (state || this.mode === 'CheckBox') {
+                this.inputElement.setAttribute('readonly', 'true');
+            }
+            else {
+                this.inputElement.removeAttribute('readonly');
+            }
         }
     };
     MultiSelect.prototype.updateClearButton = function (state) {
@@ -224,7 +229,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.onPopupShown = function () {
+    MultiSelect.prototype.onPopupShown = function (e) {
         var _this = this;
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -236,7 +241,7 @@ var MultiSelect = /** @class */ (function (_super) {
             history.pushState({}, '');
         }
         var animModel = { name: 'FadeIn', duration: 100 };
-        var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
                 _this.focusAtFirstListItem();
@@ -250,7 +255,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 _this.refreshPopup();
                 _this.renderReactTemplates();
                 _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
-                attributes(_this.inputElement, { 'aria-expanded': 'true' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
@@ -320,11 +326,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getAriaAttributes = function () {
         var ariaAttributes = {
             'aria-disabled': 'false',
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-multiselectable': 'true',
-            'aria-activedescendant': 'null',
-            'aria-haspopup': 'true',
+            'role': 'combobox',
             'aria-expanded': 'false'
         };
         return ariaAttributes;
@@ -333,8 +335,10 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.ulElement)) {
             attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
         }
-        var disableStatus = (this.inputElement.disabled) ? true : false;
-        attributes(this.inputElement, this.getAriaAttributes());
+        var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
+        if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
+            attributes(this.inputElement, this.getAriaAttributes());
+        }
         if (disableStatus) {
             attributes(this.inputElement, { 'aria-disabled': 'true' });
         }
@@ -402,13 +406,23 @@ var MultiSelect = /** @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();
         }
@@ -432,7 +446,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.checkForCustomValue(this.tempQuery, this.fields);
             return;
         }
-        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||
+        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
             this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
             this.refreshSelection();
@@ -460,7 +474,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     };
     MultiSelect.prototype.refreshSelection = function () {
@@ -490,6 +504,7 @@ var MultiSelect = /** @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;)
@@ -501,8 +516,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     element.setAttribute('aria-selected', 'true');
                     if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
-                        var ariaValue = element.firstElementChild.getAttribute('aria-checked');
-                        if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {
+                        var ariaValue = element.getElementsByClassName('e-check').length;
+                        if (ariaValue === 0) {
                             var args = {
                                 module: 'CheckBoxSelection',
                                 enable: this.mode === 'CheckBox',
@@ -626,9 +641,9 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * To filter the multiselect data from given data source by using query
      *
-     * @param  {Object[] | DataManager } dataSource - Set the data source to filter.
-     * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
+     * @param {Object[] | DataManager } dataSource - Set the data source to filter.
+     * @param {Query} query - Specify the query to filter the data.
+     * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
      */
     MultiSelect.prototype.filter = function (dataSource, query, fields) {
@@ -716,7 +731,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.resetList(tempData, field, query);
             }
             else {
-                var tempData = [this.inputElement.value];
+                var tempData = JSON.parse(JSON.stringify(this.listData));
+                tempData.splice(0, 0, this.inputElement.value);
                 tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
                     parseFloat(tempData[0]) : tempData[0];
                 tempData[0] = (typeof customData === 'boolean') ?
@@ -752,7 +768,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -834,6 +850,10 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         this.updateDataList();
+        if (this.resetMainList) {
+            this.mainList = this.resetMainList;
+            this.resetMainList = null;
+        }
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -861,6 +881,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.ulElement = this.mainList;
         }
         this.checkPlaceholderSize();
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        Input.calculateWidth(this.inputElement, this.overAllWrapper);
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+        }
     };
     MultiSelect.prototype.checkPlaceholderSize = function () {
         if (this.showDropDownIcon) {
@@ -889,11 +914,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.refreshInputHight = function () {
-        if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
-            this.searchWrapper.classList.remove(ZERO_SIZE);
-        }
-        else {
-            this.searchWrapper.classList.add(ZERO_SIZE);
+        if (!isNullOrUndefined(this.searchWrapper)) {
+            if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {
+                this.searchWrapper.classList.remove(ZERO_SIZE);
+            }
+            else {
+                this.searchWrapper.classList.add(ZERO_SIZE);
+            }
         }
     };
     MultiSelect.prototype.validateValues = function (newValue, oldValue) {
@@ -931,6 +958,11 @@ var MultiSelect = /** @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');
@@ -991,6 +1023,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.isPopupOpen()) {
                 this.refreshPopup();
             }
+            Input.calculateWidth(this.inputElement, this.overAllWrapper);
             return true;
         }
         else {
@@ -1046,7 +1079,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -1073,6 +1106,7 @@ var MultiSelect = /** @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) {
@@ -1574,7 +1608,7 @@ var MultiSelect = /** @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', {
@@ -1687,7 +1721,6 @@ var MultiSelect = /** @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -1697,7 +1730,6 @@ var MultiSelect = /** @class */ (function (_super) {
                         HIDE_LIST :
                         dropDownBaseClasses.selected);
                     if (this.mode === 'CheckBox') {
-                        element2.firstElementChild.setAttribute('aria-checked', 'true');
                         addClass([element2.firstElementChild.lastElementChild], 'e-check');
                     }
                 }
@@ -1958,109 +1990,111 @@ var MultiSelect = /** @class */ (function (_super) {
             _super.prototype.render.call(this);
         }
         if (!this.popupObj) {
-            document.body.appendChild(this.popupWrapper);
-            var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
-            if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
-                checkboxFilter.remove();
-                this.filterParent = null;
-            }
-            var overAllHeight = parseInt(this.popupHeight, 10);
-            this.popupWrapper.style.visibility = 'hidden';
-            if (this.headerTemplate) {
-                this.setHeaderTemplate();
-                overAllHeight -= this.header.offsetHeight;
-            }
-            append([this.list], this.popupWrapper);
-            if (this.footerTemplate) {
-                this.setFooterTemplate();
-                overAllHeight -= this.footer.offsetHeight;
-            }
-            if (this.mode === 'CheckBox' && this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight -= this.selectAllHeight;
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-            }
-            else if (this.mode === 'CheckBox' && !this.showSelectAll) {
-                this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
-                overAllHeight = parseInt(this.popupHeight, 10);
-                if (this.headerTemplate && this.header) {
+            if (!isNullOrUndefined(this.popupWrapper)) {
+                document.body.appendChild(this.popupWrapper);
+                var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);
+                if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {
+                    checkboxFilter.remove();
+                    this.filterParent = null;
+                }
+                var overAllHeight = parseInt(this.popupHeight, 10);
+                this.popupWrapper.style.visibility = 'hidden';
+                if (this.headerTemplate) {
+                    this.setHeaderTemplate();
                     overAllHeight -= this.header.offsetHeight;
                 }
-                if (this.footerTemplate && this.footer) {
+                append([this.list], this.popupWrapper);
+                if (this.footerTemplate) {
+                    this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
                 }
-            }
-            if (this.mode === 'CheckBox') {
-                var args = {
-                    module: 'CheckBoxSelection',
-                    enable: this.mode === 'CheckBox',
-                    popupElement: this.popupWrapper
-                };
-                if (this.allowFiltering) {
-                    this.notify('searchBox', args);
-                    overAllHeight -= this.searchBoxHeight;
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight -= this.selectAllHeight;
                 }
-                addClass([this.popupWrapper], 'e-checkbox');
-            }
-            if (this.popupHeight !== 'auto') {
-                this.list.style.maxHeight = formatUnit(overAllHeight);
-                this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            else {
-                this.list.style.maxHeight = formatUnit(this.popupHeight);
-            }
-            this.popupObj = new Popup(this.popupWrapper, {
-                width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
-                relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
-                enableRtl: this.enableRtl, zIndex: this.zIndex,
-                close: function () {
-                    if (_this.popupObj.element.parentElement) {
-                        _this.popupObj.unwireScrollEvents();
-                        // For restrict the page scrolling in safari browser
-                        var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
-                        if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
-                            checkboxFilterInput.blur();
-                        }
-                        detach(_this.popupObj.element);
-                    }
-                },
-                open: function () {
-                    _this.popupObj.resolveCollision();
-                    if (!_this.isFirstClick) {
-                        var ulElement = _this.list.querySelector('ul');
-                        if (ulElement) {
-                            if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                                _this.targetElement().trim() !== '')) {
-                                _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
-                            }
-                        }
-                        _this.isFirstClick = true;
+                else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                }
+                else if (this.mode === 'CheckBox' && !this.showSelectAll) {
+                    this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                    overAllHeight = parseInt(this.popupHeight, 10);
+                    if (this.headerTemplate && this.header) {
+                        overAllHeight -= this.header.offsetHeight;
                     }
-                    _this.popupObj.wireScrollEvents();
-                    if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                        _this.targetElement().trim() !== '')) {
-                        _this.loadTemplate();
+                    if (this.footerTemplate && this.footer) {
+                        overAllHeight -= this.footer.offsetHeight;
                     }
-                    _this.setScrollPosition();
-                    if (_this.allowFiltering) {
-                        _this.notify('inputFocus', {
-                            module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
-                        });
+                }
+                if (this.mode === 'CheckBox') {
+                    var args = {
+                        module: 'CheckBoxSelection',
+                        enable: this.mode === 'CheckBox',
+                        popupElement: this.popupWrapper
+                    };
+                    if (this.allowFiltering) {
+                        this.notify('searchBox', args);
+                        overAllHeight -= this.searchBoxHeight;
                     }
-                }, targetExitViewport: function () {
-                    if (!Browser.isDevice) {
-                        _this.hidePopup();
+                    addClass([this.popupWrapper], 'e-checkbox');
+                }
+                if (this.popupHeight !== 'auto') {
+                    this.list.style.maxHeight = formatUnit(overAllHeight);
+                    this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                else {
+                    this.list.style.maxHeight = formatUnit(this.popupHeight);
+                }
+                this.popupObj = new Popup(this.popupWrapper, {
+                    width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },
+                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    enableRtl: this.enableRtl, zIndex: this.zIndex,
+                    close: function () {
+                        if (_this.popupObj.element.parentElement) {
+                            _this.popupObj.unwireScrollEvents();
+                            // For restrict the page scrolling in safari browser
+                            var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);
+                            if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {
+                                checkboxFilterInput.blur();
+                            }
+                            detach(_this.popupObj.element);
+                        }
+                    },
+                    open: function () {
+                        _this.popupObj.resolveCollision();
+                        if (!_this.isFirstClick) {
+                            var ulElement = _this.list.querySelector('ul');
+                            if (ulElement) {
+                                if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                                    _this.targetElement().trim() !== '')) {
+                                    _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
+                                }
+                            }
+                            _this.isFirstClick = true;
+                        }
+                        _this.popupObj.wireScrollEvents();
+                        if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
+                            _this.targetElement().trim() !== '')) {
+                            _this.loadTemplate();
+                        }
+                        _this.setScrollPosition();
+                        if (_this.allowFiltering) {
+                            _this.notify('inputFocus', {
+                                module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
+                            });
+                        }
+                    }, targetExitViewport: function () {
+                        if (!Browser.isDevice) {
+                            _this.hidePopup();
+                        }
                     }
+                });
+                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
+                    this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
-            });
-            if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
-                this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
+                this.popupObj.close();
+                this.popupWrapper.style.visibility = '';
             }
-            this.popupObj.close();
-            this.popupWrapper.style.visibility = '';
         }
     };
     MultiSelect.prototype.setHeaderTemplate = function () {
@@ -2130,6 +2164,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.removeValue(temp, e, null, true);
                     }
                 }
+                this.selectedElementID = null;
+                this.inputElement.removeAttribute('aria-activedescendant');
             }
             else {
                 this.clearAllCallback(e);
@@ -2233,11 +2269,12 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.search = function (e) {
         var _this = this;
+        this.resetFilteredData = true;
         if (!isNullOrUndefined(e)) {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -2321,7 +2358,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var temp;
         var tempData = this.listData;
         this.listData = this.mainData;
-        this.hiddenElement.innerHTML = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
         if (!isNullOrUndefined(this.value)) {
             for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
                 var listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);
@@ -2339,7 +2378,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     data += temp + delimiterChar + ' ';
                     text.push(temp);
                 }
-                this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML += '<option selected value ="' + this.value[index] + '">' + index + '</option>';
+                }
             }
         }
         this.setProperties({ text: text.toString() }, true);
@@ -2384,7 +2425,7 @@ var MultiSelect = /** @class */ (function (_super) {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        _super.prototype.render.call(this, isEmptyData);
+        _super.prototype.render.call(this, null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     };
@@ -2472,7 +2513,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction)) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
             var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
@@ -2551,10 +2592,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     selectItems[temp1 - 1].setAttribute('aria-selected', 'false');
                     if (this.mode === 'CheckBox') {
                         if (selectedItems && (selectedItems.length > (temp1 - 1))) {
-                            selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                             removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                         }
-                        selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');
                         removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');
                     }
                     temp1--;
@@ -2595,10 +2634,12 @@ var MultiSelect = /** @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();
             }
         }
     };
@@ -2610,9 +2651,9 @@ var MultiSelect = /** @class */ (function (_super) {
             addClass([element], className);
             this.updateMainList(false, element.getAttribute('data-value'), mainElement);
             element.setAttribute('aria-selected', 'true');
-            if (this.mode === 'CheckBox') {
-                var ariaCheck = element.firstElementChild.getAttribute('aria-checked');
-                if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {
+            if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {
+                var ariaCheck = element.getElementsByClassName('e-check').length;
+                if (ariaCheck === 0) {
                     this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });
                 }
             }
@@ -2620,7 +2661,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (this.chipCollectionWrapper) {
                 this.removeChipSelection();
             }
-            attributes(this.inputElement, { 'aria-activedescendant': element.id });
+            this.selectedElementID = element.id;
         }
     };
     MultiSelect.prototype.updateDelimeter = function (delimChar, e) {
@@ -2931,9 +2972,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.chipCollectionWrapper) {
             this.chipCollectionWrapper.style.display = 'none';
         }
-        this.viewWrapper.style.display = '';
-        this.viewWrapper.style.width = '';
-        this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
+        if (!isNullOrUndefined(this.viewWrapper)) {
+            this.viewWrapper.style.display = '';
+            this.viewWrapper.style.width = '';
+            this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
+        }
         if (this.value && this.value.length) {
             var data = '';
             var temp = void 0;
@@ -2984,7 +3027,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     overAllContainer = this.componentWrapper.offsetWidth -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
-                    if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
+                    if ((wrapperleng + downIconWidth + this.clearIconWidth) >= overAllContainer) {
                         if (tempData !== undefined && tempData !== '') {
                             temp = tempData;
                             index = tempIndex + 1;
@@ -2993,7 +3036,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         remaining = this.value.length - index;
                         wrapperleng = this.viewWrapper.offsetWidth +
                             parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);
-                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0
+                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer) && wrapperleng !== 0
                             && this.viewWrapper.innerHTML !== '') {
                             var textArr = [];
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
@@ -3003,7 +3046,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         break;
                     }
-                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
+                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) < overAllContainer) {
                         tempData = data;
                         tempIndex = index;
                     }
@@ -3021,8 +3064,10 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         else {
-            this.viewWrapper.innerHTML = '';
-            this.viewWrapper.style.display = 'none';
+            if (!isNullOrUndefined(this.viewWrapper)) {
+                this.viewWrapper.innerHTML = '';
+                this.viewWrapper.style.display = 'none';
+            }
         }
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
@@ -3095,29 +3140,41 @@ var MultiSelect = /** @class */ (function (_super) {
         return temp;
     };
     MultiSelect.prototype.unWireEvent = function () {
-        EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
+        }
         EventHandler.remove(window, 'resize', this.windowResize);
-        EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
-        EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
-        if (this.mode !== 'CheckBox') {
-            EventHandler.remove(this.inputElement, 'input', this.onInput);
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
+            EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
+            if (this.mode !== 'CheckBox') {
+                EventHandler.remove(this.inputElement, 'input', this.onInput);
+            }
+            EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
+            var formElement = closest(this.inputElement, 'form');
+            if (formElement) {
+                EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+            }
+            EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
         }
-        EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
-        var formElement = closest(this.inputElement, 'form');
-        if (formElement) {
-            EventHandler.remove(formElement, 'reset', this.resetValueHandler);
+        if (!isNullOrUndefined(this.componentWrapper)) {
+            EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
+            EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
+        }
+        if (!isNullOrUndefined(this.overAllClear)) {
+            EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
-        EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);
-        EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);
-        EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
     };
     MultiSelect.prototype.selectAllItem = function (state, event, list) {
         var li;
-        li = this.list.querySelectorAll(state ?
-            'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
-            'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        if (!isNullOrUndefined(this.list)) {
+            li = this.list.querySelectorAll(state ?
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)');
+        }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
@@ -3167,6 +3224,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         target.classList.remove('e-active');
                     }
                     target.classList.add('e-item-focus');
+                    this.updateAriaActiveDescendant();
                 }
                 this.textboxValueUpdate();
                 this.checkPlaceholderSize();
@@ -3181,6 +3239,7 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.updateValue(event, li, state);
         }
+        this.addValidInputClass();
     };
     MultiSelect.prototype.updateValue = function (event, li, state) {
         var _this = this;
@@ -3406,6 +3465,11 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {
         if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))
             || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
+            if (this.resetFilteredData) {
+                // The filtered data is not being reset in the component after the user focuses out.
+                this.resetMainList = !this.resetMainList ? this.mainList : this.resetMainList;
+                this.resetFilteredData = false;
+            }
             this.mainList = null;
             this.mainData = null;
             this.isFirstClick = false;
@@ -3466,6 +3530,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 'cssClass':
                     this.updateOldPropCssClass(oldProp.cssClass);
                     this.updateCssClass();
+                    Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
                     break;
                 case 'enableRtl':
                     this.enableRTL(newProp.enableRtl);
@@ -3492,6 +3557,11 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 'floatLabelType':
                     this.setFloatLabelType();
                     this.addValidInputClass();
+                    Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
+                    if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+                        this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+                    }
                     break;
                 case 'enableSelectionOrder':
                     break;
@@ -3551,7 +3621,9 @@ var MultiSelect = /** @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);
         });
     };
@@ -3610,7 +3682,7 @@ var MultiSelect = /** @class */ (function (_super) {
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,
      * but you can insert based on the index parameter.
      *
-     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
      */
@@ -3642,6 +3714,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.overAllWrapper.classList.remove(iconAnimation);
                     _this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
+                    _this.inputElement.removeAttribute('aria-owns');
+                    _this.inputElement.removeAttribute('aria-activedescendant');
                     if (_this.allowFiltering) {
                         _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });
                     }
@@ -3657,7 +3731,7 @@ var MultiSelect = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    MultiSelect.prototype.showPopup = function () {
+    MultiSelect.prototype.showPopup = function (e) {
         var _this = this;
         if (!this.enabled) {
             return;
@@ -3667,7 +3741,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    _super.prototype.render.call(_this);
+                    _super.prototype.render.call(_this, e);
                     if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
@@ -3683,7 +3757,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.beforePopupOpen = false;
                     return;
                 }
-                _this.onPopupShown();
+                _this.onPopupShown(e);
             }
         });
     };
@@ -3785,12 +3859,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 spellcheck: 'false',
                 type: 'text',
                 autocomplete: 'off',
-                tabindex: '0'
+                tabindex: '0',
+                role: 'combobox'
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';
@@ -3823,6 +3897,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.mode !== 'CheckBox') {
             this.hideOverAllClear();
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);
@@ -3830,6 +3907,11 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
+        }
         this.renderComplete();
     };
     MultiSelect.prototype.checkInitialValue = function () {
@@ -3911,11 +3993,13 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.addValidInputClass = function () {
-        if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
-            addClass([this.overAllWrapper], 'e-valid-input');
-        }
-        else {
-            removeClass([this.overAllWrapper], 'e-valid-input');
+        if (!isNullOrUndefined(this.overAllWrapper)) {
+            if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {
+                addClass([this.overAllWrapper], 'e-valid-input');
+            }
+            else {
+                removeClass([this.overAllWrapper], 'e-valid-input');
+            }
         }
     };
     MultiSelect.prototype.dropDownIcon = function () {
@@ -3966,15 +4050,19 @@ var MultiSelect = /** @class */ (function (_super) {
         this.ulElement = null;
         this.mainListCollection = null;
         _super.prototype.destroy.call(this);
-        var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
+        var temp = ['readonly', 'aria-disabled', 'placeholder'];
         var length = temp.length;
-        while (length > 0) {
-            this.inputElement.removeAttribute(temp[length - 1]);
-            length--;
+        if (!isNullOrUndefined(this.inputElement)) {
+            while (length > 0) {
+                this.inputElement.removeAttribute(temp[length - 1]);
+                length--;
+            }
+        }
+        if (!isNullOrUndefined(this.element)) {
+            this.element.removeAttribute('data-initial-value');
+            this.element.style.display = 'block';
         }
-        this.element.removeAttribute('data-initial-value');
-        this.element.style.display = 'block';
-        if (this.overAllWrapper.parentElement) {
+        if (this.overAllWrapper && this.overAllWrapper.parentElement) {
             if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {
                 remove(this.overAllWrapper);
             }
@@ -3983,6 +4071,25 @@ var MultiSelect = /** @class */ (function (_super) {
                 remove(this.overAllWrapper);
             }
         }
+        this.componentWrapper = null;
+        this.overAllClear = null;
+        this.overAllWrapper = null;
+        this.hiddenElement = null;
+        this.searchWrapper = null;
+        this.viewWrapper = null;
+        this.chipCollectionWrapper = null;
+        this.targetInputElement = null;
+        this.popupWrapper = null;
+        this.inputElement = null;
+        this.delimiterWrapper = null;
+        this.popupObj = null;
+        this.popupWrapper = null;
+        this.liCollections = null;
+        this.header = null;
+        this.mainList = null;
+        this.mainListCollection = null;
+        this.footer = null;
+        this.selectAllEventEle = null;
     };
     __decorate([
         Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)