fix(core): editing reference input in PTE does not show value (#4499)

* fix(core): editing reference input in PTE does not show value

* fix(core): revert clearing on replace

Author: binoy14

dev/test-studio/schema/debug/ptReference.ts

@@ -0,0 +1,24 @@
+import {defineType} from 'sanity'
+
+export default defineType({
+  name: 'ptReference',
+  title: 'Portable Text Reference',
+  type: 'document',
+  fields: [
+    {
+      name: 'body',
+      title: 'Body',
+      type: 'array',
+      of: [
+        {
+          type: 'block',
+          marks: {
+            annotations: [{type: 'reference', to: {type: 'author'}}],
+          },
+          of: [{type: 'reference', to: {type: 'author'}}],
+        },
+        {type: 'reference', to: {type: 'author'}},
+      ],
+    },
+  ],
+})

dev/test-studio/schema/index.ts

@@ -107,6 +107,7 @@ import crossDatasetReference, {crossDatasetSubtype} from './standard/crossDatase
 import {circularCrossDatasetReferenceTest} from './debug/circularCrossDatasetReference'
 import {allNativeInputComponents} from './debug/allNativeInputComponents'
 import fieldGroupsWithFieldsets from './debug/fieldGroupsWithFieldsets'
+import ptReference from './debug/ptReference'
 
 // @todo temporary, until code input is v3 compatible
 const codeInputType = {
@@ -203,6 +204,7 @@ export const schemaTypes = [
   previewSelectBugRepro,
   ptAllTheBellsAndWhistlesType,
   ptCustomMarkersTestType,
+  ptReference,
   radio,
   readOnly,
   recursive,

dev/test-studio/structure/constants.ts

@@ -72,6 +72,7 @@ export const DEBUG_INPUT_TYPES = [
   'validationTest',
   'allNativeInputComponents',
   'scrollBug',
+  'ptReference',
 ]
 
 export const CI_INPUT_TYPES = ['conditionalFieldset', 'validationCI']

packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx

@@ -324,6 +324,7 @@ export function ReferenceInput(props: ReferenceInputProps) {
             renderValue={renderValue}
             openButton={{onClick: handleAutocompleteOpenButtonClick}}
             portalRef={autoCompletePortalRef}
+            value={value?._ref}
           />
 
           {createOptions.length > 0 && (

packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx

@@ -186,6 +186,14 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
     [refType?.name, value?._ref]
   )
 
+  const handleReplace = useCallback(() => {
+    if (hasRef && isEditing) {
+      onPathFocus([])
+    } else {
+      onPathFocus(['_ref'])
+    }
+  }, [hasRef, isEditing, onPathFocus])
+
   const menu = useMemo(
     () =>
       readOnly ? null : (
@@ -201,9 +209,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
                     <MenuItem
                       text={hasRef && isEditing ? 'Cancel replace' : 'Replace'}
                       icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
-                      onClick={
-                        hasRef && isEditing ? () => onPathFocus([]) : () => onPathFocus(['_ref'])
-                      }
+                      onClick={handleReplace}
                     />
                     <MenuItem text="Duplicate" icon={DuplicateIcon} onClick={handleDuplicate} />
                     <InsertMenu onInsert={handleInsert} types={insertableTypes} />
@@ -231,11 +237,11 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
       onRemove,
       hasRef,
       isEditing,
+      handleReplace,
       handleDuplicate,
       handleInsert,
       insertableTypes,
       OpenLink,
-      onPathFocus,
     ]
   )