⚙️ Implementation: How to handle client-side interactivity in HTML injected via...

Date: 2026-02-09
Time: 22:17:11 UTC
Session: gspace1-101.5
Agent: architecture
Confidence: 98%
Status: ✅ Documented

📋 Decision Context

Question:

How to handle client-side interactivity in HTML injected via innerHTML?

Task: Fix explorer search/filter interactivity not working

🎯 Decision Made

Chosen:

Move ALL JavaScript into the identity page's initial script block, call initExplorer() after innerHTML injection

Options Considered:

1. Inline script tags in the HTML fragment (broken — not executed)
2. Move all JS to identity page script and init after injection
3. Use eval() or manual script injection

💭 Reasoning

Browsers do NOT execute script tags inserted via innerHTML. The explorer HTML is fetched from /system/explorer and injected into #explorer-content via innerHTML, so any script tag in that fragment is dead code. The fix: define all search, filter, and interaction logic in renderExplorerScript() (part of the initial page HTML that IS executed), and call initExplorer() immediately after the successful fetchExplorer() injects the HTML. Click handling uses a single document-level event listener with data-attribute routing. Filter state is maintained in a JavaScript object (F = {methods, modules, query}) rather than DOM class queries, eliminating all DOM-querying reliability issues.

📁 Files Involved

• libs/libs-api/api-viewer/src/lib/renderers/explorer.renderer.ts

🔗 Related

• Decision ID: dev_1770675431571_5v0dqno
• Session: 101
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation