@syncfusion/ej2-dropdowns 20.2.43 → 20.2.46

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

@@ -150,8 +150,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
-    DropDownList.prototype.renderList = function (isEmptyData) {
-        _super.prototype.render.call(this, isEmptyData);
+    DropDownList.prototype.renderList = function (e, isEmptyData) {
+        _super.prototype.render.call(this, e, isEmptyData);
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -636,7 +636,7 @@ var DropDownList = /** @class */ (function (_super) {
             var 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) {
@@ -675,7 +675,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'open':
-                    this.showPopup();
+                    this.showPopup(e);
                     break;
                 case 'hide':
                     this.preventAltUp = this.isPopupOpen;
@@ -867,7 +867,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (!this.readonly) {
             if (this.isPopupOpen) {
-                this.hidePopup();
+                this.hidePopup(e);
                 if (this.isFilterLayout()) {
                     this.focusDropDown(e);
                 }
@@ -877,7 +877,7 @@ var DropDownList = /** @class */ (function (_super) {
                 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
             var proxy_1 = this;
@@ -1522,26 +1522,8 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 this.initial = false;
             }
-            else if (this.getModuleName() === 'autocomplete' && this.value && this.typedString === '' && !(this.dataSource instanceof DataManager)) {
-                var checkFields_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
-                var checkValue = list.some(function (x) { return x[checkFields_1] === _this.value; });
-                var query = new Query();
-                if (!checkValue) {
-                    new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1, 'equal', this.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, 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
@@ -1564,7 +1546,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (this.beforePopupOpen) {
-                this.renderPopup();
+                this.renderPopup(e);
             }
         }
     };
@@ -1636,7 +1618,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
-    DropDownList.prototype.renderPopup = function () {
+    DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -1739,7 +1721,7 @@ var DropDownList = /** @class */ (function (_super) {
                 var animModel = { name: 'FadeIn', duration: 100 };
                 _this.beforePopupOpen = true;
                 var popupInstance = _this.popupObj;
-                var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
+                var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
@@ -2061,14 +2043,14 @@ var DropDownList = /** @class */ (function (_super) {
         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';
             }
@@ -2117,6 +2099,9 @@ var DropDownList = /** @class */ (function (_super) {
         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();
         }
@@ -2147,12 +2132,22 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        var 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();
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
         if (this.footer) {
-            this.footer.innerHTML = '';
+            if (this.isReact) {
+                this.clearTemplate(['footerTemplate']);
+            }
+            else {
+                this.footer.innerHTML = '';
+            }
         }
         else {
             this.footer = this.createElement('div');
@@ -2344,6 +2339,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldText(oldProp.text);
                             }
@@ -2385,6 +2383,9 @@ var DropDownList = /** @class */ (function (_super) {
                                     }
                                 });
                             }
+                            else if (this_1.getModuleName() === 'autocomplete') {
+                                this_1.setInputValue(newProp, oldProp);
+                            }
                             else {
                                 this_1.setOldValue(oldProp.value);
                             }
@@ -2503,6 +2504,8 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    DropDownList.prototype.setInputValue = function (newProp, oldProp) {
+    };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
         if (!isNullOrUndefined(oldClass)) {
             oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
@@ -2529,7 +2532,7 @@ var DropDownList = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    DropDownList.prototype.showPopup = function () {
+    DropDownList.prototype.showPopup = function (e) {
         if (!this.enabled) {
             return;
         }
@@ -2549,11 +2552,11 @@ var DropDownList = /** @class */ (function (_super) {
         }
         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);
     };
-    DropDownList.prototype.invokeRenderPopup = function () {
+    DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
@@ -2563,7 +2566,7 @@ var DropDownList = /** @class */ (function (_super) {
             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 });
     };

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

@@ -3,7 +3,7 @@
  * Specifies whether to display the floating label above the input element.
  */
 import { removeClass, addClass, detach } from '@syncfusion/ej2-base';
-import { attributes, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
+import { attributes, isNullOrUndefined, createElement, getUniqueID } from '@syncfusion/ej2-base';
 var FLOATLINE = 'e-float-line';
 var FLOATTEXT = 'e-float-text';
 var LABELTOP = 'e-label-top';
@@ -23,9 +23,11 @@ var LABELBOTTOM = 'e-label-bottom';
 export function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {
     var floatLinelement = createElement('span', { className: FLOATLINE });
     var floatLabelElement = createElement('label', { className: FLOATTEXT });
+    var 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);

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

@@ -823,7 +823,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      *
      * @returns {void}
      */
-    showPopup(): void;
+    showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     /**
      * Based on the state parameter, entire list item will be selected/deselected.
      * parameter

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

@@ -224,7 +224,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.onPopupShown = function () {
+    MultiSelect.prototype.onPopupShown = function (e) {
         var _this = this;
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -236,7 +236,7 @@ var MultiSelect = /** @class */ (function (_super) {
             history.pushState({}, '');
         }
         var animModel = { name: 'FadeIn', duration: 100 };
-        var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };
+        var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
                 _this.focusAtFirstListItem();
@@ -460,7 +460,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.renderPopup();
         if (this.beforePopupOpen) {
             this.beforePopupOpen = false;
-            this.onPopupShown();
+            this.onPopupShown(e);
         }
     };
     MultiSelect.prototype.refreshSelection = function () {
@@ -752,7 +752,7 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             if (!this.isPopupOpen() &&
                 (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {
-                this.showPopup();
+                this.showPopup(e);
             }
             else {
                 this.hidePopup(e);
@@ -1046,7 +1046,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 break;
             case 40:
                 if (!this.isPopupOpen()) {
-                    this.showPopup();
+                    this.showPopup(e);
                     e.preventDefault();
                 }
                 break;
@@ -2237,7 +2237,7 @@ var MultiSelect = /** @class */ (function (_super) {
             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)) {
@@ -2384,7 +2384,7 @@ var MultiSelect = /** @class */ (function (_super) {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        _super.prototype.render.call(this, isEmptyData);
+        _super.prototype.render.call(this, null, isEmptyData);
         this.unwireListEvents();
         this.wireListEvents();
     };
@@ -3657,7 +3657,7 @@ var MultiSelect = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    MultiSelect.prototype.showPopup = function () {
+    MultiSelect.prototype.showPopup = function (e) {
         var _this = this;
         if (!this.enabled) {
             return;
@@ -3667,7 +3667,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    _super.prototype.render.call(_this);
+                    _super.prototype.render.call(_this, e);
                     if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
@@ -3683,7 +3683,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.beforePopupOpen = false;
                     return;
                 }
-                _this.onPopupShown();
+                _this.onPopupShown(e);
             }
         });
     };
@@ -3790,7 +3790,6 @@ var MultiSelect = /** @class */ (function (_super) {
         });
         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';

package/styles/multi-select/_layout.scss

@@ -104,6 +104,9 @@
     display: none;
     flex-direction: row;
     margin-top: $ddl-clear-margin-top;
+    @if $ddl-multiselect-skin-name == 'tailwind' {
+      margin-top: -1.45em;
+    }
     outline: 0;
     padding: 0;
     position: absolute;
@@ -389,6 +392,7 @@
   }
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-clear-icon-height;
+    margin-top: $ddl-clear-margin-top;
     width: $ddl-bigger-clear-icon-width;
   }
 }

package/styles/multi-select/tailwind-dark.css

@@ -221,6 +221,7 @@
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -401,6 +402,7 @@
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/multi-select/tailwind.css

@@ -221,6 +221,7 @@
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -401,6 +402,7 @@
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/tailwind-dark.css

@@ -1426,6 +1426,7 @@ ejs-dropdownlist {
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -1606,6 +1607,7 @@ ejs-dropdownlist {
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/styles/tailwind.css

@@ -1426,6 +1426,7 @@ ejs-dropdownlist {
   -ms-flex-direction: row;
       flex-direction: row;
   margin-top: -2em;
+  margin-top: -1.45em;
   outline: 0;
   padding: 0;
   position: absolute;
@@ -1606,6 +1607,7 @@ ejs-dropdownlist {
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -1.62em;
   height: 36px;
+  margin-top: -2em;
   width: 40px;
 }
 

package/tslint.json

@@ -0,0 +1,111 @@
+{
+  "rules": {
+    "chai-vague-errors": true,
+    "use-isnan": true,
+    "missing-jsdoc": true,
+    "missing-optional-annotation": true,
+    "no-backbone-get-set-outside-model": true,
+    "no-banned-terms": true,
+    "no-constant-condition": true,
+    "no-control-regex": true,
+    "no-cookies": true,
+    "no-delete-expression": true,
+    "no-document-write": true,
+    "no-document-domain": true,
+    "no-disable-auto-sanitization": true,
+    "no-duplicate-case": true,
+    "no-duplicate-parameter-names": true,
+    "no-empty-interfaces": true,
+    "no-exec-script": true,
+    "no-function-constructor-with-string-args": true,
+    "no-function-expression": true,
+    "no-invalid-regexp": true,
+    "no-for-in": true,
+    "member-access": true,
+    "no-multiline-string": true,
+    "no-multiple-var-decl": true,
+    "no-unnecessary-bind": true,
+    "no-unnecessary-semicolons": true,
+    "no-octal-literal": true,
+    "no-regex-spaces": true,
+    "no-sparse-arrays": true,
+    "no-string-based-set-immediate": true,
+    "no-string-based-set-interval": true,
+    "no-unused-imports": true,
+    "no-with-statement": true,
+    "prefer-array-literal": true,
+    "promise-must-complete": false,
+    "react-no-dangerous-html": true,
+    "use-named-parameter": true,
+    "valid-typeof": true,
+    "max-func-body-length": [true, 100, {
+      "ignore-parameters-to-function-regex": "describe"
+    }],
+    "class-name": true,
+    "curly": true,
+    "eofline": false,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,       
+    "max-line-length": [true, 140],
+    "no-arg": true,
+    "no-console": [true,
+      "debug",
+      "info",
+      "log",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-parameter-properties": true,
+    "no-debugger": true,    
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "trailing-comma": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": false,
+    "no-var-requires": true,
+    "one-line": [true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "no-any": true,
+    "no-conditional-assignment": true,
+    "no-angle-bracket-type-assertion": false,
+    "align": [true, "parameters", "arguments", "statements"],
+    "no-empty-line-after-opening-brace": false,
+    "typedef-whitespace": [false],
+    "ban": true,
+    "quotemark": [true, "single"],
+    "semicolon": true,
+    "triple-equals": [true, "allow-null-check"],
+    "typedef": [true,
+      "call-signature",
+      "parameter",
+      "property-declaration",
+      "variable-declaration",
+      "arrow-parameter",
+      "member-variable-declaration"],    
+    "variable-name": true,
+    "whitespace": [true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "jsdoc-format": true,
+    "no-var-keyword": true,
+    "radix": true
+  }
+}