fix(ui): index based ids without useAsTitle breaks folders (#12519)

Author: JarrodMFlesch

packages/payload/src/folders/utils/formatFolderOrDocumentItem.ts

@@ -20,7 +20,7 @@ export function formatFolderOrDocumentItem({
 }: Args): FolderOrDocument {
   const itemValue: FolderOrDocument['value'] = {
     id: value?.id,
-    _folderOrDocumentTitle: (useAsTitle && value?.[useAsTitle]) || value['id'],
+    _folderOrDocumentTitle: String((useAsTitle && value?.[useAsTitle]) || value['id']),
     createdAt: value?.createdAt,
     folderID: value?.[folderFieldName],
     updatedAt: value?.updatedAt,

packages/ui/src/elements/FolderView/Drawers/MoveToFolder/index.tsx

@@ -10,6 +10,7 @@ import type {
 
 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
+import { formatFolderOrDocumentItem } from 'payload/shared'
 import React from 'react'
 
 import { useConfig } from '../../../../providers/Config/index.js'
@@ -162,6 +163,7 @@ function Content({
     setFolderID,
     subfolders,
   } = useFolder()
+  const { getEntityConfig } = useConfig()
 
   const getSelectedFolder = React.useCallback((): {
     id: null | number | string
@@ -187,23 +189,18 @@ function Content({
 
   const onCreateSuccess = React.useCallback(
     ({ collectionSlug, doc }: { collectionSlug: CollectionSlug; doc: Document }) => {
-      const itemValue: FolderOrDocument['value'] = {
-        id: doc?.id,
-        _folderOrDocumentTitle: doc?.[folderCollectionConfig.admin.useAsTitle ?? 'id'],
-        createdAt: doc?.createdAt,
-        folderID: doc?.[folderFieldName],
-        updatedAt: doc?.updatedAt,
-      }
-
+      const collectionConfig = getEntityConfig({ collectionSlug })
       void addItems([
-        {
-          itemKey: `${collectionSlug}-${doc.id}`,
+        formatFolderOrDocumentItem({
+          folderFieldName,
+          isUpload: Boolean(collectionConfig?.upload),
           relationTo: collectionSlug,
-          value: itemValue,
-        },
+          useAsTitle: collectionConfig.admin.useAsTitle,
+          value: doc,
+        }),
       ])
     },
-    [addItems, folderCollectionConfig.admin.useAsTitle],
+    [addItems, folderFieldName, getEntityConfig],
   )
 
   const onConfirmMove = React.useCallback(() => {

packages/ui/src/providers/Folders/index.tsx

@@ -1070,15 +1070,13 @@ export function FolderProvider({
         breadcrumbs,
         clearSelections,
         currentFolder: breadcrumbs?.[0]?.id
-          ? {
-              itemKey: `${folderCollectionSlug}-${activeFolderID}`,
+          ? formatFolderOrDocumentItem({
+              folderFieldName,
+              isUpload: false,
               relationTo: folderCollectionSlug,
-              value: {
-                id: activeFolderID,
-                _folderOrDocumentTitle: breadcrumbs[breadcrumbs.length - 1]?.name,
-                folderID: breadcrumbs[breadcrumbs.length - 2]?.id || null,
-              },
-            }
+              useAsTitle: folderCollectionConfig.admin.useAsTitle,
+              value: breadcrumbs[breadcrumbs.length - 1],
+            })
           : null,
         documents,
         filterItems,

packages/ui/src/views/BrowseByFolder/index.tsx

@@ -2,10 +2,11 @@
 
 import type { DragEndEvent } from '@dnd-kit/core'
 import type { CollectionSlug, Document, FolderListViewClientProps } from 'payload'
-import type { FolderDocumentItemKey, FolderOrDocument } from 'payload/shared'
+import type { FolderDocumentItemKey } from 'payload/shared'
 
 import { useDndMonitor } from '@dnd-kit/core'
 import { getTranslation } from '@payloadcms/translations'
+import { formatFolderOrDocumentItem } from 'payload/shared'
 import React, { Fragment } from 'react'
 
 import { DroppableBreadcrumb } from '../../elements/FolderView/Breadcrumbs/index.js'
@@ -130,29 +131,17 @@ export function DefaultBrowseByFolderView(
   const onCreateSuccess = React.useCallback(
     ({ collectionSlug, doc }: { collectionSlug: CollectionSlug; doc: Document }) => {
       const collectionConfig = getEntityConfig({ collectionSlug })
-      const itemValue: FolderOrDocument['value'] = {
-        id: doc?.id,
-        _folderOrDocumentTitle: doc?.[collectionConfig.admin.useAsTitle ?? 'id'],
-        createdAt: doc?.createdAt,
-        folderID: doc?.[config.folders.fieldName],
-        updatedAt: doc?.updatedAt,
-      }
-
-      if (collectionConfig.upload) {
-        itemValue.filename = doc?.filename
-        itemValue.mimeType = doc?.mimeType
-        itemValue.url = doc?.url
-      }
-
       void addItems([
-        {
-          itemKey: `${collectionSlug}-${doc.id}`,
+        formatFolderOrDocumentItem({
+          folderFieldName: config.folders.fieldName,
+          isUpload: Boolean(collectionConfig?.upload),
           relationTo: collectionSlug,
-          value: itemValue,
-        },
+          useAsTitle: collectionConfig.admin.useAsTitle,
+          value: doc,
+        }),
       ])
     },
-    [getEntityConfig, addItems],
+    [getEntityConfig, addItems, config.folders.fieldName],
   )
 
   const selectedItemKeys = React.useMemo(() => {

packages/ui/src/views/CollectionFolder/index.tsx

@@ -2,10 +2,11 @@
 
 import type { DragEndEvent } from '@dnd-kit/core'
 import type { CollectionSlug, Document, FolderListViewClientProps } from 'payload'
-import type { FolderDocumentItemKey, FolderOrDocument } from 'payload/shared'
+import type { FolderDocumentItemKey } from 'payload/shared'
 
 import { useDndMonitor } from '@dnd-kit/core'
 import { getTranslation } from '@payloadcms/translations'
+import { formatFolderOrDocumentItem } from 'payload/shared'
 import React, { Fragment } from 'react'
 
 import { DroppableBreadcrumb } from '../../elements/FolderView/Breadcrumbs/index.js'
@@ -107,29 +108,17 @@ export function DefaultCollectionFolderView(props: FolderListViewClientProps) {
   const onCreateSuccess = React.useCallback(
     ({ collectionSlug, doc }: { collectionSlug: CollectionSlug; doc: Document }) => {
       const collectionConfig = getEntityConfig({ collectionSlug })
-      const itemValue: FolderOrDocument['value'] = {
-        id: doc?.id,
-        _folderOrDocumentTitle: doc?.[collectionConfig.admin.useAsTitle ?? 'id'],
-        createdAt: doc?.createdAt,
-        folderID: doc?.[config.folders.fieldName],
-        updatedAt: doc?.updatedAt,
-      }
-
-      if (collectionConfig.upload) {
-        itemValue.filename = doc?.filename
-        itemValue.mimeType = doc?.mimeType
-        itemValue.url = doc?.url
-      }
-
       void addItems([
-        {
-          itemKey: `${collectionSlug}-${doc.id}`,
+        formatFolderOrDocumentItem({
+          folderFieldName: config.folders.fieldName,
+          isUpload: Boolean(collectionConfig?.upload),
           relationTo: collectionSlug,
-          value: itemValue,
-        },
+          useAsTitle: collectionConfig.admin.useAsTitle,
+          value: doc,
+        }),
       ])
     },
-    [getEntityConfig, addItems],
+    [getEntityConfig, addItems, config.folders.fieldName],
   )
 
   const selectedItemKeys = React.useMemo(() => {