bigskysoftware / bigskysoftware/htmx

[htmx 4] Incorrect innerHTML swap on radio input

Open
#4,055 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

While migrating from htmx 2 to 4, one of my page broke in a very interesting way.
I have a little search form that looks like this (I simplified it by removing labels and unnecessary divs, it's generated from django so it's a bit verbose)

```html


État du club :



Actif




Inactif




Tous les clubs



Search

```

When using the form, the request is sent once and I receive the expected html fragment with the correct value.
However, when I change the radio input value, it starts glitching.

* On firefox, I see the radio value reset and then get to the correct value
* On chrome based browser, it resets and then the checked value disappear

I've noticed that when I enable transitions, this bad behaviour stops, it's also "fixed" when using morphing which suggests that something is wrong with transitions. This worked properly with htmx 2 and I don't see anything that should have changed behaviour with the new version.

Here what it looks like on chrome
https://github.com/user-attachments/assets/3018f0ab-1733-4488-9996-7df69c39af5c

Original discussion https://discord.com/channels/725789699527933952/1546997168898965615

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the provided form and compare the innerHTML swap behavior in Firefox and a Chromium-based browser. Start by tracing the swap and transition behavior, then verify the radio selection remains correct without transitions or morphing in both browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.