CodeBeam.MudBlazor.Extensions icon indicating copy to clipboard operation
CodeBeam.MudBlazor.Extensions copied to clipboard

MudSelectExtended: How to dynamically refresh dropdown list items when using search box.

Open diego-cascudo-sop opened this issue 7 months ago • 0 comments
trafficstars

We need to perform a api call when typing in the search box, that will bring a list of itms that should replace the items in teh drop down. Right now we have

<MudSelectExtended T="LeadExplorationFilterValue" @ref="_eosSelectExtended" @bind-SelectedValues="@SelectedValues" ItemCollection="FilterValues" SearchBox="true" Color="Color.Tertiary" SearchBoxClearable="true" SearchBoxAutoFocus="true" OnSearchStringChange="GetRefinedFilterValues" MultiSelection="true" MultiSelectionTextFunc="@((x) => DisplayText)" Underline="false" Immediate="false" RelativeWidth="DropdownWidth.Adaptive" ToStringFunc="@(x => x?.Text)" Variant="Variant.Text" Margin="Margin.Dense" OpenIcon="@Icons.Material.Filled.ExpandMore" CloseIcon="@Icons.Material.Filled.ExpandLess" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" />

`
IList<LeadExplorationFilterValue> FilterValues { get; set; } = []; MudSelectExtended<LeadExplorationFilterValue> _eosSelectExtended = null!;

bool _shouldSearch = false;
IEnumerable<LeadExplorationFilterValue> _selectedValues = [];
IEnumerable<LeadExplorationFilterValue> SelectedValues
{
    get
    {
        return _selectedValues;
    }
    set
    {
        _selectedValues = value;
        var filterValuesSelected = WellKnownFilterState.Value.SelectedFilters.ToDictionary();
        filterValuesSelected[FilterType] = value.ToList();
        Dispatcher.Dispatch(new UpdateSelectedFilterValuesAction(FilterType, value.ToList(), IsChipClose: false));

        if ((value.Any() && !_shouldSearch) || (!value.Any() && _shouldSearch))
            _shouldSearch = true;

        if (_shouldSearch)
            Dispatcher.Dispatch(new SearchAccountAction(SearchModel?.SearchText, IsLeadExploration: true, filterValuesSelected));
    }
}

private void GetRefinedFilterValues(string searchBoxText)
{
    var filter = WellKnownFilterState.Value.Filters.FirstOrDefault(x => x.FilterType == FilterType);
    if (filter == null)
        return;

    if (filter.FilterType == LeadExplorationFilterType.LegalEntityTypeClass || filter.FilterType == LeadExplorationFilterType.Revenue || filter.FilterType == LeadExplorationFilterType.Size)
        return;

    if (string.IsNullOrEmpty(searchBoxText))
    {
        Dispatcher.Dispatch(new CleanFilterValuesAction(FilterType));
        RefreshFilterValues();
        return;
    }

    if (searchBoxText?.Length < 2)
        return;

    Dispatcher.Dispatch(new SearchFilterValuesAction(FilterType, searchBoxText));
}

public async void RefreshFilterValues(IList<LeadExplorationFilterValue>? filterValues = null)
{
    var alreadySelected = WellKnownFilterState.Value.SelectedFilters[FilterType];

    FilterValues = filterValues ?? [];
    FilterValues.AddRangeNonNullItems(alreadySelected);

    await _eosSelectExtended.ForceRender(true);
    await _eosSelectExtended.ForceUpdate();
    _eosSelectExtended.ForceUpdateItems();
}

private void OnSearchFilterValuesSuccessAction(SearchFilterValuesSuccessAction action)
{
    if (action.FilterType == FilterType)
        RefreshFilterValues(action.FilterValues ?? []);
}

`

when typing in the searchbox , the api call returns the new values but none of the methods called

    await _eosSelectExtended.ForceRender(true);
    await _eosSelectExtended.ForceUpdate();
    _eosSelectExtended.ForceUpdateItems();

refresh the items can you help us/explain how to do this?

Thank you

diego-cascudo-sop avatar Mar 25 '25 16:03 diego-cascudo-sop