hx-swap="morph:outerHTML being treated as innerHTML

[Hades32]

Hey @1cg,
when I use a hidden inner element to auto-refresh a component, I get infinitely nested elements. It seems like either the target is ignored or the modifier. Any thoughts?

<button
	id="mod-button"
	hx-get=/mod-queue'
	hx-trigger="click"
	hx-target="#root-container"
>
	{/* auto-refresh */}
	<span className="hidden" 
		hx-get="/components/my-button" 
		hx-target="closest button" 
		hx-swap="morph:outerHTML" 
		hx-trigger="every 5s"></span>

When I change it to hx-swap="outerHTML" it works as expected

[mossblaser]

Can confirm I've encountered this issue too!

[1cg]

what content is being returned by /components/my-button?

[mossblaser]

Ah-ha! I suspect I've found the issue here -- and its a simple documentation issue. To use idiomorph with htmx you need to use the version of the library which also includes a htmx extension binding not found in the default JS file on unpkg listed in the README. Instead you need to use: https://unpkg.com/idiomorph/dist/idiomorph-ext.min.js. It would be great to include this detail somewhere in the README since I'm sure plenty of folks will be coming to this repo looking to use this with htmx.

Aside: Unfortunately, htmx does not emit a warning when you hx-ext an undefined extension nor when you use a hx-swap. Instead htmx falls back on using the default swap mode (innerHTML) resulting in the apparently broken behaviour seen in this issue above. Perhaps this unlucky pair of 'sharp edges' are worth of fixing in htmx?

[Skinner927]

Just to add to @mossblaser 's great answer, you'll want to set hx-ext="morph".