[Dialog]dialog & overlay 关闭事件

[wukidy]

Component

Dialog

Feature Description

dialog addKeyDownEventOnWrapper 增加属性，增加 keydown 事件在 wrapper 上 overlayt 增加 addKeyDownEventOnWrapper，增加 keydown 事件在 wrapper 上，增加 closeByOutSideClickEvents，配置点击关闭事件，之前写死的 click

以上修改都是在集团 lowcode-engine 里修复问题时发现的修复项，lowcode-engine 也在 document.body 上监听了 keydown 事件，如果 dialog/overlay 也在 document.body 上监听 esc 将无法拦截 esc 事件。

[bindoon]

没看懂，是 Dialog 的esc 影响了低代码引擎吗？

[wukidy]

没看懂，是 Dialog 的esc 影响了低代码引擎吗？

不是。是 dialog 拦截不了 keydown(esc 关闭的功能)，因为 lowcode-engine 先在 body 上监听了 keydown，所以一定先触发。 如果 dialog 的 esc 在 wrapper 上监听，会先冒泡执行，然后拦截掉 lowcode-engine 就不会执行 esc-handle

[lakerswgq]

pr 在这里 #4099, @bindoon 可以一起看下

[bindoon]

@wukidy 你是什么场景呀？是 Dialog 在低代码引擎里面渲染出来了，还是在引擎外面使用影响到了引擎的 keydown 事件呢？

是只期望Dialog弹窗关闭，不期望引擎被响应？

[wukidy]

@wukidy 你是什么场景呀？是 Dialog 在低代码引擎里面渲染出来了，还是在引擎外面使用影响到了引擎的 keydown 事件呢？

是只期望Dialog弹窗关闭，不期望引擎被响应？

@bindoon 是这样的。这个是集团的 lowcode editor demo https://lowcode-engine.cn/demo/index.html

操作一下：1. 选中 button 按钮，2. 点击后面的变量绑定按钮，3. 弹出框后按下 esc 这个时候弹框会关闭但是这个 button 的选中态也会取消。作为编辑器期望的效果应该是弹框关闭但是 button 不要取消选中

为什么取消选中：因为编辑器初始化就在 document.body 上监听处理了 esc，而 dialog 后出来依然是在 body 上监听处理 esc，这样只要按了 esc 肯定是编辑器先处理直接取消选中，这个不是期望行为，期望行为应该是 dialog 关闭，而编辑器不要取消选中。 所以就要想法让 dialog 优先处理 esc 并直接 stop 掉，解法就是 dialog 把 keydown 事件加在 wrapper 上就好。

@lakerswgq test case 已经提了，麻烦看一下

[lakerswgq]

#4145

业务遇到的问题主要在两个方面：

1. Dialog 组件的事件代理注册在 document.body 上，与集团低代码引擎的事件代理冲突，会误触发
2. 由于历史原因，代码中有使用一些第三方 dialog 组件如 rc-dialog，需要尽量兼容

针对问题1，目前推荐 Dialog 使用 capture 监听，可以保证 Dialog 的事件代理一定会触发，业务可以自己去停止事件继续冒泡，避免误触发低代码引擎在 document 上注册的全局监听。 不过由于问题2描述的第三方 dialog 的存在，如果 Fusion Dialog 已经使用 capture 监听，会最先触发，造成多个 Dialog 一起使用时发生关闭顺序错乱的问题。 为了能同时兼容问题 1,2 ，同时保证改造量尽可能小和通用，目前采用方案如下：

Dialog v2 开放两个能力：

1. 支持配置 keydown 事件的代理监听节点，默认为 document.body，支持配置传入一个 dom element；现在 Dailog 同时支持配置弹层挂载节点和事件代理监听节点
2. 支持 keydown 事件取消冒泡，默认为不取消冒泡

业务可以自己配置弹层挂载节点和事件代理节点，配置是否继续向上冒泡，防止与第三方库冲突 ，同时与其他弹层组件兼容