@syncfusion/ej2-dropdowns 28.2.3 → 28.2.5

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

@@ -901,6 +901,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.CurrentEvent = null;
         this.isDynamicData = false;
         this.isPrimitiveData = false;
+        this.isCustomFiltering = false;
         this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1483,7 +1484,7 @@ let DropDownBase = class DropDownBase extends Component {
                                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                                 newQuery.queries[queryElements].e.nos = e.count;
                                             }
-                                            if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
+                                            if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
                                                 isReOrder = false;
                                             }
                                         }
@@ -1507,6 +1508,7 @@ let DropDownBase = class DropDownBase extends Component {
                             this.trigger('actionComplete', e, (e) => {
                                 if (!e.cancel) {
                                     this.isRequesting = false;
+                                    this.isCustomFiltering = false;
                                     const listItems = e.result;
                                     if (this.isIncrementalRequest) {
                                         ulElement = this.renderItems(listItems, fields);
@@ -1544,6 +1546,7 @@ let DropDownBase = class DropDownBase extends Component {
                                     }
                                     if (this.isVirtualizationEnabled) {
                                         this.getFilteringSkeletonCount();
+                                        this.updatePopupPosition();
                                     }
                                     if (this.virtualSelectAll && this.virtualSelectAllData) {
                                         this.virtualSelectionAll(this.virtualSelectAllState, this.liCollections, this.CurrentEvent);
@@ -1585,7 +1588,7 @@ let DropDownBase = class DropDownBase extends Component {
                                             newQuery.queries[queryElements].e.nos = listItems.count;
                                             listItems = (newQuery).executeLocal(dataManager);
                                         }
-                                        if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
+                                        if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
                                             isReOrder = false;
                                         }
                                     }
@@ -1618,6 +1621,7 @@ let DropDownBase = class DropDownBase extends Component {
                         const localDataArgs = { cancel: false, result: listItems };
                         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                         this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
+                            this.isCustomFiltering = false;
                             if (this.isIncrementalRequest) {
                                 ulElement = this.renderItems(localDataArgs.result, fields);
                                 return;
@@ -1652,6 +1656,9 @@ let DropDownBase = class DropDownBase extends Component {
     updatePopupState() {
         // Used this method in component side.
     }
+    updatePopupPosition() {
+        // Used this method in component side.
+    }
     virtualSelectionAll(state, li, event) {
         // Used this method in component side.
     }
@@ -5292,6 +5299,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         const args = { cancel: false };
         this.trigger('beforeOpen', args, (args) => {
+            let initialPopupHeight;
             if (!args.cancel) {
                 const popupEle = this.createElement('div', {
                     id: this.element.id + '_popup', className: 'e-ddl e-popup ' + (this.cssClass !== null ? this.cssClass : '')
@@ -5312,6 +5320,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 document.body.appendChild(popupEle);
                 popupEle.style.top = '0px';
+                initialPopupHeight = popupEle.clientHeight;
                 if (this.enableVirtualization && this.itemTemplate) {
                     const listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
                     this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) +
@@ -5508,7 +5517,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     // Add the resizer div to the popup
                     if (this.list && this.list.parentElement) {
                         this.list.parentElement.classList.add('e-resize');
-                        if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+                        if (this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight > parseInt(this.popupHeight.toString(), 10)) {
                             this.list.parentElement.style.height = '100%';
                         }
                         this.list.parentElement.style.paddingBottom = (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.searchBoxHeight) ? (this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';
@@ -8489,7 +8498,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.inputEle.setAttribute('aria-label', this.getModuleName());
         const id = this.element.getAttribute('id');
         this.hiddenElement.id = id + '_hidden';
-        this.inputWrapper.setAttribute('tabindex', '0');
+        this.inputWrapper.setAttribute('tabindex', this.inputWrapper.classList.contains('e-disabled') ? '-1' : '0');
         this.inputWrapper.setAttribute('aria-label', this.getModuleName());
         attributes(this.inputWrapper, this.getAriaAttributes());
     }
@@ -8849,9 +8858,11 @@ let DropDownTree = class DropDownTree extends Component {
                 removeClass([this.popupEle], DDTHIDEICON);
                 this.updatePopupHeight();
                 this.popupObj.refreshPosition();
-                if (!(this.showCheckBox && this.showSelectAll) && (!this.popupDiv.classList.contains(NODATA)
-                    && this.treeItems.length > 0)) {
-                    let focusedElement = this.value != null && this.text != null ? this.treeObj.element.querySelector('[data-uid="' + this.value[0] + '"]') : null;
+                if (this.showSelectAll && !this.allowFiltering) {
+                    this.checkAllParent.focus();
+                }
+                if ((!this.popupDiv.classList.contains(NODATA) && this.treeItems.length > 0)) {
+                    let focusedElement = this.value != null || this.text != null ? this.treeObj.element.querySelector('[data-uid="' + this.value[0] + '"]') : null;
                     if (focusedElement) {
                         this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
                         focusedElement.setAttribute('tabindex', '0');
@@ -9190,7 +9201,9 @@ let DropDownTree = class DropDownTree extends Component {
             this.updateTemplate();
         }
         this.treeObj.fields = this.getTreeFields(this.fields);
+        this.setProperties({ value: this.oldValue }, true);
         this.treeObj.dataBind();
+        this.updateValue(this.value);
     }
     getEventArgs(args) {
         const checkData = args.data;
@@ -9759,6 +9772,9 @@ let DropDownTree = class DropDownTree extends Component {
         }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     }
     setSelectAllWrapper(state) {
         if (this.isFirstRender) {
@@ -10198,8 +10214,10 @@ let DropDownTree = class DropDownTree extends Component {
                     this.updateFilterPlaceHolder();
                     break;
                 case 'value':
-                    this.oldValue = oldProp.value;
-                    this.updateValue(newProp.value);
+                    if (JSON.stringify(oldProp.value) !== JSON.stringify(newProp.value)) {
+                        this.oldValue = oldProp.value;
+                        this.updateValue(newProp.value);
+                    }
                     break;
                 case 'text':
                     this.updateText(newProp.text);
@@ -10485,6 +10503,9 @@ let DropDownTree = class DropDownTree extends Component {
                     addClass([this.inputWrapper], [INPUTFOCUS]);
                 }
             }
+            if (this.isFilteredData) {
+                this.treeObj['treeData'] = this.treeData;
+            }
             if (this.destroyPopupOnHide) {
                 this.isFirstRender = true;
                 this.destroyPopup();
@@ -13994,6 +14015,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 break;
         }
     }
+    updatePopupPosition() {
+        this.refreshPopup();
+    }
     updateAriaAttribute() {
         const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (!isNullOrUndefined(focusedItem)) {
@@ -15850,6 +15874,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.isFiltered = true;
                         this.customFilterQuery = query;
                         this.remoteFilterAction = true;
+                        this.isCustomFiltering = true;
                         this.dataUpdater(dataSource, query, fields);
                     },
                     event: e,
@@ -19479,6 +19504,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     constructor(options, element) {
         super(options, element);
         this.isValidKey = false;
+        this.isBackSpace = false;
         this.isDataSourceUpdate = false;
         this.keyDownStatus = false;
     }
@@ -19809,8 +19835,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 }
                 filterElem.selectionStart = txtLength;
                 filterElem.selectionEnd = txtLength;
-                if (filterElem.value !== '') {
+                if (filterElem.value !== '' || (filterElem.value === '' && this.isBackSpace)) {
                     filterElem.focus();
+                    setTimeout(() => { this.isBackSpace = false; });
                 }
             }
         }
@@ -21388,7 +21415,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     KeyUp(e) {
-        if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || (e.keyCode === 8 && !this.filterInput.value))) {
+        if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
             e.preventDefault();
             return;
         }
@@ -21397,6 +21424,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         if (!isNullOrUndefined(isWordCharacter)) {
             this.isValidKey = true;
         }
+        this.isBackSpace = e.keyCode === 8;
         this.isValidKey = (e.keyCode === 8) || (e.keyCode === 46) || this.isValidKey;
         if (this.isValidKey) {
             this.isValidKey = false;