fix: avoid scrolling to the bottom when making a selection

closes #869bnn1bw
This commit is contained in:
Björn Fromme
2026-03-16 12:01:09 +01:00
parent c57351f8b5
commit ad578179d8
+17 -1
View File
@@ -5,6 +5,7 @@ const DEBOUNCE_MS = 200
let debounceTimeout = null let debounceTimeout = null
let historyRestoreGracePeriod = false let historyRestoreGracePeriod = false
let savedScrollPosition = null
function getIndicator() { function getIndicator() {
return document.getElementById(INDICATOR_ID) return document.getElementById(INDICATOR_ID)
@@ -28,12 +29,18 @@ function hide() {
} }
} }
function handleBeforeRequest() { function handleBeforeRequest(event) {
// Ignore requests triggered during history restore grace period // Ignore requests triggered during history restore grace period
if (true === historyRestoreGracePeriod) { if (true === historyRestoreGracePeriod) {
return return
} }
// Save scroll position of the target container before HTMX request
const target = event.detail?.target || document.getElementById('main-content')
if (target && typeof target.scrollTop === 'number') {
savedScrollPosition = { element: target, top: target.scrollTop }
}
// Don't start a new debounce if already pending // Don't start a new debounce if already pending
if (debounceTimeout) { if (debounceTimeout) {
return return
@@ -45,6 +52,14 @@ function handleBeforeRequest() {
}, DEBOUNCE_MS) }, DEBOUNCE_MS)
} }
function handleAfterSwap() {
// Restore scroll position after HTMX swaps content
if (savedScrollPosition !== null && savedScrollPosition.element) {
savedScrollPosition.element.scrollTop = savedScrollPosition.top
savedScrollPosition = null
}
}
function handleHistoryRestore() { function handleHistoryRestore() {
hide() hide()
@@ -68,6 +83,7 @@ function handleBeforeHistorySave() {
// Initialize event listeners // Initialize event listeners
document.body.addEventListener('htmx:beforeRequest', handleBeforeRequest) document.body.addEventListener('htmx:beforeRequest', handleBeforeRequest)
document.body.addEventListener('htmx:afterRequest', hide) document.body.addEventListener('htmx:afterRequest', hide)
document.body.addEventListener('htmx:afterSwap', handleAfterSwap)
document.body.addEventListener('htmx:timeout', handleTimeout) document.body.addEventListener('htmx:timeout', handleTimeout)
document.body.addEventListener('htmx:historyRestore', handleHistoryRestore) document.body.addEventListener('htmx:historyRestore', handleHistoryRestore)
document.body.addEventListener('htmx:sendError', hide) document.body.addEventListener('htmx:sendError', hide)