Binding the value of a Data Grid row to an Autocomplete

[maxgurka]

I'm having trouble correctly binding the value of an autocomplete field inside of a Data Grid to a value in that row.

So I have a custom reusable Autocomplete component containing this:

<FluentAutocomplete TOption="AutocompleteOption"
				AutoComplete="off"
				Width="250px"
				OnOptionsSearch="@(async e => await OnOptionsSearch.Invoke(e))"
				MaximumSelectedOptions="1"
				OptionText="@(item => item.Label.ToString())"
				@bind-SelectedOptions="@SelectedItems">
</FluentAutocomplete>

Where the AutocompleteOption is a class simply containing an id and a label. The CustomAutocomplete has this code-behind:

public partial class CustomAutocomplete : ComponentBase
{
    private List<AutocompleteOption> _selectedItems = new List<AutocompleteOption>();

    [Parameter]
    public IEnumerable<AutocompleteOption> SelectedItems
    {
	    get => _selectedItems;
	    set
	    {
		    if (!Equals(_selectedItems, value))
		    {
			    _selectedItems = value?.ToList() ?? new List<AutocompleteOption>();
			    SelectedItemsChanged.InvokeAsync(_selectedItems);
			    SelectedItemChanged.InvokeAsync(_selectedItems.FirstOrDefault());
		    }
	    }
    }

    [Parameter]
    public AutocompleteOption SelectedItem
    {
	    get => _selectedItems.FirstOrDefault();
	    set
	    {
		    if (_selectedItems.FirstOrDefault() != value)
		    {
			    if (value != null)
			    {
				    if (_selectedItems.Count == 0)
				    {
					    _selectedItems.Add(value);
				     }
				    else
				    {
				    	    _selectedItems[0] = value;
				    }

				    SelectedItemChanged.InvokeAsync(value);
			    }
			    else
			    {
				    _selectedItems.Clear();
				    SelectedItemChanged.InvokeAsync(null);
			    }
			    SelectedItemsChanged.InvokeAsync(_selectedItems);
		    }
	    }
    }

    [Parameter] public EventCallback<AutocompleteOption> SelectedItemChanged { get; set; }
    [Parameter] public EventCallback<IEnumerable<AutocompleteOption>> SelectedItemsChanged { get; set; }
    [Parameter] public Func<OptionsSearchEventArgs<AutocompleteOption>, Task> OnOptionsSearch { get; set; }
}

The idea here is that the autocomplete should be limited to one item, but FluentAutocomplete seemingly needs a list of items. Which is why I added that internal mapping to the first item of the list, and exposed only a single AutocompleOption to the parent component.

I have a Data Grid containing a list of ingredients for a recipe, I'll show the Unit column since it's the simplest. The unit of the item for a row It is bound to the AutocompleOption of the autocomplete.

<FluentDataGrid id="defaultGrid" Items=Model.RecipeIngredients.AsQueryable() GridTemplateColumns="1fr 1fr" 
TGridItem=RecipeIngredientViewModel>
	<TemplateColumn Context="unitCol" Title="Enhet">
		<CustomAutocomplete OnOptionsSearch=@OnUnitSearchAsync
							@bind-SelectedItem="unitCol.Unit.SelectedOption" />
	</TemplateColumn>
	@* Columns for ingredients etc... *@
</FluentDataGrid>

And the unit class can itself map the incoming autocomplete values like this:

private AutocompleteOption _selectedOption;

public AutocompleteOption SelectedOption
{
    get => _selectedOption ??= new AutocompleteOption(Id.ToString(), Name);
    set
    {
        if (value != null)
        {
            Id = int.Parse(value.Id);
            Name = value.Label;
            _selectedOption = value;
        }
    }
}

The goal here is simply that the autocomplete should display the name (and save the id) of the unit for each row, including any preexisting values in the model, and when I select another value the unit in the model should be updated to reflect that change.

And the binding seems to work since the model values are loaded into the autocomplete when I load the page. But I cannot remove or change the text in the autocomplete. It's behaving like a read-only field. Is this because the model values are bound to the text field and keep overriding it?

It's my first time with both Blazor and Fluent UI so feel free to suggest any other improvements I can make.

[vnbaaij]

The idea here is that the autocomplete should be limited to one item, but FluentAutocomplete seemingly needs a list of items. Which is why I added that internal mapping to the first item of the list, and exposed only a single AutocompleOption to the parent component.

Yes, the whole idea of an AutoComplete is to have a list of items. The MaximumSelectedOptions is just to limit the number of choiches made (to 1 in your case).

If you do not want the user to edit the value, you should probably just use a Badge or something like that. I did not go in to deep, but don't completely understand why you'd want to use an autocomplete,

[maxgurka]

I do want the user to edit the value. Autocomplete seems like the perfect choice here because it lets the user search and select a value, and I'm limiting it to 1 because it doesn't make sense to have more in my case.

I have Model.RecipeIngredients that is a list of ingredients, where an ingredient has a unit (kg, gram, etc.). I want to bind that unit to the autocomplete. If i load the page and there are existing ingredients (and units) I want the autocomplete to show them. And when the user changes the unit in the autocomplete I want the value in the model to update. I figured i would bind them together so the AC always shows the units in the model and at the same time the user can change those units and the model updates.

The problem is that when I did the binding I showed in my original question, the autocomplete stops working completely. It behaves like it's readonly and won't let the user change the value. Did i do the binding wrong?