bigskysoftware / bigskysoftware/htmx
[htmx 4] Incorrect innerHTML swap on radio input
- 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
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