CodeBeamOrg / CodeBeam.MudBlazor.Extensions

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

MudSelect Chips Render #337

Open softbunnyware opened 6 months ago

softbunnyware commented 6 months ago

``Hello!

I have one problem and I realy don't know how to solve it. When I select the data in the select box the chips does show, but as soon as I close the drawer the chips dissaper. If I use the select as normal I do get get the strings.

@typeparam TEntity where TEntity : IBunnyClientResponseExtensions
@typeparam TId
@inject IBunnyClient Client

@using System.Linq.Expressions;

<MudSelectExtended T="TId" MultiSelection="true" SelectedValues="@SelectedValues" SelectedValuesChanged="@SelectedValuesChanged" 
                   Label="@Label" Dense="true" Style="margin:5px;" For="@For" ValuePresenter="MudExtensions.Enums.ValuePresenter.Chip"
                   ChipCloseable="true" ChipVariant="MudBlazor.Variant.Filled" ChipSize="MudBlazor.Size.Small"
                   Variant="Variant.Outlined" Margin="Margin.Dense" >
    @if (List != null)
    {
        @foreach (var item in List)
        {
            <MudSelectItemExtended T="int" Value="@item.Id" Text="@item.Name" />
        }
    }
</MudSelectExtended>

@code {
    [Parameter] public IEnumerable<TId> SelectedValues { get; set; } = default!;
    [Parameter] public EventCallback<IEnumerable<TId>> SelectedValuesChanged { get; set; }
    [Parameter] public Expression<Func<TId>> For { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public SelectFieldContext<TEntity> Context { get; set; } = default!;

    List<TEntity>? List { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        if (await APIWrapper.ExecuteCallGuardedAsync(
                () => Context.LoadAllFunc(), Snackbar)
            is { } result)
        {
            List = result.Adapt<List<TEntity>>();
        }
    }
}

This is my select components

<SelectFieldMulti @bind-SelectedValues="Request.Sectors" For="(() => Request.ContractorId)" Context="SectorSelectContext" Label="@L["Sectors"]" />

This is how I use component

The Request.Sectors is a List

If i remove this part of code I do get selected sectors seperated by comma

ValuePresenter="MudExtensions.Enums.ValuePresenter.Chip"
ChipCloseable="true" ChipVariant="MudBlazor.Variant.Filled" ChipSize="MudBlazor.Size.Small"

Can you please help me where is the problem.

mckaragoz commented 6 months ago

Which version do you use?

softbunnyware commented 6 months ago

I am using 6.6.3

mckaragoz commented 6 months ago

Do you have any more information, like screenshots etc?

softbunnyware commented 6 months ago

Okei I have tried with the Combobox and did it a bit differently but it doesnt work :( When I try to edit the Request I get the black Combobox, it works fine if I am on Create form.

<ComboField T="SectorResponse" @bind-Value="Request.Sector" 
For="(() => Request.Sector)" MultiSelection="false" Label="@L["Label"]">
    <ComboFields Context="SectorSelectContext" T="SectorResponse"/>
</ComboField>

This is the Edit form

public class ComboField<T> : MudComboBox<T>
        where T : IBunnyClientResponseExtensions
    {
        [Parameter] public bool IsMultiSelect { get; set; } = true;

        public override Task SetParametersAsync(ParameterView parameters)
        {
            Variant = Variant.Text;
            Margin = Margin.Dense;
            ItemPresenter = ValuePresenter.Chip;
            InputPresenter = ValuePresenter.Chip;
            ChipCloseable = true;
            Editable = true;
            Color = Color.Primary;
            ChipVariant = Variant.Text;
            ChipSize = Size.Small;
            MultiSelection = IsMultiSelect;
            ToStringFunc = x => GetString(x);
            return base.SetParametersAsync(parameters);
        }

        private string GetString(T entity)
        {
            return entity.DisplayName ?? default!;
        }
    }

This is the ComboFields

@typeparam T where T : IBunnyClientResponseExtensions

@foreach (var item in List)
{
    <MudComboBoxItem Text="@item.DisplayName" Value="@item"></MudComboBoxItem>
}
@code {
    private List<T> List { get; set; } = new List<T>();
    [Parameter] public ComboFieldContext<T> Context { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        if (await APIWrapper.ExecuteCallGuardedAsync(
        () => Context.LoadAllFunc(), null)
            is { } result)
        {
            List = result.Adapt<List<T>>();
        }
    }
}

Am I Stupid or where is the problem that the initial value is Null when I use this field on EditForm

thomasdewulf commented 3 days ago

+1 on this, having the exact same issue with a ComboBox inside a drawer. When initially selecting items, they are displayed. When I close the drawer and reopen, they aren't show in the input.

thomasdewulf commented 3 days ago

I just found the solution. It has something to do with the equality check. I changed my object from a class to a record and it started working. Might be useful that the documentation somehow shows this.