fix(sanity): get correct expand operations from path

dev/test-studio/preview/FieldGroups.tsx

@@ -0,0 +1,50 @@
+import {Box, Card, Stack, Text} from '@sanity/ui'
+
+import {useQuery} from './loader'
+
+export function FieldGroups(): JSX.Element {
+  const {data, loading, error} = useQuery<
+    {
+      _id: string
+      field1: string | null
+      field2: string | null
+      nested: {
+        field3: string | null
+        field4: string | null
+        field5: string | null
+      } | null
+    }[]
+  >(
+    /* groq */ `*[_type == "fieldGroupsWithFieldsetsHidden"]{_id,field1,field2,nested{field3,field4,field5}}`,
+  )
+
+  if (error) {
+    throw error
+  }
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  return (
+    <Box paddingX={4}>
+      {data?.map((item) => {
+        return (
+          <Card key={item._id} padding={4}>
+            <Stack space={4}>
+              <Text weight={'bold'}>{item.field1 || 'Not Set'}</Text>
+              <Text weight={'bold'}>{item.field2 || 'Not Set'}</Text>
+              {item.nested && (
+                <Stack space={4} paddingLeft={2}>
+                  <Text>{item.nested.field3 || 'Not Set'}</Text>
+                  <Text>{item.nested.field4 || 'Not Set'}</Text>
+                  <Text>{item.nested.field5 || 'Not Set'}</Text>
+                </Stack>
+              )}
+            </Stack>
+          </Card>
+        )
+      })}
+    </Box>
+  )
+}

dev/test-studio/preview/main.tsx

@@ -1,14 +1,51 @@
+import {Box, Flex, studioTheme, Tab, TabList, TabPanel, ThemeProvider} from '@sanity/ui'
 import {enableVisualEditing} from '@sanity/visual-editing'
-import {Suspense, useEffect} from 'react'
+import {Suspense, useEffect, useState} from 'react'
 import {createRoot} from 'react-dom/client'
 
+import {FieldGroups} from './FieldGroups'
 import {useLiveMode} from './loader'
 import {SimpleBlockPortableText} from './SimpleBlockPortableText'
 
 function Main() {
+  const [id, setId] = useState('simple')
   return (
     <>
-      <SimpleBlockPortableText />
+      <ThemeProvider theme={studioTheme}>
+        <Flex direction={'column'}>
+          <Box padding={4}>
+            <TabList space={2}>
+              <Tab
+                aria-controls="simple-panel"
+                id="simple-tab"
+                label="SimpleBlockPortableText"
+                onClick={() => setId('simple')}
+                selected={id === 'simple'}
+              />
+              <Tab
+                aria-controls="nested-panel"
+                id="nested-tab"
+                label="FieldGroups"
+                onClick={() => setId('nested')}
+                selected={id === 'nested'}
+              />
+            </TabList>
+          </Box>
+
+          {id === 'simple' && (
+            <TabPanel aria-labelledby="simple-tab" id="simple-panel">
+              <SimpleBlockPortableText />
+            </TabPanel>
+          )}
+
+          {id === 'nested' && (
+            <TabPanel aria-labelledby="nested-tab" id="nested-panel">
+              <FieldGroups />
+            </TabPanel>
+          )}
+        </Flex>
+      </ThemeProvider>
+
       <Suspense fallback={null}>
         <VisualEditing />
       </Suspense>

dev/test-studio/schema/debug/fieldGroupsWithFieldsetsHidden.js

@@ -0,0 +1,59 @@
+const group = {
+  name: 'group',
+  title: 'Group',
+  default: true,
+}
+const group2 = {
+  name: 'group2',
+  title: 'Group 2',
+}
+const fieldset = {
+  name: 'fieldset',
+  title: 'Fieldset',
+  options: {collapsed: true},
+}
+
+export default {
+  name: 'fieldGroupsWithFieldsetsHidden',
+  title: 'With default groups and collapsed fieldsets',
+  type: 'document',
+  groups: [group, group2],
+  fieldsets: [fieldset],
+  fields: [
+    {
+      name: 'field1',
+      type: 'string',
+    },
+    {
+      name: 'field2',
+      type: 'string',
+      group: group.name,
+      fieldset: fieldset.name,
+    },
+    {
+      name: 'nested',
+      type: 'object',
+      group: group.name,
+      fieldset: fieldset.name,
+      groups: [group, group2],
+      fieldsets: [fieldset],
+      fields: [
+        {
+          name: 'field3',
+          type: 'string',
+          fieldset: fieldset.name,
+        },
+        {
+          name: 'field4',
+          type: 'string',
+          group: group.name,
+        },
+        {
+          name: 'field5',
+          type: 'string',
+          group: group2.name,
+        },
+      ],
+    },
+  ],
+}

dev/test-studio/schema/index.ts

@@ -32,6 +32,7 @@ import fieldGroupsDefault from './debug/fieldGroupsDefault'
 import fieldGroupsMany from './debug/fieldGroupsMany'
 import fieldGroupsWithFieldsets from './debug/fieldGroupsWithFieldsets'
 import fieldGroupsWithFieldsetsAndValidation from './debug/fieldGroupsWithFieldsetsAndValidation'
+import fieldGroupsWithFieldsetsHidden from './debug/fieldGroupsWithFieldsetsHidden'
 import fieldGroupsWithI18n from './debug/fieldGroupsWithI18n'
 import fieldGroupsWithValidation from './debug/fieldGroupsWithValidation'
 import fieldsets from './debug/fieldsets'
@@ -253,6 +254,7 @@ export const schemaTypes = [
   fieldGroupsWithI18n,
   fieldGroupsWithValidation,
   fieldGroupsWithFieldsetsAndValidation,
+  fieldGroupsWithFieldsetsHidden,
   virtualizationInObject,
   virtualizationDebug,
 

dev/test-studio/structure/constants.ts

@@ -98,6 +98,7 @@ export const DEBUG_FIELD_GROUP_TYPES = [
   'fieldGroupsWithValidation',
   'fieldGroupsWithFieldsets',
   'fieldGroupsWithFieldsetsAndValidation',
+  'fieldGroupsWithFieldsetsHidden',
 ]
 
 export const EXTERNAL_PLUGIN_INPUT_TYPES = ['markdownTest', 'muxVideoPost']

packages/sanity/src/core/form/store/useFormState.ts

@@ -7,7 +7,7 @@ import {useLayoutEffect, useMemo, useRef} from 'react'
 import {type FormNodePresence} from '../../presence'
 import {useCurrentUser} from '../../store'
 import {type FIXME_SanityDocument, prepareFormState} from './formState'
-import {type ObjectFormNode, type StateTree} from './types'
+import {type ObjectFormNode, type ObjectMember, type StateTree} from './types'
 import {type DocumentFormNode} from './types/nodes'
 import {immutableReconcile} from './utils/immutableReconcile'
 
@@ -77,7 +77,7 @@ export function useFormState<
       presence,
       validation,
       changesOpen,
-    }) as ObjectFormNode<T, S> // TODO: remove type cast
+    }) as ObjectFormNode<T, S> & {_allMembers: ObjectMember[]} // TODO: remove type cast
 
     const reconciled = immutableReconcile(prev.current, next)
     prev.current = reconciled

packages/sanity/src/core/form/store/utils/getExpandOperations.ts

@@ -107,19 +107,21 @@ function getObjectFieldsetAndFieldGroupOperations(
   // Group handling
   const schemaField = node.schemaType.fields.find((field) => field.name === fieldName)
   const selectedGroupName = node.groups.find((group) => group.selected)?.name
-  const defaultGroupName = (node.schemaType.groups || []).find((group) => group.default)?.name
+  const schemaFieldGroup = (schemaField && castArray(schemaField.group)) || []
   const inSelectedGroup =
     selectedGroupName &&
-    (selectedGroupName === ALL_FIELDS_GROUP.name ||
-      (schemaField && castArray(schemaField.group).includes(selectedGroupName)))
+    (selectedGroupName === ALL_FIELDS_GROUP.name || schemaFieldGroup.includes(selectedGroupName))
 
   const ops: (ExpandFieldSetOperation | SetActiveGroupOperation)[] = []
 
   if (!inSelectedGroup) {
+    const groupName =
+      node.groups.find((group) => schemaFieldGroup.includes(group.name))?.name ||
+      ALL_FIELDS_GROUP.name
     ops.push({
       type: 'setSelectedGroup',
       path: node.path,
-      groupName: defaultGroupName || ALL_FIELDS_GROUP.name,
+      groupName,
     })
   }
 

packages/sanity/src/core/form/store/utils/immutableReconcile.ts

@@ -54,12 +54,14 @@ function _immutableReconcile<T>(
     assertType<Record<string, unknown>>(previous)
     assertType<Record<string, unknown>>(next)
 
-    const nextKeys = Object.keys(next)
-    let allEqual = Object.keys(previous).length === nextKeys.length
+    const nextKeys = Object.getOwnPropertyNames(next)
+    let allEqual = Object.getOwnPropertyNames(previous).length === nextKeys.length
     const result: Record<string, unknown> = {}
     parents.set(next, result)
     for (const key of nextKeys) {
-      const nextValue = _immutableReconcile(previous[key], next[key]!, parents)
+      const nextValue = next.propertyIsEnumerable(key)
+        ? _immutableReconcile(previous[key], next[key]!, parents)
+        : next[key]
       if (nextValue !== previous[key]) {
         allEqual = false
       }