DropDown with MultiSelect in Tab

Radzen.Blazor Components
1

I'm having a problem with a RadzenDropDown on a RadzenTab.

Steps to reproduce:

  1. Create a class named Tabs that has a public property that is an IEnumerable named ddValues.
  2. Create a class named DropDownValues that has two public properties, "name" and "code". Both are strings.
  3. In a .razor file, in the @code, define TabList as a List, and add 2 Tabs to TabList.
  4. Define a private List named dropDownValues.
  5. In the OnInitialized() event, call dropDownValues.Add() 4 times. For the first one, set name="1" code="1". Do the same for the second one, but set name and code="2".
  6. Add a RadzenTabs control to the .razor file, and in the tag, use a foreach() loop to generate the tabs from TabList. foreach (Tabs thisTab in TabList){}
  7. In the foreach loop, add a RadzenDropDown, and set the @bind-Vaule="thisTab.ddValues". Set the Data="dropDownValues".

Launch it, go to the first tab, open the drop down and select the first two options. Now, go to the second tab, and you should see that the options from the first tab are selected in the second tab. Open the drop down on the second tab, deselect the first to options and select the last two options. Go back to the first tab, and the drop down will have the last two options selected.

If the tabs aren't generated dynamically, the bug doesn't happen. Please let me know if there is a work-around.

2

Try setting the @key attribute of the tab items.

3

I haven't been able to get that to work. I'm using foreach(thisTab in TabList) loop to generate the tabs, and I'm setting the tab @key="thisTab". Am I missing anything?

4

We would be able to tell more if you provide a code snippet that we can run.

UPDATE: I found this thread that sounds similar. The user said they had to set the @key of the DropDown components that live inside the tabs too.