idiomorph icon indicating copy to clipboard operation
idiomorph copied to clipboard

Preserving overflowing containers' scroll positions

Open adicco opened this issue 1 year ago • 0 comments

I have a standard listing of audio recordings with different filters on the left which are grouped in overflowing containers; say something like this:

<div id="core">
  <aside>
    <form id="author"  hx-post="...." hx-swap="morph:outerHTML" hx-target="#core" style="overflow: auto; max-height: 100px">
     <input type="checkbox" value="..." id="input-author1" /> author 1
     <input type="checkbox" value="..." id="input-author2" /> author 2
  etc...
    </div>
    
    <form id="years" hx-post="....">
    </form>
  
  </aside>

  <main>/* contents */</main>
</div>

Each time a checkbox is changed my backend performs a search and returns the whole #core container. This is because the filters are reactive, and indeed if you filter by a particular author, this might disable certain yeras, and vice versa (and it gets more complex with more filter categories, of course.)

I was expecting idiomorph to preserve the form's scroll position, but it doesn't. Any idea?

Thank you very much!

adicco avatar Dec 25 '23 07:12 adicco