bigskysoftware / bigskysoftware/htmx
HX-Reselect doesn't run in time to render properly into a table
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
I'm using kotlinx.html on the backend, which for annoying reasons (see the `appendHTML` definition) means that all of my fragments need to be wrapped in an element. I handle this by sending responses like:
```
...
```
...and then using HX-Reselect with a value of `".wrapper > *"` to remove the wrapping div. Works well enough. Generally only a minor annoyance.
However, this doesn't work when trying to add rows to a table.
I have:
```
```
When the the results come back (with HX-Reselect header as above) as:
```
```
...I end up with (rendered):
```
```
Notice that the guts of the table cells are spilled directly into the tbody.
If I instead do string manipulation on the backend (after kotlinx.html yields a string back to the api) to remove the wrapping element, and this time no HX-Reselect, so that the response is:
```
```
...I end up with (rendered):
```
```
My hunch is that what happens is:
a) HTMX inserts the whole wrapper div into the DOM (i.e. into the end of the tree body node)
b) Chrome's quirks mode kicks in, and says "hey, a div in a tbody isn't valid", which triggers removal of the table specific elements (trs/tds), leading to the guts being spilled as described above
c) HTMX then performs DOM manipulation to move the children out of the wrapper div
Contributor guide
Research direction
Reproduce the issue using the table/tbody example, HX-Reselect value ".wrapper > *", and the two response shapes described in the report. Then inspect htmx's response insertion and reselection behavior around table elements; done means returned tr and td elements remain correctly nested in tbody when the wrapper is removed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100