jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: inline editor click-outside handler in shadow DOM 

The click-outside handler used event.target at the document level,
which in shadow DOM is retargeted to the host element. Clicking any
input inside the inline config panel (foreignObject) would immediately
dismiss it. Use composedPath() to correctly detect clicks inside the
shadow DOM boundary.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-05 12:44:19 -08:00
parent aff16e647a
commit ce3a3ae0c0
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
modules/rflows/components/folk-flows-app.ts
View File

@ -2727,10 +2727,15 @@ class FolkFlowsApp extends HTMLElement {
this.openTransakWidget(flowId, sd.walletAddress);
});
// Click-outside handler
// Click-outside handler — use composedPath() to see through shadow DOM
const clickOutsideHandler = (e: PointerEvent) => {
const target = e.target as Element;
if (!target.closest(`[data-node-id="${node.id}"]`)) {
const path = e.composedPath();
const hitNode = path.some((el) => {
const elem = el as HTMLElement;
return elem.dataset?.nodeId === node.id ||
elem.classList?.contains?.("inline-config-panel");
});
if (!hitNode) {
this.exitInlineEdit();
document.removeEventListener("pointerdown", clickOutsideHandler as EventListener, true);
}