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"
                        Value=@SelectedProfile.Name
                        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; }
    }
}

[w26ak]

Looks like all MatSelectItem, MatSelectValue and MatSelect have the same issue. The main problem is that the value of selected item text is updated using JavaScript and not using C#. As a result one of the ways to fix it is to manually call JavaScript. Not ideal but solves the problem.

Below are two possible solutions I came up with (version 2.10.0):

1. Extension method for manual update of selected text:

public static class MatSelectItemExtensions
{
    public static void UpdateSelectedText<T>(this MatSelectItem<T> select)
    {
        Type selectType = typeof(MatSelectItem<T>);
        Type itemType = typeof(T);

        // Get currently selected item
        PropertyInfo currentValueProperty = selectType.GetProperty("CurrentValue", BindingFlags.NonPublic | BindingFlags.Instance);
        T currentValue = (T)currentValueProperty.GetValue(select);

        // Call OnValueChanged which accepts old value and new value. Old value does not seem to be used so we can just provide null
        MethodInfo onValueChangedMethod = selectType.GetMethod("OnValueChanged", BindingFlags.NonPublic | BindingFlags.Instance, new Type[] { itemType, itemType });
        onValueChangedMethod.Invoke(select, new object[] { null, currentValue });
    }
}

2. Custom class derived from MatSelectItem with extra method for manual update of selected text:

public class MatSelectItemFixed<T> : MatSelectItem<T>
{
    internal MatBlazorSwitchT<int> switchTK = MatBlazorSwitchT<int>.Get();

    public void UpdateSelectedText()
    {
        CallAfterRender(async () =>
        {
            await JsInvokeAsync<object>("matBlazor.matSelect.setValue", Ref, switchTK.FormatValueAsString(GetKeyFromValue(CurrentValue), null));
        });
    }
}

For version 2.8.0 the solution is more or less the same:

public static class MatSelectItemExtensions
{
    public static void UpdateSelectedText<T>(this MatSelectItem<T> select)
    {
        // Call OnValueChanged which accepts bool value that indicates whether value is changed
        Type selectType = typeof(MatSelectItem<T>);
        MethodInfo onValueChangedMethod = selectType.GetMethod("OnValueChanged", BindingFlags.NonPublic | BindingFlags.Instance);
        onValueChangedMethod.Invoke(select, new object[] { true });
    }
}