The problem occurs when a Grid is used in the component. The item detail view stops working because it no longer matches the full name. I'm not sure what the right approach is yet, but as a temporary workaround, the following Composer patch can be used to alter the code.
diff --git a/assets/plugins/features/item-detail.ts b/assets/plugins/features/item-detail.ts
index fed8d9f..c3eaeed 100644
--- a/assets/plugins/features/item-detail.ts
+++ b/assets/plugins/features/item-detail.ts
@@ -5,7 +5,13 @@ export class ItemDetailPlugin implements DatagridPlugin {
onDatagridInit(datagrid: Datagrid): boolean {
datagrid.el.querySelectorAll<HTMLElement>("[data-toggle-detail-grid]")
.forEach((el) => {
- if (el.getAttribute("data-toggle-detail-grid") !== datagrid.name) return;
+ // datagrid.name is resolved from data-datagrid-name, which the template renders as the
+ // component full name. data-toggle-detail-grid holds the plain component name, so for a
+ // datagrid nested in another component the two never match and the detail never toggles.
+ const gridName = el.getAttribute("data-toggle-detail-grid-fullname")
+ ?? el.getAttribute("data-toggle-detail-grid");
+
+ if (gridName !== datagrid.name) return;
const toggleId = el.getAttribute("data-toggle-detail")!;
The problem occurs when a Grid is used in the component. The item detail view stops working because it no longer matches the full name. I'm not sure what the right approach is yet, but as a temporary workaround, the following Composer patch can be used to alter the code.