Table updates break with HTMX 4 and Thymeleaf in pages #3601
Description
We are using Spring Boot + Thymeleaf + HTMX + WebAwesome and recently upgraded to HTMX 4. Previously, we used HTMX 2 with idiomorph, but in HTMX 4 the built-in morphing makes idiomorph unnecessary.
Our page structure is as follows: some parts of the page are the same across all pages, while the content section, which we call main, represents the page-specific data and varies according to the URL. On some pages, we have a table with a filter. The filter may contain different fields, but in simpler cases, we have a wa-input inside a form. When this input changes, we send a request to the backend to load the appropriate table data. In HTMX 4, we use main as both the selector and target, and outerMorph as the swap strategy. The backend calls return the whole page data, but we only need the main part.
I used proper IDs for the table, table header, table body, and table rows, but the backend response does not display correctly in the table. On the first load, everything is fine, but after performing a search, we sometimes see partial results from the backend along with rows from the initial load. If the result is empty, the table still shows some rows from the first load.
I displayed the result object on the frontend, and the object up to the table row is correct. However, within the row, the data is not coming from the backend; it seems to be cached values from HTMX morph. (We use Thymeleaf’s each to create rows from the list returned by the backend.)
In other cases, the table does not update at all, we either see all the data or an empty table. Additionally, after the table becomes empty, we cannot restore all the data by reverting the filter; we have to refresh the page.