Blazorise: Select component doesn't recognize changes by code

[martinscholz83]

Describe the bug
For example you have an edit form with a multiple select component. When select items SelectedItems contains the selected values. But when changing SelectedItems by code, the Select component doesn't recognize this change.

<Select  class="form-control" Multiple="true" TValue="int" @bind-SelectedValues="@selectedTags">
..
..
@code {

IReadOnlyList<int> selectedTags;
...
...

private void ShowEditForm()
{
var newTags = new List<int>() { 1, 2 };
selectedTags = newTags.AsReadOnly();
...
}

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Select component should update itself when SelectedItems is changed by code.

[martinscholz83]

Is there a way to get the component with @ref to set SelectedValuesChanged. When setting selectedTags in code before selecting anything on UI, component set the selected items. But after you select something and the OnChangeHandler EventCallback is raised, it doesn't detect the change when changing in code.

[stsrki]

Try calling StateHasChanged() after setting the SelectedValues property. That usually help.

[martinscholz83]

Already tried. But it didn’t help. It seems that the select component holds a different reference of selectedTags. Because when reopen the select it has selected the old value. To better understand I have a modal to edit settings. Before reopen the modal I load settings from database. But when reopen the modal the select component has selected the item(s) you selected before.

[martinscholz83]

I think the problem is because you always get the selected items from DOM with javascript.
https://github.com/stsrki/Blazorise/blob/master/Source/Blazorise/Select.razor.cs#L80
So you will never notice any update made by code.

[stsrki]

I didn't check it yet, but I will put it on the list for 0.9.2 release and try to fix it for one of the next previews.

[martinscholz83]

It seems that the error is somewhere else when the select component is re-rendered. CurrentValue always returns the correct count when setting SelectedValues. One other thing i saw is that ContainsValue is called many times (5 or 6 times) when the component is rendered.

[stsrki]

I'm using this code to test the select

<Select Multiple="true" TValue="int" @bind-SelectedValues="@selectedTags" MaxVisibleItems="10">
    @foreach ( var item in tags ?? Enumerable.Empty<int>() )
    {
        var value = item;

        <SelectItem @key="@value" TValue="int" Value="@value">@value</SelectItem>
    }
</Select>

<p>
    Selected:

    @foreach ( var item in selectedTags ?? Enumerable.Empty<int>() )
    {
        <span>@item</span>
    }
</p>

<Button Color="Color.Primary" Clicked="@ShowEditForm">TEST</Button>

@code {
    IReadOnlyList<int> tags = new int[] { 1, 2, 3, 4, 5, 6, 7, 8 };

    IReadOnlyList<int> selectedTags = new int[] { 1, 2, 3 };

    private Task ShowEditForm()
    {
        selectedTags = new int[] { 2, 4, 6 }.ToList().AsReadOnly();

        return Task.CompletedTask;
    }
}

The select works great, It will get and set the values as expected. BUT the weird bug happen as soon as I CLICK on any options. Everything breaks. Select component will not refresh after I click on the TEST button, and when I inspect elements in devtools everything seems fine. And SelectedValues are fine. Only thing not working is the refresh. 🤯

I need to clear head before I continue with this one :)

[martinscholz83]

Got also some headache 😉

[stsrki]

More I'm thinking this is not going to be fixed that soon:

• https://github.com/dotnet/aspnetcore/issues/5519
• https://github.com/dotnet/aspnetcore/issues/16942
• https://stackoverflow.com/questions/58777642/blazor-fire-onchange-event-when-chosen-drop-down-value-changes

[stsrki]

Going to pause this ticket. I've being searching for a solution entire day, and whatever I try nothing works. So for now I'm going to proceed with other tickets and in the meantime I will try to research some more options. Maybe all I need is a different perspective. I hope this OK with you @martinscholz83

[martinscholz83]

Fine for me. As a workaround we show in a textfield what tags are currently saved in database. Thx for investigating on this issue!

[martinscholz83]

Oh, one more question I have if it’s ok. I also use tab elements. And on every tab change the whole page is reloading. Is that wanted? Is it the concept of blazor to reload the complete razor page when something is triggered an onchange event?