fix: 修复阻止冒泡导致的 popover 自动隐藏不生效问题 (opensumi#529)

henry-fun · Mar 2, 2022 · 33b00a9 · 33b00a9
1 parent 39f0955
commit 33b00a9
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/packages/core-browser/src/toolbar/components/button.tsx b/packages/core-browser/src/toolbar/components/button.tsx
@@ -391,22 +391,28 @@ class ToolbarBtnDelegate implements IToolbarActionBtnDelegate {
           }
           const disposer = new Disposable();
           disposer.addDispose(
-            new DomListener(window, 'click', (e: MouseEvent) => {
-              if (e.target && ele.contains(e.target as Node)) {
-                return;
-              }
-              const rect = ele.getBoundingClientRect();
-              if (
-                rect.x <= e.clientX &&
-                rect.x + rect.width >= e.clientX &&
-                rect.y <= e.clientY &&
-                rect.y + rect.height >= e.clientY
-              ) {
-                // 点击在区域内，这里防止点击 target 已经被移除导致误判
-                return;
-              }
-              this.hidePopOver();
-            }),
+            new DomListener(
+              window,
+              'click',
+              (e: MouseEvent) => {
+                if (e.target && ele.contains(e.target as Node)) {
+                  return;
+                }
+                const rect = ele.getBoundingClientRect();
+                if (
+                  rect.x <= e.clientX &&
+                  rect.x + rect.width >= e.clientX &&
+                  rect.y <= e.clientY &&
+                  rect.y + rect.height >= e.clientY
+                ) {
+                  // 点击在区域内，这里防止点击 target 已经被移除导致误判
+                  return;
+                }
+                this.hidePopOver();
+              },
+              // 在捕获阶段处理，避免其他元素阻止冒泡导致不自动隐藏不生效
+              true,
+            ),
           );
           this._popOverClickOutsideDisposer = disposer;
         });