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:

• Support binding to <select multiple>, getting/setting the selection as an array dotnet/aspnetcore#5519
• Blazor fire onchange event when Chosen drop down value changes dotnet/aspnetcore#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?

[martinscholz83]

@stsrki, seems that this is already fixed. Can you confirm?

[stsrki]

Nop, still not working for me.

[martinscholz83]

For me when changing selectedTags with code, the Select shows the correct values.

[stsrki]

I tried the example #1100 (comment)

• select something with the mouse
• Now click on the Test button
• Again, select something with the mouse
• click on Test

you will see it doesn't update

[martinscholz83]

Bildschirmaufnahme.2021-03-01.um.15.22.58.mov

[stsrki]

Now I'm really confused...

What version do you use? 0.9.2 or 0.9.3 RC?

[martinscholz83]

[stsrki]

And browser?

[martinscholz83]

Safari Version 14.0.3 (16610.4.3.1.4)

[stsrki]

The only one I can't test with :)

So far I tried Chrome, Firefox and Edge. Same problem.

[martinscholz83]

Oh, I see. In Edge or Chrome it doesn't work

[martinscholz83]

I switched while testing from Chrome to Safari

[martinscholz83]

But what is then the main issue. The underlying javascript engine?

[stsrki]

But what is then the main issue. The underlying javascript engine?

That is the only reason that comes to my mind.

[stsrki]

Safari does not always go with the standards so in this case, it works, unlike with other browsers that are probably following some (to me) unknown rule.

[martinscholz83]

Ok. But for me the question is, who will fix this? Not specially for your Select component. More the core issue.

[stsrki]

I was trying something new this afternoon and I had some good results. It's a little ugly still but I think I will be able to make it work 🤞