@syncfusion/ej2-dropdowns 18.1.57 → 18.2.44-4569

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

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, prepend, detach, classList, isBlazor } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, ResultData, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';
+import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append } from '@syncfusion/ej2-base';
 import {ChangeEventArgs} from "./drop-down-list";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -8,226 +8,226 @@ import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 export interface DropDownListModel extends DropDownBaseModel{
 
     /**
-     * Sets CSS classes to the root element of the component that allows customization of appearance.
-     * @default null
-     */
-    cssClass?: string;
-
-    /**
-     * Specifies the width of the component. By default, the component width sets based on the width of 
-     * its parent container. You can also set the width in pixel values.
-     * @default '100%'
-     * @aspType string
-     * @blazorType string
-     */
-    width?: string | number;
-
-    /**
-     * Specifies the height of the popup list.  
-     * > For more details about the popup configuration refer to 
-     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
-     * @default '300px'
-     * @aspType string
-     * @blazorType string
-     */
-    popupHeight?: string | number;
-
-    /**
-     * Specifies the width of the popup list. By default, the popup width sets based on the width of 
-     * the component.
-     * > For more details about the popup configuration refer to 
-     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
-     * @default '100%'
-     * @aspType string
-     * @blazorType string
-     */
-    popupWidth?: string | number;
-
-    /**
-     * Specifies a short hint that describes the expected value of the DropDownList component.
-     * @default null
-     */
-    placeholder?: string;
-
-    /**
-     * Accepts the value to be displayed as a watermark text on the filter bar. 
-     * @default null
-     */
-    filterBarPlaceholder?: string;
-
-    /**
-     * Allows additional HTML attributes such as title, name, etc., and
-     * accepts n number of attributes in a key-value pair format.
-     * 
-     * {% codeBlock src='dropdownlist/htmlAttributes/index.md' %}{% endcodeBlock %}
-     *
-     * @default {}
-     */
-    htmlAttributes?: { [key: string]: string; };
-
-    /**
-     * Accepts the external `Query`
-     * that execute along with data processing.
-     * 
-     * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
-     * 
-     * @default null
-
-     */
-    query?: Query;
-
-    /**
-     * Accepts the template design and assigns it to the selected list item in the input element of the component.
-     * For more details about the available template options refer to 
-     * [`Template`](../../drop-down-list/templates) documentation.
-     * 
-     * We have built-in `template engine`
-     * which provides options to compile template string into a executable function.
-     * For EX: We have expression evolution as like ES6 expression string literals.
-     * @default null
-     */
-    valueTemplate?: string;
-
-    /**
-     * Accepts the template design and assigns it to the header container of the popup list.
-     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
-     * @default null
-     */
-    headerTemplate?: string;
-
-    /**
-     * Accepts the template design and assigns it to the footer container of the popup list.
-     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
-     * @default null
-     */
-    footerTemplate?: string;
-
-    /**
-     * When allowFiltering is set to true, show the filter bar (search box) of the component.
-     * The filter action retrieves matched items through the `filtering` event based on
-     * the characters typed in the search TextBox.
-     * 
-     * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
-     * 
-     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
-     * 
-     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
-     * @default false
-     */
-    allowFiltering?: boolean;
-
-    /**
-     * When set to true, the user interactions on the component are disabled.
-     * @default false
-     */
-    readonly?: boolean;
-
-    /**
-     * Gets or sets the display text of the selected item in the component.
-     * @default null
-     */
-    text?: string;
-
-    /**
-     * Gets or sets the value of the selected item in the component.
-     * @default null
-     * @isGenericType true
-     */
-    value?: number | string | boolean;
-
-    /**
-     * Gets or sets the index of the selected item in the component.
-     * 
-     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
-     * 
-     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
-     * 
-     * @default null
-     * @blazorType int
-     * @isBlazorNullableType true
-     * @blazorDefaultValue 
-     */
-    index?: number;
-
-    /**
-     * Specifies whether to display the floating label above the input element.
-     * Possible values are:
-     * * Never: The label will never float in the input when the placeholder is available.
-     * * Always: The floating label will always float above the input.
-     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
-     * 
-     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
-     * 
-     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
-     * 
-     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
-     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
-     * @isEnumeration true
-     * @blazorType Syncfusion.Blazor.Inputs.FloatLabelType
-     */
-    floatLabelType?: FloatLabelType;
-
-    /**
-     * Specifies whether to show or hide the clear button. 
-     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
-     * @default false
-     * @blazorOverrideType virtual
-     */
-    showClearButton?: boolean;
-
-    /**
-     * Triggers on typing a character in the filter bar when the 
-     * [`allowFiltering`](./#allowfiltering) 
-     * is enabled.
-     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
-     * 
-     * @event
-     * @blazorProperty 'Filtering'
-     */
-    filtering?: EmitType<FilteringEventArgs>;
-
-    /**
-     * Triggers when an item in a popup is selected or when the model value is changed by user.
-     * Use change event to 
-     * [`Configure the Cascading DropDownList`](../../drop-down-list/how-to/cascading)
-     * @event
-     * @blazorProperty 'ValueChange'
-     */
-    change?: EmitType<ChangeEventArgs>;
-
-    /**
-     * Triggers when the popup before opens.
-     * @event
-     * @blazorProperty 'OnOpen'
-     * @blazorType BeforeOpenEventArgs
-     */
-    beforeOpen?: EmitType<Object>;
-
-    /**
-     * Triggers when the popup opens.
-     * @event
-     * @blazorProperty 'Opened'
-     */
-    open?: EmitType<PopupEventArgs>;
-
-    /**
-     * Triggers when the popup is closed.
-     * @event
-     * @blazorProperty 'OnClose'
-     */
-    close?: EmitType<PopupEventArgs>;
-
-    /**
-     * Triggers when focus moves out from the component.
-     * @event
-     */
-    blur?: EmitType<Object>;
-
-    /**
-     * Triggers when the component is focused.
-     * @event
-     */
-    focus?: EmitType<Object>;
+     * Sets CSS classes to the root element of the component that allows customization of appearance.
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies the width of the component. By default, the component width sets based on the width of 
+     * its parent container. You can also set the width in pixel values.
+     * @default '100%'
+     * @aspType string
+     * @blazorType string
+     */
+    width?: string | number;
+
+    /**
+     * Specifies the height of the popup list.  
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     * @default '300px'
+     * @aspType string
+     * @blazorType string
+     */
+    popupHeight?: string | number;
+
+    /**
+     * Specifies the width of the popup list. By default, the popup width sets based on the width of 
+     * the component.
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](../../drop-down-list/getting-started#configure-the-popup-list) documentation.
+     * @default '100%'
+     * @aspType string
+     * @blazorType string
+     */
+    popupWidth?: string | number;
+
+    /**
+     * Specifies a short hint that describes the expected value of the DropDownList component.
+     * @default null
+     */
+    placeholder?: string;
+
+    /**
+     * Accepts the value to be displayed as a watermark text on the filter bar. 
+     * @default null
+     */
+    filterBarPlaceholder?: string;
+
+    /**
+     * Allows additional HTML attributes such as title, name, etc., and
+     * accepts n number of attributes in a key-value pair format.
+     * 
+     * {% codeBlock src='dropdownlist/htmlAttributes/index.md' %}{% endcodeBlock %}
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string; };
+
+    /**
+     * Accepts the external `Query`
+     * that execute along with data processing.
+     * 
+     * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
+     * 
+     * @default null
+     * @deprecated
+     */
+    query?: Query;
+
+    /**
+     * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to 
+     * [`Template`](../../drop-down-list/templates) documentation.
+     * 
+     * We have built-in `template engine`
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
+     * @default null
+     */
+    valueTemplate?: string;
+
+    /**
+     * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     * @default null
+     */
+    headerTemplate?: string;
+
+    /**
+     * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
+     * @default null
+     */
+    footerTemplate?: string;
+
+    /**
+     * When allowFiltering is set to true, show the filter bar (search box) of the component.
+     * The filter action retrieves matched items through the `filtering` event based on
+     * the characters typed in the search TextBox.
+     * 
+     * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
+     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
+     * 
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
+     * @default false
+     */
+    allowFiltering?: boolean;
+
+    /**
+     * When set to true, the user interactions on the component are disabled.
+     * @default false
+     */
+    readonly?: boolean;
+
+    /**
+     * Gets or sets the display text of the selected item in the component.
+     * @default null
+     */
+    text?: string;
+
+    /**
+     * Gets or sets the value of the selected item in the component.
+     * @default null
+     * @isGenericType true
+     */
+    value?: number | string | boolean;
+
+    /**
+     * Gets or sets the index of the selected item in the component.
+     * 
+     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
+     * 
+     * @default null
+     * @blazorType int
+     * @isBlazorNullableType true
+     * @blazorDefaultValue 
+     */
+    index?: number;
+
+    /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     * 
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
+     * 
+     * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
+     * @aspType Syncfusion.EJ2.Inputs.FloatLabelType
+     * @isEnumeration true
+     * @blazorType Syncfusion.Blazor.Inputs.FloatLabelType
+     */
+    floatLabelType?: FloatLabelType;
+
+    /**
+     * Specifies whether to show or hide the clear button. 
+     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
+     * @default false
+     * @blazorOverrideType virtual
+     */
+    showClearButton?: boolean;
+
+    /**
+     * Triggers on typing a character in the filter bar when the 
+     * [`allowFiltering`](./#allowfiltering) 
+     * is enabled.
+     * > For more details about the filtering refer to [`Filtering`](../../drop-down-list/filtering) documentation.
+     * 
+     * @event
+     * @blazorProperty 'Filtering'
+     */
+    filtering?: EmitType<FilteringEventArgs>;
+
+    /**
+     * Triggers when an item in a popup is selected or when the model value is changed by user.
+     * Use change event to 
+     * [`Configure the Cascading DropDownList`](../../drop-down-list/how-to/cascading)
+     * @event
+     * @blazorProperty 'ValueChange'
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Triggers when the popup before opens.
+     * @event
+     * @blazorProperty 'OnOpen'
+     * @blazorType BeforeOpenEventArgs
+     */
+    beforeOpen?: EmitType<Object>;
+
+    /**
+     * Triggers when the popup opens.
+     * @event
+     * @blazorProperty 'Opened'
+     */
+    open?: EmitType<PopupEventArgs>;
+
+    /**
+     * Triggers when the popup is closed.
+     * @event
+     * @blazorProperty 'OnClose'
+     */
+    close?: EmitType<PopupEventArgs>;
+
+    /**
+     * Triggers when focus moves out from the component.
+     * @event
+     */
+    blur?: EmitType<Object>;
+
+    /**
+     * Triggers when the component is focused.
+     * @event
+     */
+    focus?: EmitType<Object>;
 
 }

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

@@ -159,7 +159,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * {% codeBlock src='dropdownlist/query/index.md' %}{% endcodeBlock %}
      *
      * @default null
-
+     * @deprecated
      */
     query: Query;
     /**
@@ -424,7 +424,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @param  {Query} query - Specify the query to filter the data.
      * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @return {void}.
-
+     * @deprecated
      */
     filter(dataSource: {
         [key: string]: Object;
@@ -506,6 +506,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private clientRenderPopup;
     protected renderHightSearch(): void;
     private updateclientItemData;
+    private initValueItemData;
     private serverUpdateListElement;
     /**
      * Hides the popup if it is in an open state.

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

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { EventHandler, Property, Event, compile, KeyboardEvents, append } from '@syncfusion/ej2-base';
 import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';
@@ -586,7 +586,9 @@ var DropDownList = /** @class */ (function (_super) {
     ;
     DropDownList.prototype.removeHover = function () {
         if (this.list) {
-            var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
+            var hoveredItem = (this.isServerBlazor && this.popupObj && this.popupObj.element) ?
+                this.popupObj.element.querySelectorAll('.' + dropDownBaseClasses.hover) :
+                this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
             if (hoveredItem && hoveredItem.length) {
                 removeClass(hoveredItem, dropDownBaseClasses.hover);
             }
@@ -599,7 +601,7 @@ var DropDownList = /** @class */ (function (_super) {
     ;
     DropDownList.prototype.incrementalSearch = function (e) {
         if (this.liCollections.length > 0) {
-            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.isServerBlazor);
+            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id, this.isServerBlazor);
             if (!isNullOrUndefined(li)) {
                 this.setSelection(li, e);
                 this.setScrollPosition();
@@ -1376,7 +1378,7 @@ var DropDownList = /** @class */ (function (_super) {
      * @param  {Query} query - Specify the query to filter the data.
      * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @return {void}.
-
+     * @deprecated
      */
     DropDownList.prototype.filter = function (dataSource, query, fields) {
         this.isCustomFilter = true;
@@ -1772,7 +1774,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.updateServerPopup = function (popupEle) {
         if (this.isServerBlazor) {
             if (popupEle && popupEle.querySelector('li')) {
-                removeClass([this.list], ['e-nodata']);
+                removeClass([popupEle.querySelector('.e-content')], ['e-nodata']);
             }
             this.initial = false;
             popupEle.removeAttribute('style');
@@ -1801,7 +1803,7 @@ var DropDownList = /** @class */ (function (_super) {
                 _this.isDocumentClick = false;
                 _this.destroyPopup();
                 var formElement = closest(_this.inputElement, 'form');
-                if (_this.isFiltering() && formElement && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
+                if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
                     _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
                 }
@@ -2259,6 +2261,9 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {
             this.itemData = null;
         }
+        if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {
+            this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };
+        }
     };
     DropDownList.prototype.updateDataSource = function (props) {
         if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
@@ -2346,7 +2351,7 @@ var DropDownList = /** @class */ (function (_super) {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.text, oldProp.text, 'text');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldText(oldProp.text);
                             }
                         }
@@ -2372,7 +2377,7 @@ var DropDownList = /** @class */ (function (_super) {
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.value, oldProp.value, 'value');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.setOldValue(oldProp.value);
                             }
                         }
@@ -2390,14 +2395,14 @@ var DropDownList = /** @class */ (function (_super) {
                         }
                         this.renderList();
                     }
-                    if (!this.initRemoteRender) {
+                    if (!this.initRemoteRender && this.liCollections) {
                         var element = this.liCollections[newProp.index];
                         if (!this.checkValidLi(element)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
                                 this.setSelectionData(newProp.index, oldProp.index, 'index');
                             }
-                            else {
+                            else if (!this.isServerBlazor) {
                                 this.index = oldProp.index;
                             }
                         }
@@ -2521,7 +2526,9 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.isServerBlazor) {
             this.invokeRenderPopup();
         }
-        if (this.isServerBlazor && !isNullOrUndefined(this.list) && (this.getModuleName() === 'dropdownlist' || !this.isFiltering())) {
+        var popupHolderEle = !this.isFiltering() || document.querySelector('#' + this.element.id + '_popup_holder');
+        var isDropdownComp = this.getModuleName() === 'dropdownlist' || !this.isFiltering();
+        if (this.isServerBlazor && popupHolderEle && !isNullOrUndefined(this.list) && isDropdownComp) {
             this.invokeRenderPopup();
         }
     };
@@ -2592,6 +2599,11 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.updateclientItemData = function (data) {
         this.listData = data;
     };
+    DropDownList.prototype.initValueItemData = function (selectData) {
+        this.itemData = selectData;
+        this.previousValue = this.value;
+        this.initial = false;
+    };
     DropDownList.prototype.serverUpdateListElement = function (data, popupEle) {
         this.listData = data;
         if (this.ulElement) {
@@ -2625,8 +2637,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.closePopup();
         var dataItem = this.getItemData();
+        var isSelectVal = this.isServerBlazor ? !isNullOrUndefined(this.value) : !isNullOrUndefined(this.selectedLI);
         if (this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
-            !isNullOrUndefined(this.selectedLI) && this.inputElement.value !== dataItem.text)) {
+            isSelectVal && this.inputElement.value !== dataItem.text)) {
             this.isSelectCustom = false;
             this.clearAll(e);
         }