[components, form-builder] fix child presence on collapsed objects an…

…d fieldsets
sanity-io · Oct 22, 2020 · 78b3c49 · 78b3c49 · vercel · Oct 22, 2020
1 parent bb35633
commit 78b3c49
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx b/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx
@@ -142,11 +142,12 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
     const showSummary = isCollapsible && isCollapsed
     // Hide the tooltip if field is collapsible, but field is not collapsed
     const hideTooltip = isCollapsible && !isCollapsed
+    const childPresence = isCollapsible && isCollapsed ? presence : []
     return (
       <div
         {...rest}
         onFocus={this.handleFocus}
-        tabIndex={tabIndex}
+        tabIndex={isCollapsible && isCollapsed ? tabIndex : -1}
         ref={this.setFocusElement}
         className={rootClassName}
       >
@@ -192,9 +193,11 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
                   </p>
                 )}
               </div>
-              <FieldStatus>
-                <FieldPresence maxAvatars={4} presence={presence} />
-              </FieldStatus>
+              {isCollapsible && (
+                <FieldStatus>
+                  <FieldPresence maxAvatars={4} presence={childPresence} />
+                </FieldStatus>
+              )}
             </div>
 
             {isCollapsible && !isCollapsed && (

diff --git a/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx b/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx
@@ -152,7 +152,7 @@ export default class ObjectInput extends React.PureComponent<ObjectInputProps> {
           columns={columns}
           isCollapsible={collapsibleOpts.collapsible}
           isCollapsed={isCollapsed}
-          presence={isCollapsed ? childPresence : []}
+          presence={childPresence}
           onFocus={onFocus}
           changeIndicator={false}
           markers={markers}
@@ -243,7 +243,7 @@ export default class ObjectInput extends React.PureComponent<ObjectInputProps> {
           isCollapsible={collapsibleOpts.collapsible}
           isCollapsed={isCollapsed}
           markers={markers}
-          presence={presence.filter(item => item.path[0] === '$' || item.path.length === 0)}
+          presence={presence}
           onFocus={onFocus}
           changeIndicator={false}
         >

diff --git a/packages/test-studio/schemas/objects.js b/packages/test-studio/schemas/objects.js
@@ -67,7 +67,22 @@ export default {
         'This is a field of (anonymous, inline) object type. Values here should never get a `_type` property',
       fields: [
         {name: 'field1', type: 'string', description: 'This is a string field'},
-        {name: 'field2', type: 'string', description: 'This is a collapsed field'}
+        {name: 'field2', type: 'string', description: 'This is a collapsed field'},
+        {
+          name: 'field3',
+          type: 'object',
+          options: {collapsible: true, collapsed: true},
+          fields: [
+            {name: 'nested1', title: 'nested1', type: 'string'},
+            {
+              name: 'nested2',
+              title: 'nested2',
+              type: 'object',
+              fields: [{name: 'ge', title: 'hello', type: 'string'}],
+              options: {collapsible: true, collapsed: true}
+            }
+          ]
+        }
       ]
     },
     {