bigskysoftware / idiomorph

A DOM-merging algorithm
BSD 2-Clause "Simplified" License
693 stars 33 forks source link

Preserving overflowing containers' scroll positions #26

Open adicco opened 9 months ago

adicco commented 9 months ago

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!