@syncfusion/ej2-dropdowns 20.2.43 → 20.2.46

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

@@ -238,6 +238,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.isAngular = false;
         this.isPreventChange = false;
         this.isDynamicDataChange = false;
+        this.addedNewItem = false;
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -463,7 +464,7 @@ let DropDownBase = class DropDownBase extends Component {
      *
      * @returns {void}
      */
-    initialize() {
+    initialize(e) {
         this.bindEvent = true;
         this.actionFailureTemplateId = `${this.element.id}${ACTIONFAILURETEMPLATE_PROPERTY}`;
         if (this.element.tagName === 'UL') {
@@ -482,7 +483,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         else {
-            this.setListData(this.dataSource, this.fields, this.query);
+            this.setListData(this.dataSource, this.fields, this.query, e);
         }
     }
     /**
@@ -589,7 +590,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    setListData(dataSource, fields, query) {
+    setListData(dataSource, fields, query, event) {
         fields = fields ? fields : this.fields;
         let ulElement;
         this.isActive = true;
@@ -635,7 +636,7 @@ let DropDownBase = class DropDownBase extends Component {
                     this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
                         if (!localDataArgs.cancel) {
                             ulElement = this.renderItems(localDataArgs.result, fields);
-                            this.onActionComplete(ulElement, localDataArgs.result);
+                            this.onActionComplete(ulElement, localDataArgs.result, event);
                             if (this.groupTemplate) {
                                 this.renderGroupTemplate(ulElement);
                             }
@@ -1024,7 +1025,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @returns {void}
      */
-    resetList(dataSource, fields, query) {
+    resetList(dataSource, fields, query, e) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1034,8 +1035,9 @@ let DropDownBase = class DropDownBase extends Component {
                     dataSource = this.selectData;
                 }
             }
-            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length ? this.selectData : dataSource;
-            this.setListData(dataSource, fields, query);
+            dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
+            this.addedNewItem = false;
+            this.setListData(dataSource, fields, query, e);
         }
     }
     updateSelectElementData(isFiltering) {
@@ -1126,7 +1128,7 @@ let DropDownBase = class DropDownBase extends Component {
      * @private
      * @returns {void}
      */
-    render(isEmptyData) {
+    render(e, isEmptyData) {
         this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
         this.list.classList.add(dropDownBaseClasses.root);
         this.setFields();
@@ -1150,7 +1152,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.setEnableRtl();
         this.setEnabled();
         if (!isEmptyData) {
-            this.initialize();
+            this.initialize(e);
         }
     }
     /**
@@ -1291,6 +1293,7 @@ let DropDownBase = class DropDownBase extends Component {
         if (selectedItemValue || itemIndex === 0) {
             this.updateSelection();
         }
+        this.addedNewItem = true;
     }
     validationAttribute(target, hidden) {
         const name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
@@ -1567,8 +1570,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     }
-    renderList(isEmptyData) {
-        super.render(isEmptyData);
+    renderList(e, isEmptyData) {
+        super.render(e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     }
@@ -2051,7 +2054,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             const isTabAction = e.action === 'tab' || e.action === 'close';
             if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList();
+                this.renderList(e);
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -2090,7 +2093,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -2282,7 +2285,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -2292,7 +2295,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.floatLabelChange();
                 this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;
                 this.isDropDownClick = true;
-                this.showPopup();
+                this.showPopup(e);
             }
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -2933,26 +2936,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 this.initial = false;
             }
-            else if (this.getModuleName() === 'autocomplete' && this.value && this.typedString === '' && !(this.dataSource instanceof DataManager)) {
-                const checkFields = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
-                const checkValue = list.some((x) => x[checkFields] === this.value);
-                let query = new Query();
-                if (!checkValue) {
-                    new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields, 'equal', this.value)))
-                        .then((e) => {
-                        if (e.result.length > 0) {
-                            this.value = checkFields !== '' ? e.result[0][this.fields.value].toString() : e.result[0].toString();
-                            this.addItem(e.result, list.length);
-                            this.updateValues();
-                        }
-                        else {
-                            this.updateValues();
-                        }
-                    });
-                }
-                else {
-                    this.updateValues();
-                }
+            else if (this.getModuleName() === 'autocomplete' && this.value) {
+                this.setInputValue();
             }
             if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {
                 if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter
@@ -2975,7 +2960,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     }
@@ -3045,7 +3030,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     }
-    renderPopup() {
+    renderPopup(e) {
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
             return;
@@ -3146,7 +3131,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const animModel = { name: 'FadeIn', duration: 100 };
                 this.beforePopupOpen = true;
                 const popupInstance = this.popupObj;
-                const eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                const eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 this.trigger('open', eventArgs, (eventArgs) => {
                     if (!eventArgs.cancel) {
                         addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -3465,14 +3450,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.element.tagName === 'INPUT') {
             this.inputElement = this.element;
             if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {
-                this.inputElement.setAttribute('role', 'textbox');
+                this.inputElement.setAttribute('role', 'combobox');
             }
             if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
                 this.inputElement.setAttribute('type', 'text');
             }
         }
         else {
-            this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -3521,6 +3506,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
+        if (this.targetElement() === this.inputElement) {
+            this.element.removeAttribute('aria-labelledby');
+        }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
             this.initValue();
         }
@@ -3551,12 +3539,22 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        const floatLabelElement = this.inputWrapper.container.getElementsByClassName('e-float-text')[0];
+        if (!isNullOrUndefined(this.element.id) && this.element.id !== '' && !isNullOrUndefined(floatLabelElement)) {
+            floatLabelElement.id = 'label_' + this.element.id.replace(/ /g, '_');
+            attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });
+        }
         this.renderComplete();
     }
     setFooterTemplate(popupEle) {
         let compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -3747,6 +3745,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldText(oldProp.text);
                             }
@@ -3788,6 +3789,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                                     }
                                 });
                             }
+                            else if (this.getModuleName() === 'autocomplete') {
+                                this.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this.setOldValue(oldProp.value);
                             }
@@ -3900,6 +3904,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     }
+    setInputValue(newProp, oldProp) {
+    }
     setCssClass(newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -3926,7 +3932,7 @@ let DropDownList = class DropDownList extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -3946,11 +3952,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
-            this.renderList();
+            this.renderList(e);
         }
-        this.invokeRenderPopup();
+        this.invokeRenderPopup(e);
     }
-    invokeRenderPopup() {
+    invokeRenderPopup(e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -3960,7 +3966,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             history.pushState({}, '');
         }
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
-            this.renderPopup();
+            this.renderPopup(e);
         }
         attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
     }
@@ -7700,7 +7706,7 @@ let ComboBox = class ComboBox extends DropDownList {
         }
     }
     incrementalSearch(e) {
-        this.showPopup();
+        this.showPopup(e);
         if (!isNullOrUndefined(this.listData)) {
             this.inlineSearch(e);
             e.preventDefault();
@@ -7960,8 +7966,8 @@ let ComboBox = class ComboBox extends DropDownList {
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
-        super.showPopup();
+    showPopup(e) {
+        super.showPopup(e);
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -8236,13 +8242,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         if (isNullOrUndefined(this.list)) {
-            super.renderList(true);
+            super.renderList(e, true);
         }
         this.queryString = this.filterInput.value;
         if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
             this.queryString = this.queryString === '' ? null : this.queryString;
             this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
             return;
         }
         this.isSelected = false;
@@ -8262,7 +8268,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.trigger('filtering', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel && !this.isFiltered && !eventArgs.preventDefaultAction) {
                 this.searchList = true;
-                this.filterAction(this.dataSource, null, this.fields);
+                this.filterAction(this.dataSource, null, this.fields, e);
             }
         });
     }
@@ -8279,13 +8285,13 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isFiltered = true;
         this.filterAction(dataSource, query, fields);
     }
-    filterAction(dataSource, query, fields) {
+    filterAction(dataSource, query, fields, e) {
         this.beforePopupOpen = true;
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
-            this.resetList(dataSource, fields, query);
+            this.resetList(dataSource, fields, query, e);
         }
         else {
-            this.hidePopup();
+            this.hidePopup(e);
             this.beforePopupOpen = false;
         }
         this.renderReactTemplates();
@@ -8371,9 +8377,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isFiltering() {
         return true;
     }
-    renderPopup() {
+    renderPopup(e) {
         this.list.scrollTop = 0;
-        super.renderPopup();
+        super.renderPopup(e);
     }
     isEditTextBox() {
         return true && this.inputElement.value.trim() !== '';
@@ -8385,13 +8391,37 @@ let AutoComplete = class AutoComplete extends ComboBox {
     isSelectFocusItem(element) {
         return false;
     }
+    setInputValue(newProp, oldProp) {
+        let oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
+        let value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
+            let checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
+            const listLength = this.getItems().length;
+            let query = new Query();
+            let _this = this;
+            new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', value)))
+                .then(function (e) {
+                if (e.result.length > 0) {
+                    _this.value = checkFields_1 !== '' ? e.result[0][_this.fields.value].toString() : e.result[0].toString();
+                    _this.addItem(e.result, listLength);
+                    _this.updateValues();
+                }
+                else {
+                    newProp && newProp.text ? _this.setOldText(oldValue) : newProp && newProp.value ? _this.setOldValue(oldValue) : _this.updateValues();
+                }
+            });
+        }
+        else if (newProp) {
+            newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);
+        }
+    }
     /**
      * Search the entered text and show it in the suggestion list if available.
      *
      * @returns {void}
      * @deprecated
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -8402,10 +8432,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.beforePopupOpen = true;
         this.preventAutoFill = true;
         if (isNullOrUndefined(this.list)) {
-            this.renderList();
+            this.renderList(e);
         }
         else {
-            this.resetList(this.dataSource, this.fields);
+            this.resetList(this.dataSource, this.fields, null, e);
         }
     }
     /**
@@ -8562,9 +8592,11 @@ const LABELBOTTOM = 'e-label-bottom';
 function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {
     const floatLinelement = createElement('span', { className: FLOATLINE });
     const floatLabelElement = createElement('label', { className: FLOATTEXT });
+    const id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
+    element.id = id;
     if (!isNullOrUndefined(element.id) && element.id !== '') {
         floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        attributes(element, { 'aria-labelledby': floatLabelElement.id });
+        attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
         floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);
@@ -8889,7 +8921,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
-    onPopupShown() {
+    onPopupShown(e) {
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -8900,7 +8932,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             history.pushState({}, '');
         }
         const animModel = { name: 'FadeIn', duration: 100 };
-        const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        const eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, (eventArgs) => {
             if (!eventArgs.cancel) {
                 this.focusAtFirstListItem();
@@ -9124,7 +9156,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     }
     refreshSelection() {
@@ -9416,7 +9448,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -9710,7 +9742,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -10895,7 +10927,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.keyCode = e.keyCode;
         }
         if (!this.isPopupOpen() && this.openOnClick) {
-            this.showPopup();
+            this.showPopup(e);
         }
         this.openClick(e);
         if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {
@@ -11042,7 +11074,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        super.render(isEmptyData);
+        super.render(null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     }
@@ -12307,7 +12339,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      *
      * @returns {void}
      */
-    showPopup() {
+    showPopup(e) {
         if (!this.enabled) {
             return;
         }
@@ -12316,7 +12348,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!args.cancel) {
                 if (!this.ulElement) {
                     this.beforePopupOpen = true;
-                    super.render();
+                    super.render(e);
                     if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                         this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                     }
@@ -12332,7 +12364,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.beforePopupOpen = false;
                     return;
                 }
-                this.onPopupShown();
+                this.onPopupShown(e);
             }
         });
     }
@@ -12438,7 +12470,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
         if (this.mode === 'Default' || this.mode === 'Box') {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
-            this.inputElement.setAttribute('aria-labelledby', this.chipCollectionWrapper.id);
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';