Radio Buttons Item Doesn't Disappear and Then Appears Double

Radzen.Blazor Components
1

Using Blazer Server on .NET Core 3.1

Using this code

<RadzenRadioButtonList @bind-Value="Input.PaymentMethod" TValue="string" Orientation="Orientation.Vertical">
    <Items>
        <RadzenRadioButtonListItem Text="Credit Card USD (for United States)" Value="@StrCreditCardUsd" />
        <RadzenRadioButtonListItem Text="Credit Card CAD (recommended for international)" Value="@StrCreditCardCad" />
        @if (ShowPayPal)
        {
            <RadzenRadioButtonListItem Text="PayPal" Value="@StrPayPalForm" />
        }
    </Items>
</RadzenRadioButtonList>

@code {
    public bool ShowPayPal { get; set; }
}

ShowPayPal should show and hide the 3rd option. Setting it to false doesn't hide it; but setting it back to true makes a 2nd option button appear.

As a work-around, perhaps I can set Visible="@ShowPayPal" on the 3rd option? Well, then if I have a button for show and a button for hide, it only shows or hide after clicking a 2nd time; its behavior comes too late.

2

Looks like this: Dynamic Tabs
try setting @key for RadzenRadioButtonListItem

3

I tried adding on the 3 items
@key="1"
@key="2"
@key="3"

Still same issue

And shouldn't the Visible property be solving my problem?

4

Here's a beautiful reproduction

<RadzenRadioButtonList @bind-Value="PaymentMethod" TValue="string" Orientation="Orientation.Vertical">
    <Items>
        <RadzenRadioButtonListItem @key="1" Text="Credit Card USD (for United States)" Value="@StrCreditCardUsd" />
        <RadzenRadioButtonListItem @key="2" Text="Credit Card CAD (recommended for international)" Value="@StrCreditCardCad" />
        @if (ShowPayPal)
        {
            <RadzenRadioButtonListItem @key="3" Text="PayPal" Value="@StrPayPalForm" />
        }
    </Items>
</RadzenRadioButtonList>
<RadzenButton ButtonType="ButtonType.Submit" Text="Apply" ButtonStyle="ButtonStyle.Light" Click="Click" />

@code {
    public const string StrCreditCardUsd = "CreditCardUsd";
    public const string StrCreditCardCad = "CreditCardCad";
    public const string StrPayPalForm = "PayPalForm";

    public string PaymentMethod { get; set; } = StrCreditCardUsd;
    public bool ShowPayPal { get; set; } = true;

    public void Click()
    {
        ShowPayPal = !ShowPayPal;
    }
}
5

Thanks! It will be fixed in the next update!

6

If there's any issue with Blazor, you can reference this ticket on GitHub

If it's just a Radzen bug, then we can close the GitHub issue.

7

I think you can close the issue - I will fix the problem in our library.

8

Radzen.Blazor 2.9.4 was just published with fix for this issue.

9

Thanks! Now it crashes on startup with

InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

As of v2.9.3, so it's not because of this fix. v2.9.2 is working.

10

Any more info about your setup? Here is what I have with your code:

image
image1920×1080 193 KB

image
image1920×1080 104 KB

image
image1920×1080 103 KB

11

The project is a little bit more complex than this... but not much. I'm sure others are also seeing the bug?

They already released v2.9.5 and v2.9.6 to fix it so it works now.

12

Yes, we’ve fixed the problem and released update.