bigskysoftware / bigskysoftware/htmx
Incorrect history swapping, not taking preserved elements into account?
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
Hello. I've notice a strange behavior after disabling the history restoration, by always fetching from the server.
We have a progress bar that is animating when requests are being made and when they finish.
Here's a video of the issue:
- The first 2 are normal navigations, clicking on links. Animation is smooth, and finishes after the swap
- The last 2 are history restoration, and after swapping, the bar just disappears.
https://github.com/bigskysoftware/htmx/assets/48229166/fafa5d25-5242-437b-83de-9821fd26065a
Could it be that the history swapping is different and doesn't taking persisted elements into account? 🤔
I've noticed some differences in the library;
- normal requests do `selectAndSwap` (which checks preserved elements)
- `loadHistoryFromServer` doesn't, and only uses `swapInnerHTML`
i've just briefly looking at the source, so i'm not fully familiar if there's any other reasons for this issue, or if the codebase has specific reasons for those differences
btw, the history is disabled with `htmx.config.historyCacheSize = 0`
---
yes, the loading bar is present in every request/template response, and has the right attributes, etc:
```
```
For the events, im using:
```
function resetPageLoadingBar() {
window.dispatchEvent(new CustomEvent('resetpageloadingbar'))
}
function finishPageLoadingBar() {
window.dispatchEvent(new CustomEvent('finishpageloadingbar'))
}
document.body.addEventListener('htmx:xhr:loadstart', resetPageLoadingBar)
document.body.addEventListener('htmx:afterSettle', finishPageLoadingBar)
document.body.addEventListener('htmx:responseError', finishPageLoadingBar)
// history
document.body.addEventListener('htmx:historyCacheMiss', resetPageLoadingBar)
document.body.addEventListener('htmx:historyRestore', finishPageLoadingBar)
```
seems fine? the first 4 are working correctly, just not the final `historyRestore`, as the element disappears. Maybe im doing something wrong here?
another hint:
- for the progress bar, we're using AlpineJS. it has an attribute `x-init=""` that is called when the element is mounted into the DOM.
- when navigating normally, and the bar is preserved, the x-init is _not_ called again, which is correct.
- but when restoring history, x-init is called every time, so it definitely looks like the element is mounted again with a _new_ node, rather than being preserved.
Hope that makes sense :) Appreciate any help here!
Contributor guide
Assessment
This issue has not been assessed yet.