Dropdown Locking Up

Radzen Studio Blazor Server
1

Hi I have a dropdown and a text box on my page and the dropdown is bound to a List.
Based on another dropdown I make a service call which updates the List of data
This all works well and data is refreshed.

When no items are returned in the list I still set the data source and also set a visible property which the controls are bound to and in cases of no records the text box is displayed. Again this functionality work well but when I go back to selecting data that has something in the list the Combo is populated but when I select an item it doesn't shrink to set the value is stays expanded and freezes. A page refresh is all I can do.

Via debugging I noticed that the Selected Item property often holds onto an item in the previous list so I tried setting this to null to see if it helps but it doesn't cure the problem.

Any ideas for a workaround or another approach: to summarise.

  1. Call service >> List has items >> visible property set to true >> dropDown is displayed with data
  2. Call Service >> No Items in List >> visible property is set to false >> Text Box Displayed
  3. Call Service > List has items >> visible property set to true >> dropdown displayed but freezes when selecting an item.
2

There is probably some exception in this case. Check what it is.

3

I don't see anything in the browser I have recreated in a simple scenario:

 @page "/"

    <div class="container">
        <div class="pb-1">
            <Radzen.Blazor.RadzenCheckBox @bind-Value="visible" Style="margin-bottom: 20px" TValue="bool" Change="@(args => Change(args, "TriState CheckBox"))" />

            <Radzen.Blazor.RadzenDropDown Visible="@visible" AllowClear="false" TValue="Int32" Style="margin-bottom: 10px; width:100%" Placeholder="Select Section..." Data="@Items" TextProperty="Data" ValueProperty="Key" Change="@OnSectionChange" @ref="sectionSelector" />
            <Radzen.Blazor.RadzenTextBox Visible="@(!visible)" Style="margin-bottom: 10px; width:100%" MaxLength="50" @bind-Value="section" />
        </div>

    </div>
@code
{

    List<DataItem> Items;

    bool checkboxvalue;
    bool visible = false;
    private string section = "";
    private string selectedValue;

    protected Radzen.Blazor.RadzenDropDown<Int32> sectionSelector;

    void Change(bool? value, string name)
    {
        if (value == true)
        {
            Items = new List<DataItem>()
            {
                new DataItem(){Key=1,Data="Value 1"},
                new DataItem(){Key=2,Data="Value 2"},
                new DataItem(){Key=3,Data="Value 3"}
            };

            visible = true;
        }
        else
        {
            Items = new List<DataItem>();
            visible = false;

        }

        StateHasChanged();
    }

    public void OnSectionChange(object value)
    {
        selectedValue = Convert.ToString(value);
    }

}

public class DataItem
    {
        public int Key { get; set; }

        public string Data { get; set; }
    }
4

looking into this further it is definitely setting the Visible property which causes the problems can anybody see any workaround for me. Perhaps the order I'm doing things is causing the problem.

5

Indeed the popup of the DropDown remains open in this case. We will fix it with the next release.

6

Here is a workaround - instead of using the Visible property use if and else

@if (visible)
{
      <Radzen.Blazor.RadzenDropDown AllowClear="false" TValue="Int32" Style="margin-bottom: 10px; width:100%" Placeholder="Select Section..." Data="@Items" TextProperty="Data" ValueProperty="Key" Change="@OnSectionChange" @ref="sectionSelector" />
} 
else
{
     <Radzen.Blazor.RadzenTextBox Style="margin-bottom: 10px; width:100%" MaxLength="50" @bind-Value="section" />
}
7

OK thanks I'll give that a go I think I may have tried something like that origionaly but had issues whereby the controls didn't hide but I've done a lot more since then so I'll give it another go. Thanks for your help.