Page jumps to the top when the page is refreshed via htmx

[yatesco]

(I'm sure it never used to, so I'm questioning my sanity ;-)).

I have a page with a bunch of elements including textareas. The textareas POST when they lose focus and the reponse is a full page which re-renders outerHTML of the root element, e.g. a full page "refresh".

However, after the page refresh the position of the page is at the top, even if before that refresh the page had been scrolled down.

Is this expected default behaviour, and how do I stop it? I haven't overridden any globals and I'm not setting a scroll target in hx-swap. I don't want to jump to a known ID either, I simply want to scroll position remembered before the refresh and reapplied after the refresh. I could write some JS myself listening to the relevant events, but I'm absolutely convinced it didn't do this before.

Help :-)

[jreviews]

I feel like this may be related to the introduction of the focus-scroll swap modifier and htxm.config.defaultFocusScroll global config. More info here https://htmx.org/attributes/hx-swap/#focus-scroll and here https://htmx.org/docs/#config

Can you try setting the global htxm.config.defaultFocusScroll to true?

These were introduced to prevent htmx from scrolling away when you are filling out a form that works in a similar way as yours, and you've already scrolled to a different position before the previous response is swapped. Like scrolling down to submit a long form using a button and then suddenly have the page jump up before you are able to submit it.

If your inputs don't have IDs, then it's also possible it's just a matter of adding the ID attributes without necessarily including it in your hx-swap.

[yatesco]

I tried that by tying ‘ htxm.config.defaultFocusScroll = true’ but the behaviour is the same

…

On 18 Aug 2022, at 12:20, Alejandro Schmeichler ***@***.***> wrote:  I feel like this may be related to the introduction of the focus-scroll swap modifier and htxm.config.defaultFocusScroll global config. More info here https://htmx.org/attributes/hx-swap/#focus-scroll Can you try setting the global htxm.config.defaultFocusScroll to true? These were introduced to prevent htmx from scrolling away when you are filling out a form that works in a similar way as yours, and you've already scrolled to a different position before the previous response is swapped. Like scrolling down to submit a long form using a button and then suddenly have the page jump up before you are able to submit it. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[jreviews]

Do the textareas have id attributes?

[yatesco]

I tried that as well, but same behaviour

…

On 18 Aug 2022, at 12:39, Alejandro Schmeichler ***@***.***> wrote:  Do the textareas have id attributes? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[jreviews]

Can you create an example that reproduces the error using https://htmx.org/docs/#creating-demos and try rolling back htmx through different versions until you figure out on which version the issue started happening?

[yatesco]

Found a reproducible case. The problem is when I have a div with a size and overflow:auto. The scroll position within that div is lost.

Shall I put together a reproducible demo?

[jreviews]

Maybe @1cg can provide some feedback here on whether this is something workable. I don't think htmx can maintain the scroll position within a child element.

[yatesco]

I think one significant difference is that I am replacing the entire page on each refresh. I can't reproduce it using the mock POST/templates demo approach because it is always a sibling that gets replaced, and that works, even with overflow: auto on the sibling.

Trying to nail this down further....

[yatesco]

GOT IT :-) - sort of. So I have a top level div which gets replaced using:

<div class="my-class" hx-target=".my-class">
  <... style="width:200px;overflow:auto;">
    <textarea hx-post="/whatever"/>
  <...>
</div>

this replaces the HTML but loses the scroll position. Simply changing it from a class to an ID and everything works smoothly:

<div id="my-class" hx-target="#my-class">
  <... style="width:200px;overflow:auto;">
    <textarea hx-post="/whatever"/>
  <...>
</div>

Also note that this only works for one level. It seems that the element that overflows needs an id on itself and every ancestor, but I can't be definitive. Sticking ids everywhere has made it work.

[yatesco]

Nope - it still doesn't work :-(

[yatesco]

Will do

…

On 18 Aug 2022, at 12:51, Alejandro Schmeichler ***@***.***> wrote:  Can you create an example that reproduces the error using https://htmx.org/docs/#creating-demos and try rolling back htmx through different versions until you figure out on which version the issue started happening? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[yatesco]

Full disclosure - I've started a higher level meta-thread on #1017

[gerbil]

Is it even possible to keep scroll for refreshed sections? like tables for instance