Blazor with Blazorise: Select component / SelectItem with delete-button?

Question

For my application I need a Select-Component, where I collect some values the user choosed from different sources. But the user should be able to delete values again in the same easy way like adding. The best way would be a SelectItem with a little Button or clickable Badge to delete the value from the list. But whatever I try, nothing works, the Button/Badge is visible, but a click on it is ignored:

<Select TValue="int" Multiple SelectedValues="_selectedWordsForChart" SelectedValuesChanged="@OnSelectedWordsForChartChanged">
    @foreach (var word in _selectedCaseWords)
    {
        <SelectItem Value="@word.WordId"> @word.Word <Button Clicked="@OnButtonClicked">Click me</Button></SelectItem>
    }
</Select>

Is it even possible to achieve, what I want, with the Select Component? If yes, how? Can I change the priority of a clicking event, depending if I click on this Button or at the other area of the SelectItem? And if not, what component should I use to get things working? I think, a Delete-Button outside the Select would lead to misunderstandings, what entries should be deleted.

I assume with a datagrid I can match my requirements, but that seems a little ... oversized to me.

Answer 1

Blazorise Select component generates simple <select> and <option> html tags. <option> tag cannot contain any other tags. So it's not possible to add buttons or badges inside the SelectItem. You have to use a different Blazorise component maybe ListView to achieve your goal.