Autocomplete

Hello,

I’m trying to use the Autocomplete component. I’m getting a the selected value from the parent component and the list to filter from an external service. I’m use blazor server. When the component load it didn’t display the display value, it didn’t go to the ToStringFunc when i’m in debug.

Do you see something wrong or it’s a bug on the autocomple

Thanks in advance for you help.

Please find the code below :

<MudAutocomplete T="ExternalList" Variant="Variant.Outlined" Margin="Margin.Dense" Label="Kizeo external list" SearchFunc="@Search2" @bind-Value="SelectedExternalList" ToStringFunc="@((e)=>@ToString(e))"/>

private ExternalList _selectedExternalList;

        private List<ExternalList> _externalList = new();

        [Inject] private IGetExternalListsService GetExternalListsService { get; set; }

        private string _kizeoExternalListId;
        [Parameter]
        public string KizeoExternalListId
        {
            get => _kizeoExternalListId;
            set
            {
                if (_kizeoExternalListId == value) return;

                _kizeoExternalListId = value;
                KizeoExternalListIdChanged.InvokeAsync(value);
            }
        }

        [Parameter] public EventCallback<string> KizeoExternalListIdChanged { get; set; }

        private string _kizeoExternalListName;
        [Parameter]
        public string KizeoExternalListName
        {
            get => _kizeoExternalListName;
            set
            {
                if (_kizeoExternalListName == value) return;
                _kizeoExternalListName = value;
                KizeoExternalListNameChanged.InvokeAsync(value);
            }
        }

        [Parameter] public EventCallback<string> KizeoExternalListNameChanged { get; set; }

        private ExternalList SelectedExternalList
        {
            get => _selectedExternalList;
            set
            {
                if (_selectedExternalList == value) return;
                KizeoExternalListId = value.Id;
                KizeoExternalListName = value.Name;
                _selectedExternalList = value;
            }
        }

        public string ToString(ExternalList el)
        {
            if (el == null)
            {
                return null;
            }
            return el.Name;
        }

        protected override async Task OnInitializedAsync()
        {
            _externalList = (await GetExternalListsService.GetAll()).ToList();
        }

        protected override void OnParametersSet()
        {
            var matchingFormLight = _externalList.SingleOrDefault(t => t.Id == _kizeoExternalListId);
            if (matchingFormLight != null)
            {
                SelectedExternalList = matchingFormLight; StateHasChanged();
            };
        }

        private async Task<IEnumerable<ExternalList>> Search2(string value)
        {
            await Task.Delay(5);

            if (string.IsNullOrEmpty(value))
                return _externalList;

            return _externalList.Where(x => x.Name.Contains(value, StringComparison.InvariantCultureIgnoreCase));
        }
    }

[Vixys]

I have the same issue, whenever I try to set the value with a delay it won’t show the selected value. But focusing the input then click outside it will show the correct selected value and then refocus the element.

Here my snippet if it could help: https://try.mudblazor.com/snippet/QkcvayanKcmhgHGT

[henon]

fixed