Infinite scroll while having editable table rows

[thenick775]

Is there a standard pattern for this behavior?

We noticed that editing using afterend for hx-swap caused us some problems, being that it would add edit rows below the infinite scroll row (an example being when you only have one row).

Heres how I solved for that:

templ InfiniteScrollTableRow(offset int) {
	<tr
		class="border-b border-gray-200 hover:bg-gray-100"
		hx-post={ fmt.Sprintf("/admin/referral_tracks/search?offset=%d", offset) }
		hx-trigger="revealed"
		hx-swap="afterend"
		hx-on::before-request="
			if(document.querySelector('.editing')) { 
				event.preventDefault();
				setTimeout(() => {
					this.removeAttribute('data-hx-revealed')
				}, 1000)
			};"
		hx-include={ commonInputSelectors() }
	>
		{ children... }
	</tr>
}

I went this route as the revealed trigger only runs once, unless you remove the attribute above.

Were these behavior ever meant to be used alongside each other (referencing infinite scroll, and editable table rows at the same time)?