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.

[sveltecult]

Hello @Isaac-Flath

This is indeed a bug and I may have found a fix. I have attached the HTML files together with the "patched" icon script. You can use that instead for now just to see if it fixes the problem for fasthtml. If it worked, then we may have found a fix and will be included in the next version.

I also attached a short video that reproduces the problem and it fixes mine.

2024-11-02.09-31-10.mp4

fasthtml.zip

[Isaac-Flath]

Thank you @sveltecult , this is fantastic! I've tested it in some of my apps as well and it seems to resolve the issue.

I will use this script until the next release :)

[sveltecult]

Hello @Isaac-Flath,

Great that it worked. I see you're currently working on the fasthtml wrapper. Just a heads up, though - I'll be away for the next two weeks or so. By then, I assume you'll have made a lot of progress. To ensure we're on the same page, I'm working on the next version, which drops several components (since they can be done with Tailwind alone, and some are done better that way). To save you some time, I don't want you to spend time on something that might get dropped by the time I return.

So, here's the list of components that will surely make it to the next version. I've made a lot of changes and improvements, and I don't have a changelog yet, so I thought I'd just share the code with you. This should give you an idea of what's coming and help you avoid wasting time.

export { default as accordion } from './accordion.js';
export { default as alert } from './alert.js';
export { default as animation } from './animation.js';
export { default as badge } from './badge.js';
export { default as breadcrumb } from './breadcrumb.js';
export { default as button } from './button.js';
export { default as card } from './card.js';
export { default as comment } from './comment.js';
export { default as container } from './container.js';
export { default as cover } from './cover.js';
export { default as divider } from './divider.js';
export { default as dotnav } from './dotnav.js';
export { default as drop } from './drop.js';
export { default as dropbar } from './dropbar.js';
export { default as dropdown } from './dropdown.js';
export { default as dropnav } from './dropnav.js';
export { default as formRange } from './form-range.js';
export { default as form } from './form.js';
export { default as heading } from './heading.js';
export { default as icon } from './icon.js';
export { default as label } from './label.js';
export { default as leader } from './leader.js';
export { default as lightbox } from './lightbox.js';
export { default as link } from './link.js';
export { default as media } from './media.js';
export { default as modal } from './modal.js';
export { default as nav } from './nav.js';
export { default as notification } from './notification.js';
export { default as offcanvas } from './offcanvas.js';
export { default as pagination } from './pagination.js';
export { default as placeholder } from './placeholder.js';
export { default as position } from './position.js';
export { default as progress } from './progress.js';
export { default as slidenav } from './slidenav.js';
export { default as slider } from './slider.js';
export { default as slideshow } from './slideshow.js';
export { default as sortable } from './sortable.js';
export { default as spinner } from './spinner.js';
export { default as stepper } from './stepper.js';
export { default as sticky } from './sticky.js';
export { default as subnav } from './subnav.js';
export { default as svg } from './svg.js';
export { default as switcher } from './switcher.js';
export { default as tab } from './tab.js';
export { default as table } from './table.js';
export { default as thubmnav } from './thumbnav.js';
export { default as tooltip } from './tooltip.js';
export { default as transition } from './transition.js';

[Isaac-Flath]

This is very helpful @sveltecult , thank you! I'll make sure to focus my efforts on things on this list :)