OuterMorph Fails to Properly Update Table in HTMX 4 Alpha with WebAwesome and Thymeleaf #3603
Description
We are using HTMX 4 alpha with WebAwesome, Spring Boot, and Thymeleaf. We tried using outerMorph to call the backend and display filtered data in a table, but morphing doesn’t correctly update the table. I also used a proper ID to improve the update mechanism, but the issue persists.
My sample code:
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base}">
<head>
</head>
<body>
<main layout:fragment="content">
<div>
<span>Tenants at top : </span><span th:text="${tenantsList.size()}"></span>
</div>
<form class="wa-cluster wa-gap-s r-mt-2" hx-push-url="true" hx-status:4xx="target:#r-callout"
hx-status:5xx="target:#r-callout" hx-trigger="change delay:150ms" hx-get="/admin/tenants"
hx-select="main, hx-partial" hx-swap="outerMorph" hx-target="main" id="main-filter-form"
data-htmx-powered="true">
<wa-input size="small" label="Tenant" name="query"
oninput="this.closest('form').dispatchEvent(new Event('change', { bubbles: true }))"
placeholder="Search tenants" value="" type="text" appearance="outlined">
</wa-input>
</form>
<div id="admin-tenants-container">
<div>
<span>Tenants at container : </span><span th:text="${tenantsList.size()}"></span>
</div>
<table class="wa-zebra-rows">
<div>
<span>Tenants at table: </span><span th:text="${tenantsList.size()}"></span>
</div>
<thead>
<tr>
<th th:text="#{company}"></th>
</tr>
</thead>
<tbody>
<div>
<span>Tenants at table body: </span><span th:text="${tenantsList.size()}"></span>
</div>
<tr th:each="tenant : ${tenantsList}">
<td>
<div class="wa-stack wa-gap-3xs">
<span class="wa-body-m" th:text="${tenant.companyName}"></span>
<span class="wa-color-text-quiet" th:text="${tenant.slug}"></span>
</div>
<div>
<span>Tenants at row: </span><span th:text="${tenantsList.size()}"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>