fix(core): fix array items not showing in field groups (#4930)

* chore(core): add a debug schema for one off issue

* fix(core): fix array items not showing in field groups

* chore(debug): add a debug schema for nested field group

dev/test-studio/schema/debug/virtualizationDebug.tsx

@@ -19,8 +19,8 @@ export function MyField(props: FieldProps) {
   )
 }
 
-const getAuthors = (client: SanityClient) => {
-  const query = `*[_type == "author"][0...20]{_id}`
+const getAuthors = (client: SanityClient, limit = 20) => {
+  const query = `*[_type == "author"][0...${limit}]{_id}`
 
   return client.fetch(query)
 }
@@ -38,6 +38,14 @@ export const virtualizationDebug = defineType({
       name: 'objects',
       title: 'Objects',
     },
+    {
+      name: 'singleItem',
+      title: 'Single Item test',
+    },
+    {
+      name: 'singleItemNested',
+      title: 'Single Item Nested Group',
+    },
   ],
 
   fields: [
@@ -245,5 +253,84 @@ export const virtualizationDebug = defineType({
         }),
       ],
     }),
+    defineField({
+      name: 'arrayListSingleGroup',
+      title: 'Array List single item in group',
+      type: 'array',
+      group: 'singleItem',
+      of: [
+        {
+          type: 'reference',
+          to: [{type: 'author'}],
+        },
+      ],
+      initialValue: async (_, context) => {
+        const {getClient} = context
+        const client = getClient({apiVersion: '2022-12-07'})
+        const authors = await getAuthors(client, 8)
+
+        return authors.map((author: any) => ({
+          _type: 'reference',
+          _ref: author._id,
+        }))
+      },
+    }),
+
+    defineField({
+      name: 'arrayInObjectNestedGroup',
+      title: 'Array in Object Arrays',
+      type: 'object',
+      group: 'singleItemNested',
+      options: {
+        collapsible: true,
+      },
+      groups: [
+        {
+          name: 'nestedGroup',
+          title: 'Nested Group',
+        },
+      ],
+      fields: [
+        defineField({
+          name: 'arrayListNestedGroup',
+          title: 'Array List with no customization',
+          type: 'array',
+          of: [
+            {
+              type: 'playlist',
+            },
+          ],
+          initialValue: () => {
+            const arr = new Array(10).fill(null)
+            return arr.map((_, i) => ({
+              _type: 'playlist',
+              name: `Playlist ${i}`,
+            }))
+          },
+        }),
+        defineField({
+          name: 'arrayListNestedSingleGroup',
+          title: 'Array List single item in nested group',
+          type: 'array',
+          group: 'nestedGroup',
+          of: [
+            {
+              type: 'reference',
+              to: [{type: 'author'}],
+            },
+          ],
+          initialValue: async (_, context) => {
+            const {getClient} = context
+            const client = getClient({apiVersion: '2022-12-07'})
+            const authors = await getAuthors(client, 8)
+
+            return authors.map((author: any) => ({
+              _type: 'reference',
+              _ref: author._id,
+            }))
+          },
+        }),
+      ],
+    }),
   ],
 })

packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx

@@ -62,6 +62,7 @@ export const DocumentPanel = function DocumentPanel(props: DocumentPanelProps) {
     isDeleting,
     isDeleted,
     timelineStore,
+    formState,
   } = useDocumentPane()
   const {collapsed: layoutCollapsed} = usePaneLayout()
   const {collapsed} = usePane()
@@ -75,6 +76,12 @@ export const DocumentPanel = function DocumentPanel(props: DocumentPanelProps) {
 
   const requiredPermission = value._createdAt ? 'update' : 'create'
 
+  const selectedGroup = useMemo(() => {
+    if (!formState) return undefined
+
+    return formState.groups.find((group) => group.selected)
+  }, [formState])
+
   const activeView = useMemo(
     () => views.find((view) => view.id === activeViewId) || views[0] || {type: 'form'},
     [activeViewId, views],
@@ -172,6 +179,10 @@ export const DocumentPanel = function DocumentPanel(props: DocumentPanelProps) {
                       $disabled={layoutCollapsed || false}
                       data-testid="document-panel-scroller"
                       ref={setDocumentScrollElement}
+                      // Note: this is to make sure the scroll container is changed
+                      // when the selected group changes which causes virtualization
+                      // to re-render and re-measure the scroll container
+                      key={`${selectedGroup?.name}-${documentId}}`}
                     >
                       <FormView
                         hidden={formViewHidden}