Updating form with api request data, not a submission

[ScottDalessandro]

Greetings,

I am trying to populate form fields with unfurl data from a link after the user pastes it into the form.

I am using the form.update method as you can see below. Here is the behavior:

Title updates
Price updates
Description doesn't update

I don't know why the description doesn't update. The type of form element it populates is a Textarea element.

Also, all of the data that the fetcher gets is present.

type RegistryItem = z.infer<typeof RegistryItemSchema>

interface UnfurlFields {
  form: FormMetadata<RegistryItem>
  url: FieldMetadata<string | undefined>
  name: FieldMetadata<string>
  description: FieldMetadata<string | undefined>
  price: FieldMetadata<number>
  imageUrl: FieldMetadata<string | undefined>
}
  
export function useUrlUnfurl({form}: UnfurlFields) {
  const fetcher = useFetcher()
  const lastUrlRef = useRef<string | undefined>(undefined)
  const updatedRef = useRef(false)
  
  const handleUrlPaste = useCallback(
    (e: React.ClipboardEvent<HTMLInputElement>) => {   
      e.preventDefault()
      const url = e.clipboardData.getData('text')
      if (!url || !url.startsWith('http')) return
      
      // Reset the update flag when new URL is pasted
      updatedRef.current = false
      lastUrlRef.current = url
      
      void fetcher.submit(
        { url },
        { 
          method: 'POST',
          action: '/resources/unfurl',
        }
      )
    },
    [fetcher]
  )

  useEffect(() => {
    if (fetcher.data?.metadata && fetcher.state === 'idle' && !updatedRef.current) {
      const { metadata } = fetcher.data

      console.log('Unfurled metadata:', metadata)
      console.log('Unfurled metadata.description:', metadata.description)
      try {
        updatedRef.current = true

        if (metadata.description) {
          console.log('Updating description:' + metadata.description)
          form.update({ name: 'description', value: metadata.description })
        }
        // Update each field individually
        if (metadata.title) {
          form.update({ name: 'name', value: metadata.title })
        }
        
        
        // if (metadata.price) {
        //   const parsedPrice = parseFloat(metadata.price.replace(/[^0-9.]/g, '')).toString()
        //   form.update({ name: 'price', value: parsedPrice })
        // }

        if (lastUrlRef.current) {
          console.log('Updating url:' + lastUrlRef.current)
          form.update({ name: 'url', value: lastUrlRef.current })
        }

      } catch (error) {
        console.error('Error updating form:', error);
      }
    }
  }, [fetcher.data, fetcher.state,form])
  
  return {
    handleUrlPaste,
    isUnfurling: fetcher.state !== 'idle',
    error: fetcher.data?.error,
  }
}

[ScottDalessandro]

This post was helpful but I don't understand why certain fields I submit are not updating.