AntDesign从0.12.7升级到0.14.2后Drawer内交互组件失效求助

问题定位 #

你遇到的是Ant Design Blazor 0.14.x版本的典型兼容性问题：Drawer内部的弹出类组件（Select、DatePicker）默认会把下拉面板挂载到<body>标签下，而Drawer的遮罩层或事件拦截逻辑会导致这些下拉面板的点击事件无法被正常捕获，所以出现能显示但无法交互的情况；Input属于原生输入组件，不受挂载逻辑影响，因此功能正常。

解决方案 #

方案1：指定弹窗容器为Drawer本身

让Select和DatePicker的下拉弹窗挂载到Drawer内部，确保事件能正常传递。

修改步骤：

1. 在组件代码里定义Drawer引用：

private Drawer? drawerRef;

2. 给Drawer标签添加@ref绑定：

<Drawer @ref="drawerRef" Closable="true" Width="720" Visible="@drawerVisible" Title=@Pagetitle OnClose="_=>Close(Data)">

3. 给所有Select和DatePicker添加PopupContainer属性，指定挂载到Drawer：

• Select示例：

<Select PopupContainer="@(() => drawerRef?.Element)" Placeholder="Select Engineer" PopupContainerMaxHeight="500px" @bind-Value=Data.UploadedBy ValueName="@nameof(DataUser.UserId)" LabelName="@nameof(DataUser.UserName)" DefaultActiveFirstOption Loading=!Users.Any() DataSource=@Users.Where(u => u.Is_Active == true).OrderBy(u => u.UserName) />

• DatePicker示例：

<DatePicker PopupContainer="@(() => drawerRef?.Element)" TValue="DateTime?" Picker="@DatePickerType.Date" @bind-Value=Data.ExpiryUtc />

方案2：修复Visible的绑定方式

0.14.x版本对双向绑定要求更严格，建议把Visible="@drawerVisible"改为双向绑定，确保Drawer状态更新正确：

<Drawer @ref="drawerRef" Closable="true" Width="720" @bind-Visible="@drawerVisible" Title=@Pagetitle OnClose="_=>Close(Data)">

方案3：升级到更高版本的Ant Design Blazor

0.14.2属于较早版本，后续的0.14.x小版本或更高稳定版已经修复了该Drawer弹窗交互问题，直接升级依赖包到最新稳定版（比如0.16.x及以上），大概率能直接解决问题。

修改后的关键代码片段 #

@code {
    private Drawer? drawerRef;
    private bool drawerVisible;
    // 其他变量和方法保持不变
}

<Drawer @ref="drawerRef" Closable="true" Width="720" @bind-Visible="@drawerVisible" Title=@Pagetitle OnClose="_=>Close(Data)">
    <!-- 原有Row/Col结构保持不变 -->
    <AntDesign.Col Span="12">
        <Text><b>Engineer</b></Text>
        <Select PopupContainer="@(() => drawerRef?.Element)" Placeholder="Select Engineer" PopupContainerMaxHeight="500px" @bind-Value=Data.UploadedBy ValueName="@nameof(DataUser.UserId)" LabelName="@nameof(DataUser.UserName)" DefaultActiveFirstOption Loading=!Users.Any() DataSource=@Users.Where(u => u.Is_Active == true).OrderBy(u => u.UserName) />
    </AntDesign.Col>
    <!-- 其他组件代码 -->
    <div class="site-calendar-demo-card">
        <DatePicker PopupContainer="@(() => drawerRef?.Element)" TValue="DateTime?" Picker="@DatePickerType.Date" @bind-Value=Data.ExpiryUtc />
    </div>
    <!-- 剩余代码保持不变 -->
</Drawer>

内容的提问来源于stack exchange，提问作者G-Man83