@syncfusion/ej2-dropdowns 19.3.48 → 19.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.48
+*  version : 19.4.38
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@19.3.47",
+  "_id": "@syncfusion/ej2-dropdowns@18.34.12",
   "_inBundle": false,
-  "_integrity": "sha512-80BHmVskObNOXm5mfDPntsER6/i+RQ6fpuov+/D4vOu/709QxiT//IUbVDa5THRYsb1PtL16Wyi+exLRsTdO0w==",
+  "_integrity": "sha512-GpZ9oh7UZXwnybsQmiiBdwawlGvjrvCBIG0qtHQ5La0zjOsOKVIYPk3Lu+CvXwLu3FuxLXFCfy5JiBA/AA9WAg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.3.47.tgz",
-  "_shasum": "695e0edaacca56306c171fb36cd82230e468ee67",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.34.12.tgz",
+  "_shasum": "0c4856ee2b4172eae286c065c85c47e0ee581236",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -42,12 +42,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.47",
-    "@syncfusion/ej2-data": "~19.3.47",
-    "@syncfusion/ej2-inputs": "~19.3.48",
-    "@syncfusion/ej2-lists": "~19.3.48",
-    "@syncfusion/ej2-navigations": "~19.3.46",
-    "@syncfusion/ej2-popups": "~19.3.47"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-data": "~19.4.38",
+    "@syncfusion/ej2-inputs": "~19.4.38",
+    "@syncfusion/ej2-lists": "~19.4.38",
+    "@syncfusion/ej2-navigations": "~19.4.38",
+    "@syncfusion/ej2-popups": "~19.4.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "19.3.48",
+  "version": "19.4.38",
   "sideEffects": false
 }

package/src/combo-box/combo-box.js

@@ -234,7 +234,7 @@ var ComboBox = /** @class */ (function (_super) {
         if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&
             !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {
             var inputValue = this.inputElement.value;
-            var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);
+            var activeItem = Search(inputValue, this.liCollections, this.filterType, true);
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -391,7 +391,7 @@ var ComboBox = /** @class */ (function (_super) {
         else {
             this.activeIndex = null;
             this.removeSelection();
-            if (this.liCollections && this.liCollections.length < 0) {
+            if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {
                 this.removeFocus();
             }
         }

package/src/common/incremental-search.d.ts

@@ -1,7 +1,7 @@
 /**
  * IncrementalSearch module file
  */
-export declare type SearchType = 'StartsWith' | 'Equal';
+export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
 /**
  * Search and focus the list item based on key code matches with list text content
  *

package/src/common/incremental-search.js

@@ -83,7 +83,7 @@ export function Search(inputVal, items, searchType, ignoreCase) {
         for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {
             var item = itemsData[i];
             var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
-            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {
+            if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
                 return { item: item, index: i };

package/src/drop-down-base/drop-down-base.js

@@ -492,6 +492,11 @@ var DropDownBase = /** @class */ (function (_super) {
                                 _this.renderGroupTemplate(ulElement);
                             }
                             _this.bindChildItems(localDataArgs.result, ulElement, fields);
+                            setTimeout(function () {
+                                if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && ulElement.children[0].childElementCount > 0)) {
+                                    _this.updateDataList();
+                                }
+                            });
                         }
                     });
                 }
@@ -623,10 +628,22 @@ var DropDownBase = /** @class */ (function (_super) {
                 var groupValue = select(this.groupTemplate, document).innerHTML.trim();
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);
+                //EJ2-55168- Group checkbox is not working with group template
+                if (this.isGroupChecking) {
+                    for (var i = 0; i < tempHeaders.length; i++) {
+                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
+                    }
+                }
             }
             else {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);
+                //EJ2-55168- Group checkbox is not working with group template
+                if (this.isGroupChecking) {
+                    for (var i = 0; i < tempHeaders.length; i++) {
+                        this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });
+                    }
+                }
             }
             this.renderReactTemplates();
         }

package/src/drop-down-list/drop-down-list.js

@@ -703,7 +703,7 @@ var DropDownList = /** @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') {

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -282,6 +282,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private filterDelayTime;
     private nestedTableUpdate;
     private clearIconWidth;
+    private isClicked;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.

package/src/drop-down-tree/drop-down-tree.js

@@ -164,6 +164,7 @@ var DropDownTree = /** @class */ (function (_super) {
         // eslint-disable-next-line
         _this.selectedData = [];
         _this.filterDelayTime = 300;
+        _this.isClicked = false;
         return _this;
     }
     /**
@@ -1135,8 +1136,10 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);
         if (!isNOU(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();
     };
@@ -1358,6 +1361,7 @@ var DropDownTree = /** @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();
@@ -1367,9 +1371,14 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         else {
             if (this.showCheckBox) {
-                this.treeObj.checkedNodes = this.value.slice();
-                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();
@@ -1835,7 +1844,7 @@ var DropDownTree = /** @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
         };
@@ -1906,6 +1915,7 @@ var DropDownTree = /** @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') {
@@ -1914,6 +1924,7 @@ var DropDownTree = /** @class */ (function (_super) {
             else {
                 this.treeObj.checkAll([args.node]);
             }
+            this.isClicked = false;
             this.setMultiSelect();
             this.ensurePlaceHolder();
         }
@@ -2406,6 +2417,9 @@ var DropDownTree = /** @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;
@@ -2417,7 +2431,8 @@ var DropDownTree = /** @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();
         }
@@ -2795,8 +2810,8 @@ var DropDownTree = /** @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);

package/src/list-box/list-box.d.ts

@@ -678,10 +678,6 @@ export interface DropEventArgs {
      * Illustrates whether the current action needs to be prevented or not.
      */
     cancel?: boolean;
-    /**
-     * Illustrates whether the drag all action needs to be prevented or not.
-     */
-    isDragAll?: boolean | null;
     /**
      * Returns the selected list items.
      */

package/src/list-box/list-box.js

@@ -438,9 +438,6 @@ var ListBox = /** @class */ (function (_super) {
             args.items = this.getDataByValues([dragValue]);
         }
         this.trigger('beforeDrop', args);
-        if (args.isDragAll !== null) {
-            this.allowDragAll = args.isDragAll;
-        }
     };
     ListBox.prototype.dragEnd = function (args) {
         var _this = this;

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

@@ -148,7 +148,7 @@ var CheckBoxSelection = /** @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 {

package/src/multi-select/multi-select-model.d.ts

@@ -1,4 +1,4 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } 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, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses, PopupEventArgs, FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, BeforeOpenEventArgs, FilterType, FieldSettings, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, FloatLabelType } 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, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend, Complex } from '@syncfusion/ej2-base';import { Search } from '../common/incremental-search';import { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,ISelectAllEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -443,6 +443,15 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     openOnClick?: boolean;
 
+    /**
+     * By default, the typed value is converting into chip or update as value of the component when you press the enter key or select from the popup.
+     * If you want to convert the typed value into chip or update as value of the component while focusing out the component, then enable this property.
+     * If custom value is enabled, both custom value and value present in the list are converted into tag while focusing out the component; Otherwise, value present in the list is converted into tag while focusing out the component.
+     *
+     * @default false
+     */
+    addTagOnBlur?: boolean; 
+
     /**
      * Fires each time when selection changes happened in list items after model and input value get affected.
      *

package/src/multi-select/multi-select.d.ts

@@ -440,6 +440,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default true
      */
     openOnClick: boolean;
+    /**
+     * By default, the typed value is converting into chip or update as value of the component when you press the enter key or select from the popup.
+     * If you want to convert the typed value into chip or update as value of the component while focusing out the component, then enable this property.
+     * If custom value is enabled, both custom value and value present in the list are converted into tag while focusing out the component; Otherwise, value present in the list is converted into tag while focusing out the component.
+     *
+     * @default false
+     */
+    addTagOnBlur: boolean;
     /**
      * Fires each time when selection changes happened in list items after model and input value get affected.
      *
@@ -787,6 +795,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     onPropertyChanged(newProp: MultiSelectModel, oldProp: MultiSelectModel): void;
     private reInitializePoup;
+    private presentItemValue;
+    private addNonPresentItems;
     private updateVal;
     /**
      * Adds a new item to the multiselect popup list. By default, new item appends to the list as the last item,

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

@@ -421,7 +421,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.mainData = list;
             this.mainListCollection = this.liCollections;
         }
-        else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {
+        else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {
             this.mainData = list;
         }
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
@@ -815,6 +815,18 @@ var MultiSelect = /** @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();
@@ -1037,6 +1049,13 @@ var MultiSelect = /** @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) {
@@ -1152,7 +1171,6 @@ var MultiSelect = /** @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();
@@ -2175,7 +2193,7 @@ var MultiSelect = /** @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);
@@ -2425,7 +2443,9 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
         if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
             this.mainList = this.ulElement;
-            addClass([li], HIDE_LIST);
+            if (this.hideSelectedItem) {
+                addClass([li], HIDE_LIST);
+            }
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2443,7 +2463,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement && this.mainList.childElementCount < this.ulElement.childElementCount) {
+        if (this.mainList && this.ulElement && (this.mainList.childElementCount < this.ulElement.childElementCount || ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)))) {
             this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
         }
     };
@@ -3071,7 +3091,7 @@ var MultiSelect = /** @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);
@@ -3489,6 +3509,25 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    MultiSelect.prototype.presentItemValue = function (ulElement) {
+        var valuecheck = [];
+        for (var i = 0; i < this.value.length; i++) {
+            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            if (!checkEle) {
+                valuecheck.push(this.value[i]);
+            }
+        }
+        return valuecheck;
+    };
+    ;
+    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);
+            _this.updateActionList(ulElement, list, event);
+        });
+    };
+    ;
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -3497,31 +3536,43 @@ var MultiSelect = /** @class */ (function (_super) {
             this.onLoadSelect();
         }
         else {
-            if (prop === 'text') {
-                this.initialTextUpdate();
-                newProp = this.value;
-            }
-            if (isNullOrUndefined(this.value) || this.value.length === 0) {
-                this.tempValues = oldProp;
-            }
-            // eslint-disable-next-line
-            if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
-                && this.isPopupOpen() && this.mainData !== this.listData) {
-                var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-                this.onActionComplete(list, this.mainData);
+            var valuecheck = [];
+            if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+                valuecheck = this.presentItemValue(this.ulElement);
             }
-            this.initialValueUpdate();
-            if (this.mode !== 'Box' && !this.inputFocus) {
-                this.updateDelimView();
+            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+                && this.listData != null) {
+                this.mainData = null;
+                this.setDynValue = true;
+                this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             }
-            if (!this.inputFocus) {
-                this.refreshInputHight();
-            }
-            this.refreshPlaceHolder();
-            if (this.mode !== 'CheckBox' && this.changeOnBlur) {
-                this.updateValueState(null, newProp, oldProp);
+            else {
+                if (prop === 'text') {
+                    this.initialTextUpdate();
+                    newProp = this.value;
+                }
+                if (isNullOrUndefined(this.value) || this.value.length === 0) {
+                    this.tempValues = oldProp;
+                }
+                // eslint-disable-next-line
+                if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus
+                    && this.isPopupOpen() && this.mainData !== this.listData) {
+                    var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+                    this.onActionComplete(list, this.mainData);
+                }
+                this.initialValueUpdate();
+                if (this.mode !== 'Box' && !this.inputFocus) {
+                    this.updateDelimView();
+                }
+                if (!this.inputFocus) {
+                    this.refreshInputHight();
+                }
+                this.refreshPlaceHolder();
+                if (this.mode !== 'CheckBox' && this.changeOnBlur) {
+                    this.updateValueState(null, newProp, oldProp);
+                }
+                this.checkPlaceholderSize();
             }
-            this.checkPlaceholderSize();
         }
         if (!this.changeOnBlur) {
             this.updateValueState(null, newProp, oldProp);
@@ -4042,6 +4093,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "openOnClick", void 0);
+    __decorate([
+        Property(false)
+    ], MultiSelect.prototype, "addTagOnBlur", void 0);
     __decorate([
         Event()
     ], MultiSelect.prototype, "change", void 0);

package/styles/auto-complete/_fluent-definition.scss

@@ -0,0 +1,2 @@
+//default 
+//enddefault

package/styles/bootstrap5-dark.css

@@ -1136,8 +1136,16 @@ ejs-dropdownlist {
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: 6px;
-  right: 33px;
+  bottom: auto;
+  right: 36px;
+}
+
+.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
+  bottom: 0;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -1151,8 +1159,7 @@ ejs-dropdownlist {
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-width: 0;
-  padding: 6px;
+  min-height: 36px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,
@@ -3213,7 +3220,7 @@ ejs-listbox {
 .e-listbox-container .e-list-group-item {
   background-color: #343a40;
   border-color: rgba(0, 0, 0, 0.12);
-  color: #7b848d;
+  color: #000;
   font-size: 12px;
 }
 

package/styles/bootstrap5.css

@@ -1136,8 +1136,16 @@ ejs-dropdownlist {
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
-  bottom: 6px;
-  right: 33px;
+  bottom: auto;
+  right: 36px;
+}
+
+.e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-chip.e-show-dd-icon .e-clear-icon,
+.e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-chip.e-show-dd-icon .e-clear-icon {
+  bottom: 0;
 }
 
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
@@ -1151,8 +1159,7 @@ ejs-dropdownlist {
 .e-bigger .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper .e-clear-icon {
-  min-width: 0;
-  padding: 6px;
+  min-height: 36px;
 }
 
 .e-bigger .e-ddt.e-show-chip .e-chips-close,
@@ -3213,7 +3220,7 @@ ejs-listbox {
 .e-listbox-container .e-list-group-item {
   background-color: #e9ecef;
   border-color: rgba(0, 0, 0, 0.12);
-  color: #6c757d;
+  color: #000;
   font-size: 12px;
 }
 

package/styles/combo-box/_fluent-definition.scss

@@ -0,0 +1,2 @@
+//default 
+//enddefault