@bind-Visible doesn't seem to work on a Combo Box

[Clive Gray]

I have a Combo Box which I want to be hidden until the "Update Value" button is pressed. Here's the markup:

<div style="margin:130px auto;width:300px">
    <SfComboBox TValue="int" TItem="Country" @bind-Value="@ComboVal" DataSource="@Countries" @bind-Visible="@isVisible">
        <ComboBoxFieldSettings Value="Code" Text="Name"></ComboBoxFieldSettings>
    </SfComboBox>
    <button @onclick="UpdateValue">Update Value</button>
</div>

This works great with popups but for some reason, this Combo Box is *always* shown, no matter what the value of @isVisible. Do Combo Boxes work differently?

For completeness, here's the rest of the code (but most of it was copied from an example in the Syncfusion documentation). Everything works great... except that the Combo Box is always displayed, no matter what!

@code {
    public int ComboVal;
    private bool isVisible = false;

    public class Country
    {
        public string Name { get; set; }
        public int Code { get; set; }
    }

    List<Country> Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = 1 },
        new Country() { Name = "Bermuda", Code = 2 },
        new Country() { Name = "Canada", Code = 3 },
        new Country() { Name = "Cameroon", Code = 4 },
    };

    private void UpdateValue()
    {
        isVisible = true;
        ComboVal = 3; // Set the value of the Combo Box component
    }
}

I would greatly appreciate any thoughts anyone has on this issue.

[UdhayaKumar Duraisamy]

It appears that you're using the @bind-visible property with the ComboBox component, which isn't applicable for this component. To achieve dynamic rendering of the Blazor ComboBox, you can use conditional rendering instead. Below is a code snippet that demonstrates how to implement this approach:

<div style="margin:130px auto;width:300px">

    @if(isVisible)

    {

        <SfComboBox TValue="int" TItem="Country" @bind-Value="@ComboVal" DataSource="@Countries">

            <ComboBoxFieldSettings Value="Code" Text="Name"></ComboBoxFieldSettings>

        </SfComboBox>

    }

    <button @onclick="UpdateValue">Update Value</button>

</div>

 

Sample: https://blazorplayground.syncfusion.com/embed/rZVfNbWpAarngqVf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

For more details on the properties that are applicable to the Blazor ComboBox component, you can refer to the documentation linked below:

Class SfComboBox<TValue, TItem> - Blazor API Reference | Syncfusion

[Clive Gray]

Thanks very much UdhayaKumar. That would explain it.

Can you tell me please what the technical reason for that is (why you can't @bind-Visible) or is it just one of those things?

Many thanks.

[UdhayaKumar Duraisamy]

The @bind-Visible property is specifically designed for Popup components like Dialog. For Dropdown components such as ComboBox, DropdownList etc., you can control their visibility using conditional rendering. These components do not have a direct property to change their visibility.