https://htmx.org logo
Powered by
# htmx-general
  • m
    no prob
  • m
    Is there a way to stop any sort of scrolling after swap? I have a long form and when I make a change to a select the form updates. If I select a different option and scroll down, the browser scrolls to the top after the swap.
  • s
    Try adding 
    hx-swap='innerHTML show:none'
  • s
    Where innerHTML is your desired swap strategy (https://htmx.org/attributes/hx-swap/)
  • s
    I don't think 
    show:none
    is officially endorsed, but it worked for me
  • m
    Thanks. It doesn't work for me. I think it might be because this is an input with and ID and htmx tries to retain the focus.
  • s
    Ah, that's a shame! 😦
  • r
    morphdom swap would probably work here?
  • r
    I think one of the things it does is preserve scroll position @most-jelly-15242
  • m
    I am not sure, but I'd rather not include morphdom just for that. Maybe htmx can try to detect if the page is scrolling and forget about doing any special focus operations.
  • m
    willing to troubleshoot w/ you on this
  • m
    it is probably the focus issue
  • m
  • m
    I see there's another area where an 
    windowIsScrolling
    variable is used. Maybe something similar could be used here so that if the window is scrolling, the focus line is ignored?
  • m
    🤔
  • m
    this is scrolling to the top of the page though
  • m
    why
  • m
    Isn't scrolling to the element that initiated the request? 
    newActiveElt.focus()
  • m
    I'll need to debug (sorry, won't have time until this evening)
  • m
    No problem. Thanks for looking into it. To summarize, the issue is with a form input that has an id and initiates a request. If you scroll away, the input is re-focused on swap even if its already far up the page.
  • m
    OK, we will make it work!
  • m
    Look at me. First I want inputs to preserve focus on swap, and now I want them to lose it.
  • m
    🙂
  • m
    many such cases!
  • m
    to be fair. it is a different case, the eager scroller one.
  • m
    🙂
  • m
    Did a bit of research and the focus method has an optional parameter where you can stop it from scrolling https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focus_with_focusoption. So changing the line in question to 
    newActiveElt.focus({ preventScroll: true });
    works for me. Unfortunately it looks like it's not supported in safari.
  • m
    \> safari
  • m
    😑
  • m
    Did an actual test in Safari desktop and it does seem to work. On safari mobile it also works but for a different reason. The htmx focus doesn't actually work there so it's always lost and the page never scrolls.
1...535536537...1146Latest