fix: support field presence avatars on react 19

[stipsan]

Description

In React 19 it's possible to set a ref as a prop, while in React 18 you must implement React.forwardRef for this.

Components that implement React.forwardRef isn't impacted by this change, and won't see that ref exists as a prop. But for components like WithIntersection, it's now important to have the right order when setting refs and spreading props:

export default function Component(props) {
  // On React 19 this ref is never set
  const ref = useRef()

  return <div ref={ref} {...props} />
}

On React 18 this is fine, because <Component ref={123} /> won't result in props containing ref={123}.
On React 19 it's not, because not only is <Component ref={123} /> now possible and will result in props.ref=123, it also means that if a ref prop isn't defined, it'll be null.

In other words, on React 18 the resulting render is roughly: <div {...props} ref={ref} />, but on React 19 it's: <div ref={ref} {...({ ...props, ref: props.ref ?? null })} />.

The best way to mitigate this is to ensure that props are spread first, that way it's not possible to accidentally overriden:

export default function Component(props) {
  const ref = useRef()

  return <div {...props} ref={ref} />
}

This behaviour can be verified with the React DevTools on the deployments:

React 18 (Hook 1 is set)

React 19 (Hook 1 is null)

Note that the hook remains `null`, and that there's now a `ref` prop with `null`, which is causing it.

React 19 (with the fix applied)

What to review

Does it make sense?

Testing

Test on https://test-studio.sanity.dev/ for a working reference, use https://test-next-studio.sanity.dev/ to reproduce the bug, and finally https://test-next-studio-git-fix-field-presence-on-react-19.sanity.dev/ demonstrates the fix.

Notes for release

Fixes an issue causing the Presence Avatar Overlays on form fields not to appear when the Studio is embedded in a React 19 app.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2024 3:54pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2024 3:54pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2024 3:54pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2024 3:54pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2024 3:54pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)			Aug 2, 2024 3:54pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Aug 2, 2024 4:00 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	43s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	30s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	37s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	17s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	2m 33s	1	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	44s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 43s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 15s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	26s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	17s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 14s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	1m 48s	30	0	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	20s	3	0	0

[ricokahler]

the logic checks out for me. nice find!