MudMenu配置ChildContent后打开MudTimePicker时菜单自动关闭

问题复现代码 #

原有实现运行后，点击TimePicker图标触发时间选择时MudMenu会直接关闭，时间选择面板无法正常显示，代码如下：

<MudMenu>
   <ActivatorContent>
       <MudIcon Size="Size.Small"
         Icon="@Icons.Material.Filled.FilterList">
       </MudIcon>
   </ActivatorContent>
   <ChildContent>
    <MudTimePicker
                    Margin="Margin.Dense"
                    @bind-Time="ValueFrom"
                    Label="Time"
                    Editable="true"
                    For="() => ValueFrom"
                    Variant="Variant.Outlined"
                    />
   </ChildContent>
</MudMenu>

问题原因 #

MudMenu默认开启CloseOnClick配置，会监听所有子元素的点击冒泡事件，只要检测到菜单内部的点击就会自动关闭。点击MudTimePicker图标触发选择面板的动作会产生点击事件，事件冒泡到MudMenu后直接触发关闭逻辑，时间选择面板还没弹出就跟着菜单一起被销毁了。

修复方案 #

• 给MudMenu显式添加CloseOnClick="false"参数，关闭点击菜单内部自动关闭的默认逻辑。这个修改不会影响点击菜单外部自动关闭的默认行为，CloseOnOutsideClick默认值为true，无需额外调整。
• 如果需要用户选完时间后自动关闭菜单，就给MudMenu加@ref组件引用，在MudTimePicker的TimeChanged事件回调里手动调用菜单的关闭方法即可。

修复后的完整参考代码：

<MudMenu @ref="_filterMenu" CloseOnClick="false">
   <ActivatorContent>
       <MudIcon Size="Size.Small"
         Icon="@Icons.Material.Filled.FilterList">
       </MudIcon>
   </ActivatorContent>
   <ChildContent>
    <MudTimePicker
                    Margin="Margin.Dense"
                    Time="ValueFrom"
                    TimeChanged="OnTimeSelected"
                    Label="Time"
                    Editable="true"
                    For="() => ValueFrom"
                    Variant="Variant.Outlined"
                    />
   </ChildContent>
</MudMenu>

@code {
    private MudMenu _filterMenu;
    private TimeSpan? ValueFrom;

    private async Task OnTimeSelected(TimeSpan? selectedTime)
    {
        ValueFrom = selectedTime;
        // 不需要选完自动关菜单可以删掉以下逻辑
        if (_filterMenu is not null)
        {
            await _filterMenu.CloseMenuAsync();
        }
    }
}

内容的提问来源于stack exchange，提问作者Ben5