Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MatSelect options dont show when loaded as disabled then changed dynamically to not be disabled #943

Open
liamkavfc opened this issue Mar 12, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@liamkavfc
Copy link

Describe the bug

I have a blazor app where I am using the MatSelect component.

I have a Disabled State based on a couple of booleans like so:

<MatSelect TValue="Guid" 
           @bind-Value="@SomeViewModel.Customer"
           Disabled="@(!IsAdmin || HasProducts)">
    <MatOption Value="new Guid()" Disabled="true">Please select</MatOption>
    @foreach(var customer in AvailableCustomers)
    {
        <MatOption Value="customer.Id">@customer.Name</MatOption>
    }
</MatSelect>

So basically the customer field is editable for admin users and only if the customer has no products (This is a sample scenario loosely based on what I'm building). When the page is loaded and Disabled is false, I can click the MatSelect box and get my dropdown options no problem, but if its loaded and Disabled is true, when removing the products, thus making the Disabled state false, the field becomes clickable again but my dropdown list doesn't show.

Now just to confirm, the AvailableCustomers List IS populated and I can see the html in the page, just that it isn't becoming visible.

What I have already tried
I have a method to remove products from the SomeViewModel which I also tried adding StateHasChanged() and this still didn't work.

public void RemoveProduct(
    ProductListViewModel productListViewModel)
{
    SomeViewModel.Products.Remove(productListViewModel);

    // Notify EditContext of the change
    FormEditContext.NotifyFieldChanged(FieldIdentifier.Create(() => SomeViewModel.Product));

    CheckForDuplicateProducts();

    // Didnt work
    // StateHasChanged();
}

To Reproduce
Steps to reproduce the behavior:

  1. Load MatSelect with a bool bound to Disabled which is true, then programmatically update that bool to be false
  2. Click MatSelect field and observe that the options do not appear as they should

Blazorfiddle link
https://blazorfiddle.com/s/kinehghl

Expected behavior
The dropdown options should display when the MatSelect Field becomes Enabled again

Screenshots
N/A

Additional context
N/A

@liamkavfc liamkavfc added the bug Something isn't working label Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant