Dropdownlist does not close after selection

[Andrew]

The dropdownlist does not close after selecting a value from the list. It will close once it has lost focus.

I tested this is chrome and firefox and there no JavaScript errors in the thrown

 

 

<label class="ic-Label" for="RoomTypes">Room Type:</label>                         <TelerikDropDownList Id="RoomTypes" Width="230px" Data="@RoomTypes" TextField="Text" ValueField="Value" @bind-Value="_appData.RoomSearchData.RoomType"></TelerikDropDownList>

 

does anyone have an idea?

[Eric R | Senior Technical Support Engineer]

Hi Andrew,

Thank you for providing the component markup. I suspect the behavior is because the selectedValue data type is of a different type than the ValueField object. Let me explain more with a sample below. 

Sample

In the following component, notice the selectedValue is a string data type and the MyValueField is an int. This is an invalid scenario that can cause similar issues.

This is one possible (invalid) implementation to cause the behavior where the dropdown only closes after it has lost focus even though the selection does change. 

<span>You Selected Value: @selectedValue</span>
<br />
<br />
<label for="Items">Items: </label>
<TelerikDropDownList Id="Items" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
</TelerikDropDownList>

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

    string selectedValue { get; set; }

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

Potential Fix

<span>You Selected Value: @selectedValue</span>
<br />
<br />
<label for="Items">Items: </label>
<TelerikDropDownList Id="Items" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
</TelerikDropDownList>

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

    int selectedValue { get; set; }

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

Wrapping Up

Understandably, the above implementation and potential fix may not apply to your scenario. If your implementaiton is different, I ask that you provide more information about your data model and data collection for the DropDownList.

In the meantime, please let me know if you need any additional information. Thank you.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

[Andrew]

Thanks that worked, but I do find it weird that is will still bind the selected value and work except that the ui does not update.

If there is an internal error then maybe there is away to display bring that forward to the developer or just ignore it.