@syncfusion/ej2-dropdowns 21.1.39 → 21.2.3

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

@@ -414,6 +414,9 @@ let DropDownBase = class DropDownBase extends Component {
             const noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);
             if (noDataCompTemp && noDataCompTemp.length > 0) {
                 for (let i = 0; i < noDataCompTemp.length; i++) {
+                    if (this.getModuleName() === 'listbox' && templateName === 'noRecordsTemplate') {
+                        noDataCompTemp[i].classList.add('e-list-nr-template');
+                    }
                     ele.appendChild(noDataCompTemp[i]);
                 }
             }
@@ -454,7 +457,13 @@ let DropDownBase = class DropDownBase extends Component {
     }
     getFormattedValue(value) {
         if (this.listData && this.listData.length) {
-            const item = this.typeOfData(this.listData);
+            let item;
+            if (this.properties.allowCustomValue && this.properties.value && this.properties.value instanceof Array && this.properties.value.length > 0) {
+                item = this.typeOfData(this.properties.value);
+            }
+            else {
+                item = this.typeOfData(this.listData);
+            }
             if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'
                 || item.typeof === 'number') {
                 return parseFloat(value);
@@ -4486,6 +4495,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.isClicked = false;
         // Specifies if the checkAll method has been called
         this.isCheckAllCalled = false;
+        this.isFromFilterChange = false;
     }
     /**
      * Get the properties to be maintained in the persisted state.
@@ -4696,6 +4706,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     filterHandler(value, event) {
+        this.isFromFilterChange = true;
         if (!this.isFilteredData) {
             this.treeData = this.treeObj.getTreeData();
         }
@@ -5170,7 +5181,7 @@ let DropDownTree = class DropDownTree extends Component {
                     case 'moveDown':
                         let focusedElement = this.treeObj.element.querySelector('li');
                         focusedElement.focus();
-                        addClass([focusedElement], ['e-hover', 'e-node-focus']);
+                        addClass([focusedElement], ['e-node-focus']);
                 }
             }
         });
@@ -5845,7 +5856,7 @@ let DropDownTree = class DropDownTree extends Component {
                     && this.treeItems.length > 0)) {
                     let focusedElement = this.treeObj.element.querySelector('li');
                     focusedElement.focus();
-                    addClass([focusedElement], ['e-hover', 'e-node-focus']);
+                    addClass([focusedElement], ['e-node-focus']);
                 }
                 if (this.checkSelectAll && this.checkBoxElement) {
                     const wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
@@ -5964,7 +5975,7 @@ let DropDownTree = class DropDownTree extends Component {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (this.inputWrapper != null && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
+        else if (!isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     }
@@ -6383,7 +6394,8 @@ let DropDownTree = class DropDownTree extends Component {
     }
     setMultiSelectValue(newValues) {
         if (!this.isFilteredData) {
-            this.setProperties({ value: newValues }, true);
+            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length == 0 ? this.value : newValues }, true);
+            this.isFromFilterChange = false;
             if (newValues && newValues.length !== 0 && !this.showCheckBox) {
                 this.treeObj.selectedNodes = this.value.slice();
                 this.treeObj.dataBind();
@@ -9129,7 +9141,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.trigger('open', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
                 this.focusAtFirstListItem();
-                document.body.appendChild(this.popupObj.element);
+                if (this.popupObj) {
+                    document.body.appendChild(this.popupObj.element);
+                }
                 if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
                     this.updateListItems(this.list.querySelectorAll('li.e-list-item'), this.mainList.querySelectorAll('li.e-list-item'));
                 }
@@ -9138,7 +9152,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
                 this.refreshPopup();
                 this.renderReactTemplates();
-                this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
+                if (this.popupObj) {
+                    this.popupObj.show(eventArgs.animation, (this.zIndex === 1000) ? this.element : null);
+                }
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
                 this.updateAriaActiveDescendant();
                 if (this.isFirstClick) {
@@ -10311,6 +10327,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.refreshSelection();
             }
         }
+        else if (!isNullOrUndefined(this.fields.groupBy) && this.value && this.value.length) {
+            this.refreshSelection();
+        }
     }
     removeSelectedChip(e) {
         const selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);
@@ -11919,7 +11938,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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;
@@ -11928,7 +11947,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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 !== '') {
                             const textArr = [];
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
@@ -11938,7 +11957,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         }
                         break;
                     }
-                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) < overAllContainer) {
+                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
                         tempData = data;
                         tempIndex = index;
                     }
@@ -14060,17 +14079,26 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const scrollMoved = 36;
         let scrollHeight = 10;
         if (this.itemTemplate && args.target) {
-            scrollHeight = args.target.scrollHeight;
+            if (args.target && args.target.closest('.e-list-item')) {
+                scrollHeight = args.target.closest('.e-list-item').scrollHeight;
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const listItem = args.element.querySelector('.e-list-item');
+                if (listItem) {
+                    scrollHeight = listItem.scrollHeight;
+                }
+            }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const event = args.event;
         let wrapper;
         if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
-            || (args.target.parentElement && args.target.parentElement.classList.contains('e-list-item'))
-            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
+            || args.target.closest('.e-list-item'))) {
             if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
-                || (args.target.parentElement && args.target.parentElement.classList.contains('e-list-item'))
-                || args.target.classList.contains('e-input-group')) {
+                || args.target.classList.contains('e-input-group')
+                || args.target.closest('.e-list-item')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -14355,6 +14383,13 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
      * @returns {void}
      */
     selectItems(items, state = true, isValue) {
+        if (state && !this.selectionSettings.showCheckbox && this.selectionSettings.mode === 'Single') {
+            this.getSelectedItems().forEach((li) => {
+                li.classList.remove('e-active');
+                li.removeAttribute('aria-selected');
+                removeClass([li], cssClass.selected);
+            });
+        }
         this.setSelection(items, state, !isValue);
         this.updateSelectedOptions();
     }