From ce3a3ae0c0983f9d391a83f35de0fb5add85941e Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Thu, 5 Mar 2026 12:44:19 -0800 Subject: [PATCH] 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 --- modules/rflows/components/folk-flows-app.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/modules/rflows/components/folk-flows-app.ts b/modules/rflows/components/folk-flows-app.ts index b049995..f48f61f 100644 --- a/modules/rflows/components/folk-flows-app.ts +++ b/modules/rflows/components/folk-flows-app.ts @@ -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); }