From 2bb8672dc43d493145480ce3edc238816c5ac579 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 27 Jul 2026 17:27:34 +1000
Subject: [PATCH] [UI] Display all error table field error messages (#12456)

* Display all error table field error messages

* Adjust playwright test
---
 .../components/forms/fields/TableField.tsx    | 43 ++++++++++++++-----
 src/frontend/tests/pages/pui_stock.spec.ts    |  5 ++-
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/forms/fields/TableField.tsx b/src/frontend/src/components/forms/fields/TableField.tsx
index 5dc69cf903..5ca2d60884 100644
--- a/src/frontend/src/components/forms/fields/TableField.tsx
+++ b/src/frontend/src/components/forms/fields/TableField.tsx
@@ -68,7 +68,20 @@ function TableFieldRow({
     );
   }
 
-  const nonFieldErrors = rowErrors?.non_field_errors;
+  // Render every error associated with this row, regardless of whether
+  // the modelRenderer also displays it next to a specific field -
+  // this guarantees no backend error is ever silently dropped
+  const rowErrorMessages: { key: string; message: string }[] = [];
+
+  if (rowErrors && typeof rowErrors === 'object') {
+    for (const [key, value] of Object.entries<any>(rowErrors)) {
+      const message = value?.message ?? value;
+
+      if (message) {
+        rowErrorMessages.push({ key, message });
+      }
+    }
+  }
 
   return (
     <>
@@ -79,17 +92,25 @@ function TableFieldRow({
         changeFn: changeFn,
         removeFn: removeFn
       })}
-      {nonFieldErrors && (
-        <Table.Tr key={`table-row-${rowId}-non-field-errors`}>
+      {rowErrorMessages.length > 0 && (
+        <Table.Tr key={`table-row-${rowId}-errors`}>
           <Table.Td colSpan={columnCount}>
-            <Group gap='xs'>
-              <ActionIcon size='sm' variant='transparent' c='red'>
-                <IconCornerDownRight />
-              </ActionIcon>
-              <Text size='xs' c='red'>
-                {nonFieldErrors.message ?? nonFieldErrors}
-              </Text>
-            </Group>
+            <Stack gap={4}>
+              {rowErrorMessages.map(({ key, message }) => (
+                <Group
+                  gap='xs'
+                  wrap='nowrap'
+                  key={`table-row-${rowId}-error-${key}`}
+                >
+                  <ActionIcon size='sm' variant='transparent' c='red'>
+                    <IconCornerDownRight />
+                  </ActionIcon>
+                  <Text size='xs' c='red'>
+                    {message}
+                  </Text>
+                </Group>
+              ))}
+            </Stack>
           </Table.Td>
         </Table.Tr>
       )}
diff --git a/src/frontend/tests/pages/pui_stock.spec.ts b/src/frontend/tests/pages/pui_stock.spec.ts
index 8016dab387..e3fc1a5b62 100644
--- a/src/frontend/tests/pages/pui_stock.spec.ts
+++ b/src/frontend/tests/pages/pui_stock.spec.ts
@@ -486,8 +486,9 @@ test('Stock - Return Items', async ({ browser }) => {
   await page.getByRole('textbox', { name: 'number-field-quantity' }).fill('0');
   await page.getByRole('button', { name: 'Submit' }).click();
 
-  await page.getByText('Quantity must be greater than zero').waitFor();
-  await page.getByText('This field is required.').waitFor();
+  await page.getByText('Errors exist for one or more form fields').waitFor();
+  await page.getByText('Quantity must be greater than zero').first().waitFor();
+  await page.getByText('This field is required.').first().waitFor();
 });
 
 test('Stock - Tracking', async ({ browser }) => {