MatBlazor
MatBlazor copied to clipboard
SamProf
MatSelectItem not updating Value
Describe the bug MatSelectItem not updating Value
To Reproduce
<MatSelectItem @bind-Value="Item.Method" Items="@methods">
<ItemTemplate Context="method">
<FlexLine Direction="Direction.Column" Class="dropdown-vertical-template">
<div class="name">@method?.Name</div>
<div class="desc">@method?.Description</div>
</FlexLine>
</ItemTemplate>
</MatSelectItem>
This just doesn't work. The list is populated but the selection is not set even though Item.Method has the correct value set at the start of the component (this is an "edit" scenario. Whole Item object is correctly set at this point).
I then figured perhaps Item.Method needs to be the exact match from the methods so i did this
Item.Method = methods.Where(x => x.Id == Item.MethodId).SingleOrDefault();
which gets me Error: System.FormatException: Input string was not in a correct format. even though methods.Where(x => x.Id == Item.MethodId).SingleOrDefault() does indeed return the proper value.
Blazorfiddle link I tried to replicate in blazorfiddle but I got a different error before anything select related. I think blazorfiddle maybe too many version behind now to be an effective tool. I submitted a request to update its guts on it's own github.
Expected behavior Value in the drop down is selected
I think it maybe related to #494 .
The code you posted is not enough to reproduce the problem, we would have to make up the @code { } that goes with it. Please post a minimal code that goes with the markup for reproduction. Or even better: edit one of the Demo examples so that it reproduces the error.
I think you got a bug in your code. I constructed a minimal example that updates a property of an object and it works:
<MatSelectItem @bind-Value="Item.Method" Items="@value1Items">
<ItemTemplate>
<span style="color: red">@context (@(context.Length))</span>
</ItemTemplate>
</MatSelectItem>
<p>
Selected value: @(Item?.Method)
</p>
@code {
string[] value1Items = new[]
{
"Grains",
"Vegetables",
"Fruit",
};
public class Foo
{
public string Method { get; set; }
}
Foo Item = new Foo();
}
I had to change the ItemTemplate because of <FlexLine> which requires another dependency, but it doesn't seem to matter anyway.
Your code works because all the info to set the dropdown is available at the Init.
Problems creep up when drop down list is as well as the select item are set after an api call of some sort in OnInitializedAsync.
I don't have access to the exact code now but it's something along the lines of
OnInitializedAsync { methods = Http.GetFromJson<Method>(); //API call to methods; method = methods.Where(x=>x.Id == Item..Method.Id).SingleOrDefault(); //Item is the overarching object of the control where the drop down results. Item has a "Method" property
}
ok, got it. You can mimick the asynchronous initialization by using await Task.Delay(...). If you can put together a minimal reproducing piece of code that can be copy-pasted into a page of a test project it is more likely that this is getting fixed fast. Thank you.
@WinInsider the OP never produced code that reproduces the problem. Can you maybe?
@henon once an example will be ready... will update here with link to Blazorfiddle
@henon For what it's worth I mentioned why I didn't repro in the request itself "I tried to replicate in blazorfiddle but I got a different error before anything select related. I think blazorfiddle maybe too many version behind now to be an effective tool. I submitted a request to update its guts on it's own github."
I have also put in the request with that repo to be updated as to be a reliable tool for this.
I'm pretty sure this is a duplicate of #494. A workaround (if feasible for your project) is to wait untill you have your results from the API until you render your MatSelect.
Yeah i think so too. And yep that's the work around I am using. Issue is, it creates a very unsightly popup in the controls and in some cases, like mine, both list and item are coming from the API so I have to wait until both of these are done before rendering MatSelect or it breaks or doesn't change (I frankly don't remember at his point as I have grown to rely on the work around) It's also not common for a real life from to have 2+ dropdowns so having them all pop in like that makes the whole form feel very amateurish :(
@americanslon Maybe you can render a disabled MatSelect placeholder which doesn't have any bindings until your api call returns? Makes sort of sense since the user can't select anything at that moment anyway.
Yeah that's a thought. My form has quite a few states so I have rather complex logic on the disabled fields. Hate to add to it. I'll be honest, I am selfishly waiting until this gets resolved as it seems like a relatively high profile bug :)
I am experiencing similar issues setting the initial value from a web api service. Any other ideas on how to resolve?
