关于 MultiSelect 组件在 Table 组件 EditTemplate 中不刷新问题讨论

[ArgoZhang]

@Ocrosoft 再次感谢提交 PR，我把原文引用过来 #4781 #4782

fix(MultiSelect): add StateHasChanged when call SetValue

删除了 MultiSelect 元素更改时对是否 StateHasChanged 调用的判断。

Description

可能为此提交 8a8fa15#diff-07918ce1b66955e76da5cd0ffa38512cce984fa2a09735a60e0db37b45235527L4 引入。
可能有更好的解决方案，若有直接关闭 PR 即可。

最小 DEMO（基于示例工程）

1. 修改 Table 外的 MultiSelect，该 MultiSelect 会重新渲染。
2. 点击 Table 的新建按钮，修改弹窗中的 MultiSelect，弹窗中的 MultiSelect 不会重新渲染。

Index.razor

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Table TItem="TestClass" Items="@_classList" ShowToolbar="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.List">
            <EditTemplate Context="value">
                <MultiSelect Items="_available" @bind-Value="@value.List" />
            </EditTemplate>
        </TableColumn>
    </TableColumns>
</Table>

<div>
    <MultiSelect Items="_available" @bind-Value="@_class.List" />
</div>

@code {
    public class TestClass
    {
        public List<string> List { get; set; } = [];
    }

    public List<TestClass> _classList = [];
    public TestClass _class = new();

    public List<SelectedItem> _available = [new("1", "1"), new("2", "2"), new("3", "3")];
}

[ArgoZhang]

问题原因

1. 代码中使用 Items 作为数据源
2. 列使用 EditTemplate 自定义编辑模板，模板内使用 MultiSelect 组件实现交互操作

Multiple 组件

内部使用双向绑定判断是否调用 StateHasChanged 方法，这是正确的，如果按照 PR 的更改，使用者如代码中一样，已经使用了双向绑定，然后代码又显示调用 StateHasChanged 就导致 MultiSelect 组件渲染二次。所以组件库内部组件目前是最优的

Table 组件

点击新建按钮弹窗更改 MultiSelect 值后目前表象是 Table 列表未刷新，故判断是 MultiSelect 组件 BUG 导致

问题梳理

MultiSelect 组件更改了值时，本身 UI 与数据一致，所以问题不在 MultiSelect 组件本身，表象也是 Table 未刷新，点击表格组件右上角 刷新 按钮即可。所以问题是 Table 导致。

那么为什么 Table 未刷新呢？

MultiSelect 组件更改了 Table 数据源 Items 的 List 属性，从代码上看并没有 List 属性更改时 Table 组件就要自动刷新，所以目前一切都是对的。并没有任何 BUG。如果需要表格刷新需要对数据源 Items 进行双向绑定即可 @bind-Items

解决问题

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div class="mb-3">
    <MultiSelect Items="_available" @bind-Value="@_class.List" />
</div>

<div style="height: 360px;">
    <Table TItem="TestClass" @bind-Items="@_classList" ShowToolbar="true" IsBordered IsStriped IsFixedHeader>
        <TableColumns>
            <TableColumn @bind-Field="@context.List">
                <EditTemplate Context="value">
                    <div class="col-12">
                        <MultiSelect Items="_available" @bind-Value="@value.List" />
                    </div>
                </EditTemplate>
            </TableColumn>
        </TableColumns>
    </Table>
</div>

@code {
    public class TestClass
    {
        public List<string> List { get; set; } = [];
    }

    public IEnumerable<TestClass> _classList = [];
    public TestClass _class = new();

    public List<SelectedItem> _available = [new("1", "1"), new("2", "2"), new("3", "3")];
}

觉得回答正确，请将此回答标记为答案，再次感谢，方便后面遇到此类问题的人

[Ocrosoft]

PR 里说的不是 Table 本身不刷新，但是可能原因差不多
现象是这样：

[Ocrosoft]

新的 Demo，跟 Proxy 这个类有关系。

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Table TItem="TestClass" @bind-Items="@_list" ShowToolbar="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.List1.Items">
            <EditTemplate Context="value">
                <div class="col-12 col-sm-12 col-md-12">
                    <MultiSelect @bind-Items="_available" @bind-Value="@value.List1.Items"/>
                </div>
            </EditTemplate>
        </TableColumn>
        <TableColumn @bind-Field="@context.List2.Items">
            <EditTemplate Context="value">
                <div class="col-12 col-sm-12 col-md-12">
                    <MultiSelect @bind-Items="_available" @bind-Value="@value.List2.Items" />
                </div>
            </EditTemplate>
        </TableColumn>
    </TableColumns>
</Table>

@code {
    public class TestClass
    {
        public Proxy<string> List1 { get; set; } = new();
        public Proxy<string> List2 { get; set; } = new();
    }

    private IEnumerable<TestClass> _list = [];

    public class Proxy<T>
    {
        private List<T> _list = [];

        public IEnumerable<T> Items
        {
            get => _list;
            set
            {
                _list.Clear();
                _list.AddRange(value);
            }
        }
    }

    public List<SelectedItem> _available = [new("1", "1"), new("2", "2"), new("3", "3")];
}

[Ocrosoft]

虽然不知道原因，但是不用 Proxy，改用 ValueChanged 实现可以避免

[Ocrosoft]

我也认为这不是 select 本身的问题，demo 代码是从使用 7.x 版本的老项目中复制的，升级到 9.x 发现有这个现象。