Issue - Setting the selected element of a combo box inside a form worked in 2.22.0 and no longer works in 2.23.0
Repo - https://github.com/benhysell/BlazorGridPagingIssue
Steps to Reproduce
- In the test repo start the application and navigate to https://localhost:5001/updateWeather
- The selected value in the combo box should be the 8th value, "summary 8"
- Stop the application, in BlazorGrid.Client.csproj
- Replace <PackageReference Include="Telerik.UI.for.Blazor" Version="2.22.0" />
- With <PackageReference Include="Telerik.UI.for.Blazor" Version="2.23.0" />
- Do a clean/rebuild to ensure the latest version of Telerik Blazor is being used
- Run the application in a new incognito window and navigate back to https://localhost:5001/updateWeather, notice how nothing is selected in the combo box
Details
This is a contrived example pulled out of a larger application. Almost all of our combo boxes are backed by OData calls. When we 'create or POST' an element the first time we load the form we have the combo box make an OData call to retrieve the top 200 elements. On a subsequent 'edit or PUT', where we have a thing we want to update we first go get the thing we want to work with, and then fill in the comobo box with that element.
In this example application we simulate this load by deciding if a value was passed in or not for the combo box. https://localhost:5001/updateWeather always passes in an 8 to load the 8th element. https://localhost:5001/createWeather does not pass in any value, leaving the form value unbound.
This all worked as expected in 2.22.0, however once we upgraded to 2.23.0 we could no longer set the value of the combo box on load when combined with an OData call.
I am experiencing this problem with version 2.29 when the drop-down list is in a "component"
It seems to be intermittent but dependent on how long the async method takes to complete.
Edit page
@page "/"
@using System.Diagnostics
@using System.Threading
@using BlazorApp1.Components
<h1>Hello, world!</h1>
<EditForm class="form-inline" Model="@Model">
<MyComponent />
</EditForm>
Welcome to your new app.
@code {
object Model = new();
private Guid InstanceId;
public Index()
{
InstanceId = Guid.NewGuid();
Debug.WriteLine($"Index - {InstanceId}");
}
protected override Task OnInitializedAsync()
{
Debug.WriteLine("Index - OnInitializedAsync");
return base.OnInitializedAsync();
}
protected override Task OnParametersSetAsync()
{
Debug.WriteLine("Index - OnParametersSetAsync");
return base.OnParametersSetAsync();
}
}
Component
@using System.Diagnostics
<h3>My Component</h3><br /><TelerikDropDownList @bind-Value=_selectedValue Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" TValue="int" TItem="MyDdlModel"></TelerikDropDownList><br /><TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton><br />
@helloString
<br />
@code {
private Guid InstanceId;
MarkupString helloString;
int _selectedValue { get; set; } = 2; // Preselected value
IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>();
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
public MyComponent()
{
InstanceId = Guid.NewGuid();
Debug.WriteLine($"MyComponent - {InstanceId}");
}
protected override async Task OnInitializedAsync()
{
Debug.WriteLine("MyComponent - OnInitializedAsync");
myComboData = await LoadData();
await base.OnInitializedAsync();
}
protected override Task OnParametersSetAsync()
{
Debug.WriteLine("MyComponent - OnParametersSetAsync");
return base.OnParametersSetAsync();
}
private async Task<IEnumerable<MyDdlModel>> LoadData()
{
await Task.Delay(100);
return Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
