uk-icon duplication

[Isaac-Flath]

If there is any other information that'd be helpful please let me know. I'd also love to collaborate if helpful, though I do not know the best fix to the problem.

Problem

When uk-icon is used in conjunction with hx-push-url this results in duplicated Icons with back navigation. The situation where you'd want to push the URL is when you want to return HTML partials to swap content from the server (such as a sidebar + content layout where you just replace the content), but also have back button capability.

What I am using this for

I'm working on building a wrapper around frankenui to be used with fasthtml, which is a framework for building hypermedia applications built on top of HTMX, Starlette, and Uvicorn. Here are the docs page I am working on for the frankenui wrapper (still early days/unreleased).

Fix/workaround

The workaround I have to prevent icon duplications is to use this

htmx.on("htmx:beforeHistorySave", () => {
  document.querySelectorAll("uk-icon").forEach((elt) => {elt.innerHTML = '';});});

Minimal Repro

• Video: 20 second loom showing the issue in an app
• App: Deployed Minimal Repro app
• Code: Gist with the fasthtml app for the Deployed Minimal repro app + info

[sveltecult]

Hello,

I do not know fasthtml and know just the basics of HTMX. AFAIK, HTMX works like turbolinks where we click/trigger on something, target something and replaced it with a new response. So, I do not know what's causing the duplication.