Blazor component: strange @attributes behavior

[pos777]

Hello!

Assume you have the Direction.razor component:

@if (Up)
{
    <span>Up</span>
}
@if (Right)
{
    <span>Right</span>
}
@if (Down)
{
    <span>Down</span>
}
@if (Left)
{
    <span>Left</span>
}
<br>
@code {
    [Parameter] public bool Up { get; set; }
    [Parameter] public bool Right { get; set; }
    [Parameter] public bool Down { get; set; }
    [Parameter] public bool Left { get; set; }
}

And the TestPage.razor page:

@page "/TestPage"

<Direction @attributes="attributes" />
<button class="btn btn-primary" @onclick="Next">Next</button>

@code {
    Dictionary<string, object> attributes = new Dictionary<string, object>() { { nameof(Direction.Up), true } };
    void Next()
    {
        if (attributes.ContainsKey(nameof(Direction.Up)))
        {
            attributes.Clear();
            attributes.Add(nameof(Direction.Right), true);
        }
        else if (attributes.ContainsKey(nameof(Direction.Right)))
        {
            attributes.Clear();
            attributes.Add(nameof(Direction.Down), true);
        }
        else if (attributes.ContainsKey(nameof(Direction.Down)))
        {
            attributes.Clear();
            attributes.Add(nameof(Direction.Left), true);
        }
        else if (attributes.ContainsKey(nameof(Direction.Left)))
        {
            attributes.Clear();
            attributes.Add(nameof(Direction.Up), true);
        }
    }
}

The attributes dictionary always contains only one element, so I expect that result of the 'Next' button click should be:

0: Up
1: Right
2: Down
3: Left
4: Up
...

But the actual result in is:

0: Up
1: UpRight
2: UpRightDown
3: UpRightDownLeft
4: UpRightDownLeft
...

The issue occurs in a Blazor Server application with target framework .NET 5.

Is it correct behavior?

@captainsafia @SteveSandersonMS

[SteveSandersonMS]

It's up to the receiving component's SetParametersAsync logic to choose how to handle receiving a partial set of parameters. The default behavior is additive. That is, for any parameters not specified, the default value is to leave the corresponding properties alone. It does not try to revert unspecified parameters to default values.

So in your logic, you keep supplying different boolean parameters, leaving other ones unspecified. So you accumulate more of them with value true, and none of them get set back to false.

To avoid this, you could:

• Supply values for all the parameters. For example, in your TestPage.razor:

<Direction @attributes="attributes" />
<button class="btn btn-primary" @onclick="Next">Next</button>

@code {
    Dictionary<string, object> attributes = new Dictionary<string, object>
    {
        { nameof(Direction.Up), true },
        { nameof(Direction.Down), false },
        { nameof(Direction.Left), false },
        { nameof(Direction.Right), false },
    };

    void Next()
    {
        if ((bool)attributes[nameof(Direction.Up)])
        {
            attributes[nameof(Direction.Up)] = false;
            attributes[nameof(Direction.Right)] = true;
        } 
        else if ((bool)attributes[nameof(Direction.Right)])
        {
            attributes[nameof(Direction.Right)] = false;
            attributes[nameof(Direction.Down)] = true;
        } 
        else if ((bool)attributes[nameof(Direction.Down)])
        {
            attributes[nameof(Direction.Down)] = false;
            attributes[nameof(Direction.Left)] = true;
        }
        else
        {
            attributes[nameof(Direction.Left)] = false;
            attributes[nameof(Direction.Up)] = true;
        }
    }
}

• Or, perhaps better, instead of having separate bool flags for each direction passed as a dictionary, just have a single enum describing the possible directions, and have a single parameter giving the current enum value.