CodeBeamOrg / CodeBeam.MudBlazor.Extensions

Useful third party extension components for MudBlazor, from the contributors.
https://mudextensions.codebeam.org/
MIT License
358 stars 61 forks source link

MudSelectExtended - Initially selected item not rendered if ItemsCollection is provided after OnAfterRenderAsync #342

Open eMuonTau opened 5 months ago

eMuonTau commented 5 months ago

Hi,

239 fixes situations where item collection is static or fast enough so it is loaded before OnAfterRenderAsync is called. But if you are loading data from a remote source, initially selected item is not rendered. I think it is because SelectedListItem is never reassigned after OnAfterRenderAsync.

https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions/blob/c88d3286b438f4db1c043ca454fe69cc43774b56/CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs#L739

I think SelectedListItem should be set every time Value or ItemCollection parameters changed.

I also tried to use MudBlazor AutoComplete but looks like it doesn't support something like ValuePresenter.

@using MudExtensions.Enums

<MudSelectExtended ItemCollection="_players" @bind-Value="_selected" ValuePresenter="ValuePresenter.ItemContent" 
                    Placeholder="Template & ItemContent"Label="Select Player" 
                    Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
    <ItemTemplate>
        <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
            <MudText><b>@context.Value.Name</b></MudText>
            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                <MudStack Row="true">
                    <MudIcon Icon="@Icons.Material.Outlined.Person" />
                    <MudText>@(context.Value.Retired == true ? "Retired" : "Active")</MudText>
                </MudStack>
                <MudChip Color="Color.Info" Variant="Variant.Outlined">Total Score: @context.Value.Score</MudChip>
            </MudStack>
        </MudStack>
    </ItemTemplate>
</MudSelectExtended>

@code {
    List<Player> _players = null;
    Player _selected = null;

    protected override async Task OnInitializedAsync() {
        _players = await LoadData();
        _selected = _players.FirstOrDefault();
    }

    private async Task<List<Player>> LoadData() {
        await Task.Delay(1000);
        return new List<Player>
        {
            new Player("Kareem Abdul-Jabbar", "38.387", true),
            new Player("LeBron James", "37.062", false),
            new Player("Karl Malone", "36.928", true),
            new Player("Kobe Bryant", "33.643", true),
            new Player("Michael Jordan", "32.292", true),
        };
    }
    private record Player {

        public Player(string name, string score, bool retired) {
            Name = name;
            Score = score;
            Retired = retired;
        }

        public string Name { get; set; }
        public string Score { get; set; }
        public bool Retired { get; set; }
    }
}

MudBlazor: 6.11.2 CodeBeam.MudBlazor.Extensions: 6.7.0