htmx-auto-refresh-preservation

What problem does it solve?

Auto-refreshing HTMX regions commonly reset focus, close selects, collapse details/accordions, and jump scroll positions on every update. This Skill provides a prescriptive setup using Idiomorph morph swaps and event hooks so polling or SSE updates do not disrupt in-progress user interactions.

Core Features & Use Cases

• State-Safe Morph Swaps: Enforces morph:innerHTML/outerHTML with hx-ext="morph" and Idiomorph defaults (ignoreActive, ignoreActiveValue) to preserve focus and input values.
• UI State Preservation: Prevents <details> from collapsing via beforeAttributeUpdated and restores scroll positions with htmx:beforeSwap/afterSwap handlers.
• Robust Interaction Patterns: Offers selective morph exclusion and conditional polling to avoid jarring updates while users type, select, or drag.
• Use Case: A dashboard panel that polls every 2s for updated job statuses while a user edits a form and reads logs in a scrollable container; inputs stay focused, selects remain open, details stay expanded, and scroll positions are preserved.

Quick Start

Enable hx-ext="morph", include idiomorph-ext.min.js, set Idiomorph defaults for ignoreActive and ignoreActiveValue, use morph:innerHTML on polling regions, and add callbacks to preserve details and scroll positions.