Blazor Conditional Display: Item Doesn't Disappear and Then Appears Double

[mysteryx93]

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>

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.

[mrpmorris]

I don't see the show/hide buttons. Are they in the same component on another component (and is it the parent)?

Also, is ShowPayPal a public property decorated with [Parameter]?

[javiercn]

@mysteryx93 thanks for contacting us.

I'm not sure what those components you are using do. I would suggest you file an issue with the Radzen folks as it is not clear that this is an issue in Blazor itself or one of those components.

If you can produce a repro with vanilla components we can take a look at it.

That said, there are some challenges with using radio buttons and bind. See here for details

[mysteryx93]

I'm using the free Radzen controls available on NuGet.

ShowPayPal is a bool field, how you change its value doesn't (shouldn't) matter.

My guess is that the problem is editing the collection directly with the conditional @if. Is this supposed to be a supported scenario?

If I use the standard radio buttons as in the doc, then there is no collection edit as the controls are individual, so that won't reproduce the issue.

[javiercn]

@mysteryx93 Blazor wise there is no issue with the @if piece.

But I don't know how that specific component handles the state and maybe they have a bug that prevents you from doing those kinds of modifications. I would suggest you follow up with the Radzen folks since this seems like a behavior in their control.

[mrpmorris]

@mysteryx93 It does matter.
Would you like to email a URL to a repo for me to look at? mrpmorris@gmail.com

[mysteryx93]

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;
    }
}

[mrpmorris]

Please email me a zipped solution, or a URL to a repo.

[mysteryx93]

Sent. Also Radzen said "Thanks! It will be fixed in the next update!"

[mrpmorris]

I thought it might be a radzen bug. I suppose you can close this ticket now and wait for them to fix it :)

[mysteryx93]

ok they say they'll fix it in their library so I can close this