fix(ui): ensures list drawer does not change underlying step nav (#10339

)

When opening the list drawer, such as when selecting an existing upload,
the underlying step nav of the document view changes but shouldn't.

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

@@ -163,7 +163,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
   ])
 
   useEffect(() => {
-    if (drawerDepth <= 1) {
+    if (!drawerDepth) {
       setStepNav([
         {
           label: labels?.plural,

test/admin/collections/Posts.ts

@@ -3,7 +3,7 @@ import type { CollectionConfig } from 'payload'
 import { slateEditor } from '@payloadcms/richtext-slate'
 
 import { slugPluralLabel, slugSingularLabel } from '../shared.js'
-import { postsCollectionSlug } from '../slugs.js'
+import { postsCollectionSlug, uploadCollectionSlug } from '../slugs.js'
 
 export const Posts: CollectionConfig = {
   slug: postsCollectionSlug,
@@ -182,6 +182,11 @@ export const Posts: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'upload',
+      type: 'upload',
+      relationTo: uploadCollectionSlug,
+    },
     {
       name: 'hiddenField',
       type: 'text',

test/admin/e2e/document-view/e2e.spec.ts

@@ -262,6 +262,28 @@ describe('Document View', () => {
     })
   })
 
+  describe('breadcrumbs', () => {
+    test('List drawer should not effect underlying breadcrumbs', async () => {
+      await navigateToDoc(page, postsUrl)
+
+      expect(await page.locator('.step-nav.app-header__step-nav a').nth(1).innerText()).toBe(
+        'Posts',
+      )
+
+      await page.locator('#field-upload button.upload__listToggler').click()
+      await expect(page.locator('[id^=list-drawer_1_]')).toBeVisible()
+      await wait(100) // wait for the component to re-render
+
+      await expect(
+        page.locator('.step-nav.app-header__step-nav .step-nav__last'),
+      ).not.toContainText('Uploads')
+
+      expect(await page.locator('.step-nav.app-header__step-nav a').nth(1).innerText()).toBe(
+        'Posts',
+      )
+    })
+  })
+
   describe('custom document views', () => {
     test('collection — should render custom tab view', async () => {
       await page.goto(customViewsURL.create)