[Bug]: AutoComplete Initial Value not showing in Text Bar

[SethVanderZanden]

Edit:

https://github.com/SethVanderZanden/Blazorise_Autocomplete_issue

Above is a sample application, on the counter page u will see a preselect for a multi select, and a single select. The multi-select works w 0 issues, where as the single select does not work.

Blazorise Version

1.4.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction, or a simple code snippet

<Autocomplete
                        TItem="FarmSelectDto"
                        TValue="FarmSelectDto"
                        Data="@_farmSearchResults"
                        TextField="@((item) => item.FarmName)"
                        ValueField="@((item) => item)"
                        ReadData="OnFilterFarms"
                        Placeholder="Search Farms"
                        Filter="AutocompleteFilter.StartsWith"
                        SearchChanged="@(async (e) => await OnFarmSearchAsync(e))"
                        SelectedValueChanged="@(async (e) => await OnSelectFarmAsync(e))"
                        SelectedText="@(_selectedFarm?.FarmName ?? "Nothing selected?")"
                        ElementId="FarmAutoComplete"
                        SearchClass="form-control-solid"
                        Class="form-control-solid"
                        FreeTyping
                        Context="farmAutoCompleteContext"
                        AutoPreSelect=false>
                        <NotFoundContent Context="farmNotFoundContext"> Sorry... nothing was found for @_farmSearchText! 
                            </NotFoundContent>
                        <ItemContent Context="farmContext">
                            <div class="row">
                                <div class="col-6">
                                    <div class="position-relative ps-6 pe-3 py-2 cursor-pointer">
                                        <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-primary"></div>
                                        <span class="mb-1 text-dark fw-bold">@farmContext.Item.FarmName</span>
                                        @if (!string.IsNullOrWhiteSpace(farmContext.Item.ContactFullName))
                                        {
                                            <br>
                                            <span class="fs-7 text-primary fw-bold">
                                                <i class="ki-outline ki-user me-1 text-primary"></i>@farmContext.Item.ContactFullName
                                            </span>
                                        }
                                        <br>
                                        <span class="fs-7 text-success fw-bold">
                                            <i class="ki-outline ki-geolocation me-1 text-success"></i>@farmContext.Item.FullAddress
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </ItemContent>
                    </Autocomplete>

Using the Above autocomplete does work, however, I am unable to Freetype as the SelectedText overrides my value even when nothing has been selected.

Removing the SelectedText however, fixes the issue of being able to freetype, however, the initial value although populated, does not show the text in the AutoComplete.

Steps to reproduce

Create Autocomplete, one without SelectedText, other with the SelectedText. Prepopulate both from OnInitAsync w Async methods. The one with SelectedText will populate the search bar, the other will not.

Have FreeTyping on both and try typing, you will find the one with SelectedText overrides the searchbar, thus not allowing the User to freetype as required.

In my situation, I need the ability to Select a farm or take a new name of a farm if one does not exist. I also need the ability to load a draft and thus populate the value.

What is expected?

Should be able to free type and define the selected text value for when the value is selected

What is actually happening?

Should be able to free type, pick an option from OnInit, and have a SelectedText if desired.

What browsers are you seeing the problem on?

No response

Any additional comments?

Additional Question:

• Why do I need to define the SelectedText to populate the value OnInitAsync, if I don't populate the OnInitAsync, it has 0 issues when I select from the dropdown.
• I have noticed that my other Autocomplete on the same form w similar logic, the SelectedText for pre-initializing the value doesnt work, so unsure why it works for one but not the other.