MatSelectItem does not update selected value

[w26ak]

Reopening #860 since the suggested solution does not seem to work.

The version of MatBlazor: 2.8.0 (2.10.0 has the same bug as well). Link to Blazorfiddle: https://blazorfiddle.com/s/bdawws66 Below is the code of plain index page:

@page "/"

@if (SelectedProfile != null)
{
    <div>
        <MatSelectItem Items=@Profiles
                        Outlined=true
                        TValue="Profile"
                        @bind-Value=@SelectedProfile>
            <ItemTemplate Context="profile">
                @profile.Id - @profile.Name
            </ItemTemplate>
        </MatSelectItem>
    </div>

    <div class="mt-2">
        <MatTextField Outlined=true
                        TValue="string"
                        [email protected]
                        ValueChanged=@OnNameChanged />
    </div>
}

@code {
    protected List<Profile> Profiles { get; set; }
    protected Profile SelectedProfile { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Profiles = new List<Profile>
        {
            new Profile { Id = 0, Name = "Profile 1" },
            new Profile { Id = 0, Name = "Profile 2" },
            new Profile { Id = 1, Name = "Profile 3" },
            new Profile { Id = 2, Name = "Profile 4" }
        };

        SelectedProfile = Profiles[0];
    }

    protected void OnNameChanged(string name)
    {
        SelectedProfile.Name = name;
    }

    public class Profile
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

[jacobpihl]

Hi!

If you can get the "if small screen" condition into a variable you can do

@if (!screenIsSmall)
{
    <Column>
        ....
    </Column>
}

Then the column won't be shown on smaller screens. Maybe ResizeObserver can be of help as well https://tabblazor.com/docs/helpers/resize-observer.