fix(ui): ensures modal closes on route change (#14718)

### What?
Adds fix to ensure modal fully closes when navigating back/forwards in
the browser.

### Why?
Currently if the modal is open and you navigate back in the browser, the
modal content gets closed but the container remains visible, due to this
you cannot click anything in the admin panel.

### How?
Adds a `closeModalOnRouteChange` component as described in the
`faceless-ui` package
[here](https://facelessui.com/docs/modal/routing#closemodalonroutechange).

#### NOTE
We have a similar PR
[here](#14721). Decided to
merge efforts into this one, tests moved from other PR into this one.

Reported by client.

Author: jessrynkar

packages/ui/src/elements/CloseModalOnRouteChange/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useModal } from '@faceless-ui/modal'
+import { usePathname } from 'next/navigation.js'
+import { useEffect, useRef } from 'react'
+
+import { useEffectEvent } from '../../hooks/useEffectEvent.js'
+
+export function CloseModalOnRouteChange() {
+  const { closeAllModals } = useModal()
+  const pathname = usePathname()
+
+  const closeAllModalsEffectEvent = useEffectEvent(() => {
+    closeAllModals()
+  })
+
+  const initialRenderRef = useRef(true)
+
+  useEffect(() => {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false
+      return
+    }
+
+    closeAllModalsEffectEvent()
+  }, [pathname])
+
+  return null
+}

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

@@ -16,6 +16,7 @@ import React from 'react'
 
 import type { Theme } from '../Theme/index.js'
 
+import { CloseModalOnRouteChange } from '../../elements/CloseModalOnRouteChange/index.js'
 import { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js'
 import { NavProvider } from '../../elements/Nav/context.js'
 import { StayLoggedInModal } from '../../elements/StayLoggedIn/index.js'
@@ -101,6 +102,7 @@ export const RootProvider: React.FC<Props> = ({
                     <ScrollInfoProvider>
                       <SearchParamsProvider>
                         <ModalProvider classPrefix="payload" transTime={0} zIndex="var(--z-modal)">
+                          <CloseModalOnRouteChange />
                           <AuthProvider permissions={permissions} user={user}>
                             <PreferencesProvider>
                               <ThemeProvider theme={theme}>

test/admin-root/e2e.spec.ts

@@ -145,4 +145,16 @@ test.describe('Admin Panel (Root)', () => {
     await page.goto(`${url.admin}/custom-view`)
     await expect(page.locator('#custom-view')).toBeVisible()
   })
+
+  test('should close modal on route change', async () => {
+    await page.goto(url.create)
+    const textField = page.locator('#field-text')
+    await textField.fill('updated')
+    await page.click('a[aria-label="Account"]')
+    const modal = page.locator('div.payload__modal-container')
+    await expect(modal).toBeVisible()
+
+    await page.goBack()
+    await expect(modal).toBeHidden()
+  })
 })

test/fields-relationship/collections/Relationship/index.ts

@@ -23,6 +23,11 @@ export const Relationship: CollectionConfig = {
     ],
   },
   fields: [
+    {
+      name: 'relationToSelf',
+      relationTo: slug,
+      type: 'relationship',
+    },
     {
       name: 'relationship',
       relationTo: relationOneSlug,

test/fields-relationship/e2e.spec.ts

@@ -575,6 +575,70 @@ describe('Relationship Field', () => {
     await expect(documentDrawer).toBeVisible()
   })
 
+  test('should open document from drawer by clicking on ID Label', async () => {
+    const relatedDoc = await payload.create({
+      collection: relationOneSlug,
+      data: {
+        name: 'Drawer ID Label',
+      },
+    })
+    const doc = await payload.create({
+      collection: slug,
+      data: {
+        relationship: relatedDoc.id,
+      },
+    })
+    await payload.update({
+      collection: slug,
+      id: doc.id,
+      data: {
+        relationToSelf: doc.id,
+      },
+    })
+
+    await page.goto(url.edit(doc.id))
+    // open first drawer (self-relation)
+    const selfRelationTrigger = page.locator(
+      '#field-relationToSelf button.relationship--single-value__drawer-toggler',
+    )
+    await expect(selfRelationTrigger).toBeVisible()
+    await selfRelationTrigger.click()
+
+    const drawer1 = page.locator('[id^=doc-drawer_fields-relationship_1_]')
+    await expect(drawer1).toBeVisible()
+
+    // open nested drawer (relation field inside self-relation)
+    const relationshipDrawerTrigger = drawer1.locator(
+      '#field-relationship button.relationship--single-value__drawer-toggler',
+    )
+    await expect(relationshipDrawerTrigger).toBeVisible()
+    await relationshipDrawerTrigger.click()
+
+    const drawer2 = page.locator('[id^=doc-drawer_relation-one_2_]')
+    await expect(drawer2).toBeVisible()
+
+    const idLabel = drawer2.locator('.id-label')
+    await expect(idLabel).toBeVisible()
+    await idLabel.locator('a').click()
+
+    const closedModalLocator = page.locator(
+      '.payload__modal-container.payload__modal-container--exitDone',
+    )
+
+    await expect(closedModalLocator).toHaveCount(1)
+
+    await Promise.all([
+      payload.delete({
+        collection: relationOneSlug,
+        id: relatedDoc.id,
+      }),
+      payload.delete({
+        collection: slug,
+        id: doc.id,
+      }),
+    ])
+  })
+
   test('should open document drawer and append newly created docs onto the parent field', async () => {
     await page.goto(url.edit(docWithExistingRelations.id))
     await wait(300)

test/fields-relationship/payload-types.ts

@@ -81,6 +81,7 @@ export interface Config {
     podcasts: Podcast;
     'mixed-media': MixedMedia;
     'versioned-relationship-field': VersionedRelationshipField;
+    'payload-kv': PayloadKv;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -102,6 +103,7 @@ export interface Config {
     podcasts: PodcastsSelect<false> | PodcastsSelect<true>;
     'mixed-media': MixedMediaSelect<false> | MixedMediaSelect<true>;
     'versioned-relationship-field': VersionedRelationshipFieldSelect<false> | VersionedRelationshipFieldSelect<true>;
+    'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -110,6 +112,7 @@ export interface Config {
   db: {
     defaultIDType: string;
   };
+  fallbackLocale: ('false' | 'none' | 'null') | false | null | 'en' | 'en'[];
   globals: {};
   globalsSelect: {};
   locale: 'en';
@@ -145,6 +148,7 @@ export interface UserAuthOperations {
  */
 export interface FieldsRelationship {
   id: string;
+  relationToSelf?: (string | null) | FieldsRelationship;
   relationship?: (string | null) | RelationOne;
   relationshipHasMany?: (string | RelationOne)[] | null;
   relationshipMultiple?:
@@ -381,6 +385,23 @@ export interface VersionedRelationshipField {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv".
+ */
+export interface PayloadKv {
+  id: string;
+  key: string;
+  data:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -519,6 +540,7 @@ export interface PayloadMigration {
  * via the `definition` "fields-relationship_select".
  */
 export interface FieldsRelationshipSelect<T extends boolean = true> {
+  relationToSelf?: T;
   relationship?: T;
   relationshipHasMany?: T;
   relationshipMultiple?: T;
@@ -669,6 +691,14 @@ export interface VersionedRelationshipFieldSelect<T extends boolean = true> {
   createdAt?: T;
   _status?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv_select".
+ */
+export interface PayloadKvSelect<T extends boolean = true> {
+  key?: T;
+  data?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".