From 8e3862db3c2922d9618c3d598381594b3f416d8a Mon Sep 17 00:00:00 2001
From: bacarndiaye <bacarndiaye@outlook.com>
Date: Tue, 20 Oct 2026 01:29:10 +0200
Subject: [PATCH] fix(array): add an edit button to list rows and make the edit
 dialog dismissable

- Each row of an array field now shows an "Edit" icon button next to "Delete".
  Both icon-only buttons get an accessible name.
- The "Edit item" dialog can be closed with a close button or by clicking
  outside. Editing is live ("Done" only closes the dialog), so nothing is lost.
- The "Add item" dialog is unchanged: it keeps its "Cancel" button and is not
  dismissable, so a half-filled item is not discarded by accident.

Fixes #1644

Claude-Session: https://claude.ai/code/session_01QcoLHK1Y8FVsVZ8ayWSBwa
---
 .changeset/array-edit-button-and-dismiss.md   |  5 +++
 .../keystatic/src/form/fields/array/ui.tsx    | 44 ++++++++++++++-----
 2 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/array-edit-button-and-dismiss.md

diff --git a/.changeset/array-edit-button-and-dismiss.md b/.changeset/array-edit-button-and-dismiss.md
new file mode 100644
index 000000000..61f292692
--- /dev/null
+++ b/.changeset/array-edit-button-and-dismiss.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Array fields: add a visible "Edit" button to each list row (next to "Delete", and with an accessible name on both icon buttons), and make the "Edit item" dialog dismissable with a close button or by clicking outside. The "Add item" dialog is unchanged and keeps its "Cancel" button.
diff --git a/packages/keystatic/src/form/fields/array/ui.tsx b/packages/keystatic/src/form/fields/array/ui.tsx
index a9209d1bd..5f172e3be 100644
--- a/packages/keystatic/src/form/fields/array/ui.tsx
+++ b/packages/keystatic/src/form/fields/array/ui.tsx
@@ -7,8 +7,9 @@ import {
 } from '@keystar/ui/drag-and-drop';
 import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Icon } from '@keystar/ui/icon';
+import { pencilIcon } from '@keystar/ui/icon/icons/pencilIcon';
 import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
-import { VStack } from '@keystar/ui/layout';
+import { Flex, VStack } from '@keystar/ui/layout';
 import { Item, ListView } from '@keystar/ui/list-view';
 import { Content } from '@keystar/ui/slots';
 import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip';
@@ -93,7 +94,14 @@ export function ArrayFieldInput<Element extends ComponentSchema>(
         <FieldMessage {...errorMessageProps}>{errorMessage}</FieldMessage>
       )}
 
+      {/*
+        Editing is live (changes apply as you type, "Done" only closes the
+        dialog), so the edit dialog can safely be dismissed with a close button
+        or by clicking outside. The "add" dialog has its own "Cancel" button and
+        is not dismissable, to avoid discarding a half-filled item by accident.
+      */}
       <DialogContainer
+        isDismissable={modalState.state === 'edit'}
         onDismiss={() => {
           setModalState({ state: 'closed' });
         }}
@@ -397,16 +405,30 @@ export function ArrayFieldListView<Element extends ComponentSchema>(
         return (
           <Item key={item.key} textValue={label}>
             <Text>{label}</Text>
-            <TooltipTrigger placement="start">
-              <ActionButton
-                onPress={() => {
-                  onRemoveKey(item.key);
-                }}
-              >
-                <Icon src={trash2Icon} />
-              </ActionButton>
-              <Tooltip>{stringFormatter.format('delete')}</Tooltip>
-            </TooltipTrigger>
+            <Flex gridArea="actions" alignItems="center" gap="small">
+              <TooltipTrigger placement="start">
+                <ActionButton
+                  aria-label={stringFormatter.format('edit')}
+                  onPress={() => {
+                    props.onOpenItem(props.elements.indexOf(item));
+                  }}
+                >
+                  <Icon src={pencilIcon} />
+                </ActionButton>
+                <Tooltip>{stringFormatter.format('edit')}</Tooltip>
+              </TooltipTrigger>
+              <TooltipTrigger placement="start">
+                <ActionButton
+                  aria-label={stringFormatter.format('delete')}
+                  onPress={() => {
+                    onRemoveKey(item.key);
+                  }}
+                >
+                  <Icon src={trash2Icon} />
+                </ActionButton>
+                <Tooltip>{stringFormatter.format('delete')}</Tooltip>
+              </TooltipTrigger>
+            </Flex>
           </Item>
         );
       }}