When used in Bootstrap Grid the DropDownList popup is misaligned on the first open. On a second click, it is aligned.

This behavior is also valid for Combobox and Autocomplete.

Reproduction code:

<div class="box">
    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">ComboBox</span>
        </div>
        <div class="col">
            <TelerikComboBox Data="@myComboData" TextField="ComboTextField" ValueField="ComboValueField"
                             @bind-Value="selectedCombo" ClearButton="true" Filterable="true">
            </TelerikComboBox>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">DropDownList</span>
        </div>
        <div class="col">
            <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                                 @bind-Value="@selectedDropDown">
            </TelerikDropDownList>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">Autocomplete</span>
        </div>
        <div class="col">
            <TelerikAutoComplete Data="@Suggestions" @bind-Value="@AutoCompleteValue"
                                 ClearButton="true" />
        </div>
    </div>
</div>

@code {
    public int selectedDropDown { get; set; }
    public int selectedCombo { get; set; }
    public string AutoCompleteValue { get; set; }

    //ComboBox
    public class ComboModel
    {
        public int ComboValueField { get; set; }
        public string ComboTextField { get; set; }
    }

    IEnumerable<ComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new ComboModel { ComboTextField = "item " + x, ComboValueField = x });

    //DropDownList
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    //Autocomplete
    List<string> Suggestions { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };
}

---

ADMIN EDIT

The filter input gets focus, which shows the soft keyboard, which changes the viewport size, which causes the dropdown to hide. Unfortunately, there is no workaround at the moment (except perhaps disabling filtering for small viewports).

---

The drop down list component does not allow the user to associate a label with the underlying html select input control, which goes against accessibility standards. It appears that most, if not all, of the other components follow the accessibility standards. Please fix the drop down list and/or allow attribute splatting so that developers can apply their own attributes (like aria-label) to meet accessibility standards.

---

ADMIN EDIT

Here is a reproducible with the workaround highlighted in green:

@using System.Collections.ObjectModel

<h4>Option Selected: 6 @selectedSix</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSix" />

<h4>Option Selected: 7 @selectedSeven</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSeven">
</TelerikDropDownList>

<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>

<ul>
    @foreach (var item in myDdlData)
    {
        <li>@item.MyValueField</li>
    }
</ul>

@code {
    int selectedSix { get; set; } = 6;
    int selectedSeven { get; set; } = 7;

    ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));

    protected override async Task OnInitializedAsync()
    {
        AddOption();

        await Task.Delay(TimeSpan.FromSeconds(1));

        AddOption();
    }

    void AddOption()
    {
        myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });

        int origSelection = selectedSeven;
        selectedSeven = 0;
        StateHasChanged();
        //add this if it does not work
        //await Task.Delay(30);//wait a rendering frame
        selectedSeven = origSelection;
        //add this if it does not work
        //StateHasChanged();
    }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

---

I have two cascaded dropdownlists, in attached example car brands and selectable colors. The dependent dropdown has defaulttext option. After the parent dropdown has changed, in its event handler I reload the dependent data source and set a new valid value. If the data source does not contain the previous (!) value, the dropdownlist calls the valuechanged callback with default value. In next round when dependent dropdown holds the default value, after reloading datasource it works as expected. And parent changes again, if the updated datasource does not contain the previous dependent value the dropdownlist sets its value to default.

When I do not pass defaulttext parameter, the dependent dropdown selects the first element from the updated datasource. In my case it is not acceptable because I want to set a specific value (in this example the default color), not the first and not the default.

This feedback drives me to try setting value to default and wait for re-render the descendant dropdownlist before set the wanted value. 

Is there any way to avoid this behaviour of the dropdownlist?

<TelerikDropDownList TItem="Brand"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@BrandList"
			 Value="@Data.BrandId"
			 ValueChanged=@OnBrandChanged />

<TelerikDropDownList TItem="Color"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@FilteredColorList"
			 Value="@Data.ColorId"
			 ValueChanged="@OnColorChanged"
			 DefaultText="select color ..." />

async Task OnBrandChanged(int brandId)
{
	Data.ColorId = default;
	await Task.Delay(5);
	Data.BrandId = brandId;
	Data.ColorId = GetDefaultColor(brandId);
	FilteredColorList = GetFilteredColorList(brandId);
}

When the Default text value is changed by some business logic, the component does not react to that change to update the Default text value in the view model.

DropDownList should re-render on change of the Default text parameter

Clicking on the <label> opens the dropdown, but clicking on its main element does not

Selected value: @selectedValue
<br />
<label>some label for the dropdown, open it and test whether clicking outside closes it
    <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
    </TelerikDropDownList>
</label>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data
}

Before, the Value from the first item in the Data was populated through @bind-Value to the view model. It no longer is.

In the following snippet, I expect to see "1" in the initial load of the page, but I see "0" - the default value for the integer.

@selectedValue

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue">
</TelerikDropDownList>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }
}

Hi!

When i use combination of LINQ inside TelerikDropDownLists Data attribute and TelerikGrid 's GridEditMode.Popup mode, i get weird behavior when i try to select an item from TelerikDropDownLists - everything freezes. Please check the solution. Everything works fine if i don't use LINQ or GridEditMode.Popup mode.

Thank you!

Hello,

Initial I want no item to be selected to let the user select a value. I thought it would be enough if my bindvalue would be of a nullable type. I'm getting an exception when trying. If this is not supported, how can I do it?

     <div class="form-group col-md-2">
        <label class="col-form-label" for="ddReleaseType">Fönstertyp</label>
        <TelerikDropDownList Data="@ReleaseTypeFilterOptions" @bind-Value="FilterState.ReleaseType" TextField="DisplayText" ValueField="ReleaseType" Class="max-width form-control" @ref="ddReleaseType"></TelerikDropDownList>
    </div>

     public enum ReleaseType : int
    {
        All = 0,
        Category = 1,
        Season = 2,
        Misc = 3
    }

        protected Telerik.Blazor.Components.TelerikDropDownList<ReleaseTypeFilterModel?, SessionState.ReleaseType?> ddReleaseType;
 

        protected class ReleaseTypeFilterModel
        {
            public SessionState.ReleaseType ReleaseType { get; set; }
            public string DisplayText { get { return ReleaseType.ToString(); } }
        }
 

An unhandled exception occurred while processing the request.

Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)

• • Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)

  • Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.set_CurrentValueAsString(string value)

  • Telerik.Blazor.Components.TelerikDropDownListBase<TItem, TValue>.OnParametersSet()

  • Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

  • Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> oldTree, ArrayRange<RenderTreeFrame> newTree)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment)

  • Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()

  • Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

  • Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c__11<TResult>+<<InvokeAsync>b__11_0>d.MoveNext()

  • Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters)

  • Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)

  • Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)

  • ReleaseCalendar.Pages.Pages__Host.<ExecuteAsync>b__14_1() in _Host.cshtml

    +
    18.     <app><component type="typeof(App)" render-mode="ServerPrerendered" /></app>

  • Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()

  • ReleaseCalendar.Pages.Pages__Host.ExecuteAsync()

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)

  • Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)

  • Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

When bound to a nullable GUID, the DropDownList invokes validation and shows validation messages as soon as the view loads.

Expected: the same behavior as with nullable int - validation is to be triggered by the form submission or selection from the dropdown.

Worked as expected in 1.2.0.

Reproducible: