@syncfusion/ej2-dropdowns 24.2.3 → 24.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.3
+*  version : 24.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.1.47",
+  "_id": "@syncfusion/ej2-dropdowns@24.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-I3+Mj2wn5OPW697yvRQWhro8Icabx1JIekMBEsV/HpiHgy3F3GIoVZpagekzhRnlGGzWrAWngi5yn5YWHOgR2A==",
+  "_integrity": "sha512-yO2x7003LTxaPl+OD2C6KP4XQaN6kVuzGVKtSz9vBtS2e3EZZpt8GmtRs1QOmMaR47kqD+Cv2ybUx1E3w13pKg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.1.47.tgz",
-  "_shasum": "152c36b552fa7b299fc54980ce7c316016c3fd26",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.2.4.tgz",
+  "_shasum": "24edaa5bfef0a2fa7ee08492553773b546b45011",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -43,13 +43,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.3",
+    "@syncfusion/ej2-base": "~24.2.5",
     "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.3",
-    "@syncfusion/ej2-lists": "~24.2.3",
-    "@syncfusion/ej2-navigations": "~24.2.3",
-    "@syncfusion/ej2-notifications": "~24.2.3",
-    "@syncfusion/ej2-popups": "~24.2.3"
+    "@syncfusion/ej2-inputs": "~24.2.5",
+    "@syncfusion/ej2-lists": "~24.2.4",
+    "@syncfusion/ej2-navigations": "~24.2.4",
+    "@syncfusion/ej2-notifications": "~24.2.4",
+    "@syncfusion/ej2-popups": "~24.2.5"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "24.2.3",
+  "version": "24.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/auto-complete/auto-complete-model.d.ts

@@ -138,7 +138,7 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * @private
 
      */
-    index?: number;
+    index?: number | null;
 
     /**
      * Specifies whether to display the floating label above the input element.
@@ -193,6 +193,6 @@ export interface AutoCompleteModel extends ComboBoxModel{
      * @private
 
      */
-    text?: string;
+    text?: string | null;
 
 }

package/src/auto-complete/auto-complete.d.ts

@@ -145,7 +145,7 @@ export declare class AutoComplete extends ComboBox {
      * @private
 
      */
-    index: number;
+    index: number | null;
     /**
      * Specifies whether to display the floating label above the input element.
      * Possible values are:
@@ -195,7 +195,7 @@ export declare class AutoComplete extends ComboBox {
      * @private
 
      */
-    text: string;
+    text: string | null;
     /**
      * * Constructor for creating the widget
      *

package/src/combo-box/combo-box-model.d.ts

@@ -68,7 +68,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * @default null
 
      */
-    index?: number;
+    index?: number | null;
 
     /**
      * Specifies whether to show or hide the clear button.
@@ -221,7 +221,7 @@ export interface ComboBoxModel extends DropDownListModel{
      * @default null
 
      */
-    text?: string;
+    text?: string | null;
 
     /**
      * Gets or sets the value of the selected item in the component.
@@ -230,6 +230,6 @@ export interface ComboBoxModel extends DropDownListModel{
      * @isGenericType true
 
      */
-    value?: number | string | boolean;
+    value?: number | string | boolean | null;
 
 }

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

@@ -81,7 +81,7 @@ export declare class ComboBox extends DropDownList {
      * @default null
 
      */
-    index: number;
+    index: number | null;
     /**
      * Specifies whether to show or hide the clear button.
      * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
@@ -218,7 +218,7 @@ export declare class ComboBox extends DropDownList {
      * @default null
 
      */
-    text: string;
+    text: string | null;
     /**
      * Gets or sets the value of the selected item in the component.
      *
@@ -226,7 +226,7 @@ export declare class ComboBox extends DropDownList {
      * @isGenericType true
 
      */
-    value: number | string | boolean;
+    value: number | string | boolean | null;
     /**
      * *Constructor for creating the component
      *

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

@@ -278,7 +278,7 @@ var DropDownBase = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        if (noDataElement[i] instanceof HTMLElement) {
+                        if (noDataElement[i] instanceof HTMLElement || noDataElement[i] instanceof Text) {
                             ele.appendChild(noDataElement[i]);
                         }
                     }

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -164,7 +164,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      *
      * @default null
      */
-    text?: string;
+    text?: string | null;
 
     /**
      * Gets or sets the value of the selected item in the component.
@@ -172,7 +172,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * @default null
      * @isGenericType true
      */
-    value?: number | string | boolean;
+    value?: number | string | boolean | null;
 
     /**
      * Gets or sets the index of the selected item in the component.
@@ -183,7 +183,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      *
      * @default null
      */
-    index?: number;
+    index?: number | null;
 
     /**
      * Specifies whether to display the floating label above the input element.

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

@@ -286,14 +286,14 @@ export declare class DropDownList extends DropDownBase implements IInput {
      *
      * @default null
      */
-    text: string;
+    text: string | null;
     /**
      * Gets or sets the value of the selected item in the component.
      *
      * @default null
      * @isGenericType true
      */
-    value: number | string | boolean;
+    value: number | string | boolean | null;
     /**
      * Gets or sets the index of the selected item in the component.
      *
@@ -303,7 +303,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      *
      * @default null
      */
-    index: number;
+    index: number | null;
     /**
      * Specifies whether to display the floating label above the input element.
      * Possible values are:

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

@@ -1238,6 +1238,9 @@ var DropDownList = /** @class */ (function (_super) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 var isActive = this.isRequested;
+                if (this.getModuleName() === 'combobox' && this.isTyped) {
+                    this.isInteracted = false;
+                }
                 this.hidePopup(e);
                 this.isInteracted = false;
                 if (!isActive) {
@@ -1926,6 +1929,11 @@ var DropDownList = /** @class */ (function (_super) {
                     this.virtualListInfo = null;
                 }
                 this.resetList(dataSource, fields, query);
+                if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    this.popupContentElement.setAttribute('role', 'status');
+                    this.popupContentElement.setAttribute('id', 'no-record');
+                    attributes(this.filterInputObj.container, { 'aria-activedescendant': 'no-record' });
+                }
                 if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
                     if (!this.list.querySelector('.e-virtual-ddl-content')) {
                         this.list.appendChild(this.createElement('div', {
@@ -2474,6 +2482,11 @@ var DropDownList = /** @class */ (function (_super) {
                     }, 5);
                 }
                 attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
+                if (_this.getModuleName() !== 'dropdownlist' && _this.list.classList.contains('e-nodata')) {
+                    attributes(_this.targetElement(), { 'aria-activedescendant': 'no-record' });
+                    _this.popupContentElement.setAttribute('role', 'status');
+                    _this.popupContentElement.setAttribute('id', 'no-record');
+                }
                 _this.inputElement.setAttribute('aria-expanded', 'true');
                 _this.inputElement.setAttribute('aria-controls', _this.element.id);
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
@@ -3775,6 +3788,9 @@ var DropDownList = /** @class */ (function (_super) {
             this.clearTemplate();
         }
         this.hidePopup();
+        if (this.popupObj) {
+            this.popupObj.hide();
+        }
         this.unWireEvent();
         if (this.list) {
             this.unWireListEvents();

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

@@ -1944,9 +1944,6 @@ var DropDownTree = /** @class */ (function (_super) {
             if (this.value === null) {
                 this.setProperties({ value: [] }, true);
             }
-            if (args.node.classList.contains("e-active")) {
-                this.hidePopup();
-            }
         }
     };
     DropDownTree.prototype.updateHiddenValue = function () {

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

@@ -1,4 +1,4 @@
-import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DropDownBase, dropDownBaseClasses, FilteringEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, BaseEventArgs, L10n } from '@syncfusion/ej2-base';import { ModuleDeclaration, NotifyPropertyChanges, getComponent, EmitType, Event, extend, detach, attributes } from '@syncfusion/ej2-base';import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { prepend, append } from '@syncfusion/ej2-base';import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';import { Button } from '@syncfusion/ej2-buttons';import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { DataManager, Query } from '@syncfusion/ej2-data';
+import { Input, InputObject } from '@syncfusion/ej2-inputs';import { DropDownBase, dropDownBaseClasses, FilteringEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, BaseEventArgs, L10n, setValue } from '@syncfusion/ej2-base';import { ModuleDeclaration, NotifyPropertyChanges, getComponent, EmitType, Event, extend, detach, attributes } from '@syncfusion/ej2-base';import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { prepend, append } from '@syncfusion/ej2-base';import { cssClass, Sortable, moveTo } from '@syncfusion/ej2-lists';import { Button } from '@syncfusion/ej2-buttons';import { createSpinner, showSpinner, hideSpinner, getZindexPartial } from '@syncfusion/ej2-popups';import { DataManager, Query } from '@syncfusion/ej2-data';
 import {SelectionMode,CheckBoxPosition,ToolBarPosition,BeforeItemRenderEventArgs,ListBoxChangeEventArgs,DropEventArgs,DragEventArgs} from "./list-box";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 

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

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { Input } from '@syncfusion/ej2-inputs';
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
-import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, L10n } from '@syncfusion/ej2-base';
+import { EventHandler, closest, removeClass, addClass, Complex, Property, ChildProperty, L10n, setValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, getComponent, Event, extend, detach, attributes } from '@syncfusion/ej2-base';
 import { getUniqueID, Browser, formatUnit, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { prepend, append } from '@syncfusion/ej2-base';
@@ -125,6 +125,13 @@ var ListBox = /** @class */ (function (_super) {
      * @returns {void}
      */
     ListBox.prototype.render = function () {
+        if (this.isAngular && this.allowFiltering) {
+            var originalElement = this.element;
+            var clonedElement = originalElement.cloneNode(true);
+            originalElement.parentNode.replaceChild(clonedElement, originalElement);
+            this.element = clonedElement;
+            setValue('ej2_instances', [this], this.element);
+        }
         this.inputString = '';
         this.initLoad = true;
         this.isCustomFiltering = false;

package/src/mention/mention.js

@@ -344,7 +344,9 @@ var Mention = /** @class */ (function (_super) {
             }
             return;
         }
-        this.queryString = lastWordRange.replace(this.mentionChar, '');
+        if (lastWordRange.includes(this.mentionChar)) {
+            this.queryString = lastWordRange.replace(this.mentionChar, '');
+        }
         if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
             this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
             this.searchLists(e);
@@ -692,6 +694,7 @@ var Mention = /** @class */ (function (_super) {
                     _this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
                     if (popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
                         popupEle_1.firstElementChild.setAttribute('aria-owns', _this.inputElement.parentElement.parentElement.id);
+                        addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
                 if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||

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

@@ -87,7 +87,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 
@@ -335,7 +335,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
      *
      * @default null
      */
-    text?: string;
+    text?: string | null;
 
     /**
      * Selects the list item which maps the data `value` field in the component.
@@ -344,7 +344,7 @@ export interface MultiSelectModel extends DropDownBaseModel{
      * @default null
      * @isGenericType true
      */
-    value?: number[] | string[] | boolean[];
+    value?: number[] | string[] | boolean[] | null;
 
     /**
      * Hides the selected item from the list item.

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

@@ -49,6 +49,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private previousFilterText;
     private selectedElementID;
     private focusFirstListItem;
+    private isCustomRendered;
+    private isRemoteSelection;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -122,7 +124,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**
@@ -349,7 +351,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @default null
      */
-    text: string;
+    text: string | null;
     /**
      * Selects the list item which maps the data `value` field in the component.
      * {% codeBlock src='multiselect/value/index.md' %}{% endcodeBlock %}
@@ -357,7 +359,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default null
      * @isGenericType true
      */
-    value: number[] | string[] | boolean[];
+    value: number[] | string[] | boolean[] | null;
     /**
      * Hides the selected item from the list item.
      *

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

@@ -361,6 +361,11 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.removelastSelection = function (e) {
+        var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);
+        if (selectedElem !== null) {
+            this.removeSelectedChip(e);
+            return;
+        }
         var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);
         var value = elements[elements.length - 1].getAttribute('data-value');
         if (!isNullOrUndefined(this.value)) {
@@ -437,6 +442,12 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.updateActionList(ulElement, list, e);
         }
+        if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered && this.inputElement.value && this.inputElement.value !== '') {
+            var query = new Query();
+            query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
+            this.checkForCustomValue(query, this.fields);
+            this.isCustomRendered = true;
+        }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
         }
@@ -458,7 +469,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&
             this.inputElement.value && this.inputElement.value !== '') {
             this.checkForCustomValue(this.tempQuery, this.fields);
-            return;
+            if (this.isCustomRendered) {
+                return;
+            }
         }
         if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
@@ -725,12 +738,12 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.checkForCustomValue = function (query, fields) {
         var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
+        var field = fields ? fields : this.fields;
         if (this.allowCustomValue && dataChecks) {
             var value = this.inputElement.value;
-            var field = fields ? fields : this.fields;
             var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
                 this.mainData[0] : this.mainData;
-            if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
+            if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
                 var dataItem = {};
                 setValue(field.text, value, dataItem);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
@@ -744,7 +757,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 tempData.splice(0, 0, dataItem);
                 this.resetList(tempData, field, query);
             }
-            else {
+            else if (this.listData) {
                 var tempData = JSON.parse(JSON.stringify(this.listData));
                 tempData.splice(0, 0, this.inputElement.value);
                 tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?
@@ -754,6 +767,19 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.resetList(tempData, field);
             }
         }
+        else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
+            if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {
+                this.isRemoteSelection = false;
+                this.resetList(this.listData, field, query);
+            }
+            else if (!this.allowFiltering && this.list) {
+                var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
+                var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
+                if (activeElement && activeElement.item !== null) {
+                    this.addListFocus(activeElement.item);
+                }
+            }
+        }
         if (this.value && this.value.length) {
             this.refreshSelection();
         }
@@ -2381,6 +2407,9 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             var text = this.targetElement();
             if (this.allowFiltering) {
+                if (this.allowCustomValue) {
+                    this.isRemoteSelection = true;
+                }
                 var eventArgs_1 = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -2406,7 +2435,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             else if (this.allowCustomValue) {
                 var query = new Query();
-                query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
+                query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
                 this.dataUpdater(this.mainData, query, this.fields);
             }
             else {
@@ -2448,6 +2477,8 @@ var MultiSelect = /** @class */ (function (_super) {
         this.focused = true;
         this.initial = true;
         this.backCommand = true;
+        this.isCustomRendered = false;
+        this.isRemoteSelection = false;
     };
     MultiSelect.prototype.updateData = function (delimiterChar, e) {
         var data = '';
@@ -2490,7 +2521,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (delim) {
             this.updateWrapperText(this.delimiterWrapper, data);
             this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
-            this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);
+            this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);
         }
         var targetEle = e && e.target;
         var isClearAll = (targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;
@@ -3464,7 +3495,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.hiddenElement.innerHTML = hiddenValue;
             this.updateWrapperText(this.delimiterWrapper, wrapperText);
             this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
-            this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);
+            this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);
             this.setProperties({ text: text.toString() }, true);
             this.refreshInputHight();
             this.refreshPlaceHolder();
@@ -3980,7 +4011,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
+            this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';
@@ -4229,7 +4260,7 @@ var MultiSelect = /** @class */ (function (_super) {
         Property(true)
     ], MultiSelect.prototype, "enabled", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property([])