Morphing/swapping auto-focuses web components, breaking their interaction

[devhassan941-png]

I've encountered a bug where HTMX's swap mechanism (specifically outerMorph, though I suspect this affects other swap strategies too) appears to be auto-focusing web components during the DOM swap process. This unexpected focus event disrupts the internal focus state management of web components, particularly those that implement focus-dependent UX patterns like "select all on second focus."

So I'm testing our thymeleaf + web awesome + htmx application after migrating from htmx 2 to 4, so in timesheets page I have a form with multiple wa-combobox elements. The form uses HTMX's morphing feature to auto-save changes, so whenever a user modifies an input, it triggers an HTMX swap that refreshes the page content while preserving the state.

Here's the relevant HTML structure:

  <wa-combobox name="projectId" value="">
      <wa-option value="">No project</wa-option>
      <wa-option value="1">Project A</wa-option>
      <wa-option value="2">Project B</wa-option>
  </wa-combobox>

When the page first loads, everything works perfectly. The wa-combobox dropdown arrow button responds correctly, clicking it opens the dropdown menu as expected. However, as soon as an HTMX swap occurs, something breaks. After the swap completes, clicking the wa-combobox dropdown arrow button no longer opens the dropdown. Instead, clicking the arrow just selects all the text in the input field, which is completely unexpected behavior.

I debugged extensively and from my investigation, it appears that HTMX's swap mechanism is somehow auto-focusing elements during the DOM swap process. This isn't documented behavior as far as I can tell, and it causes issues for web components that maintain focus-dependent internal state. The wa-combobox component is designed with this focus-counting behavior: first focus positions the cursor, second focus selects all text. But because HTMX introduces an unexpected focus event during swap, the component's internal focus counter gets thrown off, and subsequent user interactions trigger the wrong behavior.

Summary (Expected vs Actual Behavior):

Expected: After an HTMX swap, the wa-combobox should behave identically to how it behaves on fresh page load. Clicking the dropdown arrow should open the dropdown menu.

Actual: After an HTMX swap, the wa-combobox's internal focus state is corrupted by an unwanted focus event. Clicking the dropdown arrow selects all text instead of opening the dropdown.