MUI Drawer嵌入Syncfusion Query Builder时多选下拉复选框闪烁问题求助

问题背景 #

在MUI Drawer组件中嵌入Syncfusion Query Builder时，使用IN/NOT IN运算符的多选复选框下拉框出现闪烁现象，将Query Builder移出Drawer则恢复正常。推测是两种弹窗组件的层级、焦点或事件传递冲突导致。

解决思路 #

针对冲突根源，从两方面调整：

1. 解除MUI Drawer的强制聚焦限制，避免拦截下拉框的交互事件
2. 将Syncfusion MultiSelect的下拉面板挂载到Drawer内部，确保层级与事件上下文一致

修改代码 #

父组件（Drawer）调整 #

<Box key="right">
    <Drawer 
        anchor="right" 
        open={props.open}
        ModalProps={{
            disableEnforceFocus: true, // 关闭Drawer的强制聚焦，避免干扰下拉框
            disableAutoFocus: true // 关闭自动聚焦到Drawer，防止焦点重置引发闪烁
        }}
    >
        <div className="query-builder-wrapper">
            <QueryBuilderComplexDataBinding />
        </div>
    </Drawer>
</Box>

子组件（QueryBuilder）调整 #

重点修改PaymentMode列的MultiSelect配置，添加appendTo属性指定挂载容器：

// ... 其他代码保持不变
if (inOperators.indexOf(args.operator) > -1) {
    multiSelectObj = new MultiSelect({
        change: (e) => {
            if (qryBldrObj) {
                qryBldrObj.notifyChange(e.value, e.element);
            }
        },
        dataSource: ds,
        mode: "CheckBox",
        placeholder: "Select Transaction",
        value: args.values,
        selectAllText: "Select All",
        unSelectAllText: "unSelect All",
        showSelectAll: true,
        // 将下拉面板挂载到Drawer的容器内，避免层级冲突
        appendTo: args.elements.closest('.MuiDrawer-paper')
    });
    multiSelectObj.appendTo("#" + args.elements.id);
}
// ... 其他代码保持不变

原理说明 #

• MUI Drawer配置调整：默认模态Drawer会强制聚焦自身，点击下拉框时会触发焦点重置，导致下拉框反复显示/隐藏（闪烁）。关闭disableEnforceFocus和disableAutoFocus后，Drawer不再拦截外部（下拉框）的焦点事件。
• Syncfusion MultiSelect挂载调整：默认下拉面板会挂载到document.body，与Drawer的层级分离，容易被Drawer的事件或样式影响。指定挂载到Drawer的.MuiDrawer-paper容器后，下拉面板与Drawer处于同一上下文，避免层级冲突。

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