@syncfusion/ej2-dropdowns 19.3.44 → 19.3.48

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

@@ -3437,6 +3437,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         });
         prepend([this.hiddenElement], this.inputWrapper.container);
         this.validationAttribute(this.element, this.hiddenElement);
+        this.setReadOnly();
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
@@ -3564,6 +3565,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.actionData = this.actionCompleteData;
         }
         else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
+            this.actionCompleteData = this.getModuleName() === 'combobox' ?
+                { ulElement: null, list: null, isUpdated: false } : this.actionCompleteData;
             this.actionData = this.actionCompleteData;
         }
     }
@@ -3630,6 +3633,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     if (this.getModuleName() !== 'dropdownlist') {
                         Input.setReadonly(newProp.readonly, this.inputElement);
                     }
+                    this.setReadOnly();
                     break;
                 case 'cssClass':
                     this.setCssClass(newProp.cssClass, oldProp.cssClass);
@@ -3788,6 +3792,14 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         };
     }
+    setReadOnly() {
+        if (this.readonly) {
+            addClass([this.inputWrapper.container], ['e-readonly']);
+        }
+        else {
+            removeClass([this.inputWrapper.container], ['e-readonly']);
+        }
+    }
     setCssClass(newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -4347,9 +4359,9 @@ let DropDownTree = class DropDownTree extends Component {
         this.createClearIcon();
         this.inputWrapper.classList.add(DROPDOWNTREE);
         this.setElementWidth(this.width);
-        this.setAttributes();
         this.updateDataAttribute();
         this.setHTMLAttributes();
+        this.setAttributes();
         this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
@@ -4635,9 +4647,6 @@ let DropDownTree = class DropDownTree extends Component {
             this.isClearButtonClick = false;
             return;
         }
-        if (!this.wrapText && e.target.classList.contains(CHIP_CLOSE)) {
-            this.removeChip(e);
-        }
         if (this.isPopupOpen) {
             this.hidePopup();
         }
@@ -4708,7 +4717,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.trigger('blur');
     }
     updateView() {
-        if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom') {
+        if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom' || this.inputFocus) {
             return;
         }
         if (this.mode !== 'Box') {
@@ -4867,11 +4876,18 @@ let DropDownTree = class DropDownTree extends Component {
                 switch (e.action) {
                     case 'escape':
                     case 'altUp':
+                        if (this.isPopupOpen) {
+                            this.hidePopup();
+                        }
+                        break;
                     case 'shiftTab':
                     case 'tab':
                         if (this.isPopupOpen) {
                             this.hidePopup();
                         }
+                        if (this.inputFocus) {
+                            this.onFocusOut();
+                        }
                         break;
                     case 'altDown':
                         if (!this.isPopupOpen) {
@@ -5140,10 +5156,10 @@ let DropDownTree = class DropDownTree extends Component {
             this.inputWrapper.insertBefore(this.chipWrapper, this.hiddenElement);
             addClass([this.inputWrapper], SHOW_CHIP);
             const isValid = this.getValidMode();
-            if (isValid && this.value !== null) {
+            if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null) {
+            else if (this.value === null || (this.value && this.value.length === 0)) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -5240,7 +5256,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     setAttributes() {
-        this.element.removeAttribute('tabindex');
+        this.inputEle.setAttribute('tabindex', '-1');
         const id = this.element.getAttribute('id');
         this.hiddenElement.id = id + '_hidden';
         this.inputWrapper.setAttribute('tabindex', '0');
@@ -5415,7 +5431,6 @@ let DropDownTree = class DropDownTree extends Component {
         else {
             if (this.showCheckBox) {
                 this.treeObj.checkedNodes = this.value.slice();
-                setValue('selectedNodes', [], this.treeObj);
                 this.treeObj.dataBind();
                 this.setMultiSelect();
             }
@@ -7754,6 +7769,7 @@ let ComboBox = class ComboBox extends DropDownList {
                         EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);
                         EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);
                     }
+                    this.setReadOnly();
                     break;
                 case 'allowFiltering':
                     this.setSearchBox();
@@ -10913,6 +10929,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         setValue(this.fields.value, value, newValue);
                         const noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
                         this.addItem(newValue, indexItem);
+                        element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
@@ -10961,6 +10978,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.popupObj = null;
             this.renderPopup();
         }
+        else if (this.allowCustomValue) {
+            this.list = list;
+            this.mainList = this.ulElement = list.querySelector('ul');
+        }
     }
     updateDataList() {
         if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
@@ -11439,16 +11460,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 l10n = new L10n('dropdowns', l10nLocale, this.locale);
             }
             const remainContent = l10n.getConstant('overflowCountTemplate');
+            const totalContent = l10n.getConstant('totalCountTemplate');
             const raminElement = this.createElement('span', {
                 className: REMAIN_WRAPPER$1
             });
-            const compiledString = compile(remainContent);
-            const totalCompiledString = compile(l10n.getConstant('totalCountTemplate'));
-            // eslint-disable-next-line
-            let remainCompildTemp = compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);
-            if (remainCompildTemp && remainCompildTemp.length > 0) {
-                raminElement.appendChild(remainCompildTemp[0]);
-            }
+            let remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
+            raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
             this.renderReactTemplates();
             const remainSize = raminElement.offsetWidth;
@@ -11500,9 +11517,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             if (remaining > 0) {
                 const totalWidth = overAllContainer - downIconWidth - this.clearIconWidth;
-                this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, compiledString, totalCompiledString, totalWidth));
+                this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth));
                 this.updateRemainWidth(this.viewWrapper, totalWidth);
-                this.updateRemainingText(raminElement, downIconWidth, remaining, compiledString, totalCompiledString);
+                this.updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent);
             }
         }
         else {
@@ -11522,17 +11539,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             viewWrapper.style.width = totalWidth + 'px';
         }
     }
-    updateRemainTemplate(raminElement, viewWrapper, remaining, compiledString, totalCompiledString, totalWidth) {
+    updateRemainTemplate(raminElement, viewWrapper, remaining, remainContent, totalContent, totalWidth) {
         if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {
             viewWrapper.removeChild(viewWrapper.firstChild);
         }
         raminElement.innerHTML = '';
-        // eslint-disable-next-line
-        let remainTemp = compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);
-        // eslint-disable-next-line
-        let totalTemp = totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate, null, raminElement);
-        raminElement.appendChild((viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ?
-            remainTemp && remainTemp[0] : totalTemp && totalTemp[0]);
+        let remainTemp = remainContent.replace('${count}', remaining.toString());
+        let totalTemp = totalContent.replace('${count}', remaining.toString());
+        raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;
         if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {
             viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
         }
@@ -11542,7 +11556,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         return raminElement;
     }
-    updateRemainingText(raminElement, downIconWidth, remaining, compiledString, totalCompiledString) {
+    updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent) {
         const overAllContainer = this.componentWrapper.offsetWidth -
             parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
             parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
@@ -11561,7 +11575,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 wrapperleng = this.viewWrapper.offsetWidth;
             }
             const totalWidth = overAllContainer - downIconWidth;
-            this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, compiledString, totalCompiledString, totalWidth);
+            this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);
         }
     }
     getOverflowVal(index) {
@@ -13516,6 +13530,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             args.items = this.getDataByValues([dragValue]);
         }
         this.trigger('beforeDrop', args);
+        if (args.isDragAll !== null) {
+            this.allowDragAll = args.isDragAll;
+        }
     }
     dragEnd(args) {
         let listData;