CodeBeamOrg / CodeBeam.MudBlazor.Extensions

Useful third party extension components for MudBlazor, from the contributors.

Home Page:https://mudextensions.codebeam.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

eMuonTau opened this issue · comments

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.

SelectedListItem = Items.FirstOrDefault(x => x.Value != null && Value != null && x.Value.Equals(Value))?.ListItem;

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