@syncfusion/ej2-dropdowns 19.3.47 → 19.3.56

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

@@ -2129,7 +2129,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.isSelectFocusItem(focusEle)) {
             this.setSelection(focusEle, e);
         }
-        else {
+        else if (!isNullOrUndefined(this.liCollections)) {
             var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
             var startIndex = 0;
             if (this.getModuleName() === 'autocomplete') {
@@ -4319,6 +4319,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line
         _this.selectedData = [];
         _this.filterDelayTime = 300;
+        _this.isClicked = false;
         return _this;
     }
     /**
@@ -4804,7 +4805,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.trigger('blur');
     };
     DropDownTree.prototype.updateView = function () {
-        if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom') {
+        if ((!this.showCheckBox && !this.allowMultiSelection) || this.mode === 'Custom' || this.inputFocus) {
             return;
         }
         if (this.mode !== 'Box') {
@@ -5246,10 +5247,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.inputWrapper.insertBefore(this.chipWrapper, this.hiddenElement);
             addClass([this.inputWrapper], SHOW_CHIP);
             var 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);
             }
         }
@@ -5290,8 +5291,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);
         if (!isNullOrUndefined(this.checkWrapper)) {
+            this.isClicked = true;
             var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);
             this.changeState(this.checkWrapper, checkElement.classList.contains(CHECK) ? 'uncheck' : 'check', e);
+            this.isClicked = false;
         }
         e.preventDefault();
     };
@@ -5513,6 +5516,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.setValidValue = function () {
+        var _this = this;
         if (!this.showCheckBox && !this.allowMultiSelection) {
             Input.setValue(this.text, this.inputEle, this.floatLabelType);
             var id = this.value[0].toString();
@@ -5522,10 +5526,14 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (this.showCheckBox) {
-                this.treeObj.checkedNodes = this.value.slice();
-                setValue('selectedNodes', [], this.treeObj);
-                this.treeObj.dataBind();
-                this.setMultiSelect();
+                var difference = this.value.filter(function (e) {
+                    return _this.treeObj.checkedNodes.indexOf(e) === -1;
+                });
+                if (difference.length > 0 || this.treeSettings.autoCheck) {
+                    this.treeObj.checkedNodes = this.value.slice();
+                    this.treeObj.dataBind();
+                    this.setMultiSelect();
+                }
             }
             else {
                 this.treeObj.selectedNodes = this.value.slice();
@@ -5991,7 +5999,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         var eventArgs = {
             action: this.showCheckBox ? state : args.action,
-            isInteracted: args.isInteracted,
+            isInteracted: this.isClicked ? true : args.isInteracted,
             item: args.node,
             itemData: this.showCheckBox ? checkData[0] : selectData
         };
@@ -6062,6 +6070,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         var target = args.event.target;
         if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
+            this.isClicked = true;
             // eslint-disable-next-line
             var getNodeDetails = this.treeObj.getNode(args.node);
             if (getNodeDetails.isChecked === 'true') {
@@ -6070,6 +6079,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.treeObj.checkAll([args.node]);
             }
+            this.isClicked = false;
             this.setMultiSelect();
             this.ensurePlaceHolder();
         }
@@ -6561,6 +6571,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.ensurePlaceHolder();
     };
     DropDownTree.prototype.resetValue = function (isDynamicChange) {
+        if (this.value == [] && this.text == null) {
+            return;
+        }
         Input.setValue(null, this.inputEle, this.floatLabelType);
         if (!isDynamicChange) {
             this.oldValue = this.value;
@@ -6572,7 +6585,8 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         setValue('selectedNodes', [], this.treeObj);
         this.hiddenElement.innerHTML = '';
         if (this.showCheckBox) {
-            this.treeObj.uncheckAll();
+            this.treeObj.checkedNodes = [];
+            this.treeObj.dataBind();
             this.setMultiSelect();
             this.clearCheckAll();
         }
@@ -6950,8 +6964,8 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                         this.updateTemplate();
                     }
                     this.treeObj.sortOrder = newProp.sortOrder;
-                    this.updateValue(this.value);
                     this.treeObj.dataBind();
+                    this.updateValue(this.value);
                     break;
                 case 'showDropDownIcon':
                     this.updateDropDownIconState(newProp.showDropDownIcon);
@@ -9512,6 +9526,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.inputFocus = false;
         this.overAllWrapper.classList.remove(FOCUS);
+        if (this.addTagOnBlur) {
+            var dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);
+            var listLiElement = this.findListElement(this.list, 'li', 'data-value', dataChecks);
+            var className = this.hideSelectedItem ? HIDE_LIST : dropDownBaseClasses.selected;
+            var allowChipAddition = (listLiElement && !listLiElement.classList.contains(className)) ? true : false;
+            if (allowChipAddition) {
+                this.updateListSelection(listLiElement, eve);
+                if (this.mode === 'Delimiter') {
+                    this.updateDelimeter(this.delimiterChar);
+                }
+            }
+        }
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -9734,6 +9760,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (!isNullOrUndefined(focusedItem)) {
             this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
+            if (this.allowFiltering) {
+                var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
+                filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
+            }
+            else if (this.mode == "CheckBox") {
+                this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
+            }
         }
     };
     MultiSelect.prototype.homeNavigation = function (isHome) {
@@ -9849,7 +9882,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.keyAction = true;
         if (document.activeElement.classList.contains(FILTERINPUT)
             || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {
-            this.list.focus();
             EventHandler.add(this.list, 'keydown', this.onKeyDown, this);
         }
         this.updateAriaAttribute();
@@ -10872,7 +10904,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(this.inputElement, 'input', this.onInput, this);
         }
         EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);
-        EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);
+        EventHandler.add(this.componentWrapper, 'mouseover', this.mouseIn, this);
         var formElement = closest(this.inputElement, 'form');
         if (formElement) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
@@ -11618,16 +11650,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 l10n = new L10n('dropdowns', l10nLocale, this.locale);
             }
             var remainContent = l10n.getConstant('overflowCountTemplate');
+            var totalContent = l10n.getConstant('totalCountTemplate');
             var raminElement = this.createElement('span', {
                 className: REMAIN_WRAPPER$1
             });
-            var compiledString = compile(remainContent);
-            var totalCompiledString = compile(l10n.getConstant('totalCountTemplate'));
-            // eslint-disable-next-line
-            var remainCompildTemp = compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);
-            if (remainCompildTemp && remainCompildTemp.length > 0) {
-                raminElement.appendChild(remainCompildTemp[0]);
-            }
+            var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
+            raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
             this.renderReactTemplates();
             var remainSize = raminElement.offsetWidth;
@@ -11679,9 +11707,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
             if (remaining > 0) {
                 var 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 {
@@ -11701,17 +11729,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             viewWrapper.style.width = totalWidth + 'px';
         }
     };
-    MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining, compiledString, totalCompiledString, totalWidth) {
+    MultiSelect.prototype.updateRemainTemplate = function (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
-        var remainTemp = compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate, null, raminElement);
-        // eslint-disable-next-line
-        var 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]);
+        var remainTemp = remainContent.replace('${count}', remaining.toString());
+        var 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);
         }
@@ -11721,7 +11746,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         return raminElement;
     };
-    MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, compiledString, totalCompiledString) {
+    MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, remainContent, totalContent) {
         var overAllContainer = this.componentWrapper.offsetWidth -
             parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
             parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
@@ -11740,7 +11765,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 wrapperleng = this.viewWrapper.offsetWidth;
             }
             var totalWidth = overAllContainer - downIconWidth;
-            this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, compiledString, totalCompiledString, totalWidth);
+            this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);
         }
     };
     MultiSelect.prototype.getOverflowVal = function (index) {
@@ -11775,7 +11800,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
         EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);
-        EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);
+        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);
@@ -12746,6 +12771,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __decorate$5([
         Property(true)
     ], MultiSelect.prototype, "openOnClick", void 0);
+    __decorate$5([
+        Property(false)
+    ], MultiSelect.prototype, "addTagOnBlur", void 0);
     __decorate$5([
         Event()
     ], MultiSelect.prototype, "change", void 0);
@@ -12939,7 +12967,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
             }
             if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
                 !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
-                !isNullOrUndefined(this.parent.value) && this.parent.value.length <= 1)) {
+                this.parent.listData && this.parent.listData.length <= 1)) {
                 this.checkAllParent.style.display = 'none';
             }
             else {