fix(plugin-multi-tenant): apply tenant on confirm (#17350)

Identical to #17348, back-ported for 3.x.

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: JarrodMFlesch

packages/plugin-multi-tenant/src/components/AssignTenantFieldModal/index.client.tsx

@@ -47,8 +47,8 @@ export const AssignTenantFieldTrigger: React.FC = () => {
 }
 
 export const AssignTenantFieldModal: React.FC<{
-  afterModalClose: () => void
-  afterModalOpen: () => void
+  afterModalClose?: () => void
+  afterModalOpen?: () => void
   children: React.ReactNode
   onCancel?: () => void
   onConfirm?: () => void

packages/plugin-multi-tenant/src/components/TenantField/index.client.tsx

@@ -1,8 +1,11 @@
 'use client'
 
+import type { FieldType } from '@payloadcms/ui'
 import type { RelationshipFieldClientProps } from 'payload'
 
 import {
+  FieldContext,
+  FieldPathContext,
   Pill,
   RelationshipField,
   useDocumentInfo,
@@ -13,6 +16,8 @@ import {
 } from '@payloadcms/ui'
 import React from 'react'
 
+import type { TenantValue } from '../../types.js'
+
 import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'
 import {
   AssignTenantFieldModal,
@@ -29,77 +34,84 @@ type Props = {
 
 export const TenantField = ({ debug, unique, ...fieldArgs }: Props) => {
   const { entityType, options, selectedTenantID, setEntityType, setTenant } = useTenantSelection()
-  const { setValue, showError, value } = useField<(number | string)[] | (number | string)>()
-  const modified = useFormModified()
-  const { isValid: isFormValid, setModified } = useForm()
+  const tenantField = useField<TenantValue>()
+  const { setValue, showError, value } = tenantField
+  const { isValid: isFormValid } = useForm()
   const { id: docID, collectionSlug } = useDocumentInfo()
   const { isModalOpen, openModal } = useModal()
   const isEditManyModalOpen = collectionSlug
     ? isModalOpen(`edit-${collectionSlug}`) || isModalOpen(`edit-${collectionSlug}-bulk-uploads`)
     : false
-  const isConfirmingRef = React.useRef<boolean>(false)
-  const prevModified = React.useRef(modified)
-  const prevValue = React.useRef<typeof value>(value)
+  const [modalValue, setModalValue] = React.useState<TenantValue | undefined>(value)
+  const localTenantField = React.useMemo<FieldType<TenantValue>>(
+    () => ({
+      ...tenantField,
+      initialValue: modalValue,
+      setValue: (nextValue) => {
+        setModalValue(nextValue as TenantValue | undefined)
+      },
+      value: modalValue as TenantValue,
+    }),
+    [modalValue, tenantField],
+  )
   const showField =
     (options.length > 1 && !fieldArgs.field.admin?.hidden && !fieldArgs.field.hidden) || debug
 
-  const onConfirm = React.useCallback(() => {
-    isConfirmingRef.current = true
-  }, [])
-
-  const afterModalOpen = React.useCallback(() => {
-    prevModified.current = modified
-    prevValue.current = value
-  }, [modified, value])
-
-  const afterModalClose = React.useCallback(() => {
-    let didChange = true
-    if (isConfirmingRef.current) {
-      // did the values actually change?
-      if (fieldArgs.field.hasMany) {
-        const prev = (prevValue.current || []) as (number | string)[]
-        const newValue = (value || []) as (number | string)[]
-        if (prev.length !== newValue.length) {
-          didChange = true
-        } else {
-          const allMatch = newValue.every((val) => prev.includes(val))
-          if (allMatch) {
-            didChange = false
-          }
-        }
-      } else if (value === prevValue.current) {
-        didChange = false
+  function getTenantIDToSelect({
+    selectedTenantID,
+    value,
+  }: {
+    selectedTenantID: number | string | undefined
+    value: TenantValue | undefined
+  }): number | string | undefined {
+    if (Array.isArray(value)) {
+      if (!value.length) {
+        return undefined
       }
 
-      if (didChange) {
-        prevModified.current = true
-        prevValue.current = value
+      if (!selectedTenantID || !value.includes(selectedTenantID)) {
+        return value[0]
       }
+
+      return undefined
     }
 
-    setValue(prevValue.current, true)
-    setModified(prevModified.current)
+    if (value && selectedTenantID !== value) {
+      return value
+    }
+
+    return undefined
+  }
+
+  const syncTenantSelectionFromValue = React.useCallback(
+    (tenantValue: TenantValue | undefined) => {
+      const tenantID = getTenantIDToSelect({ selectedTenantID, value: tenantValue })
+
+      if (tenantID) {
+        setTenant({ id: tenantID, refresh: false })
+      }
+    },
+    [selectedTenantID, setTenant],
+  )
+
+  const onConfirm = React.useCallback(() => {
+    if (hasTenantValueChanged({ hasMany: fieldArgs.field.hasMany, modalValue, value })) {
+      setValue(modalValue)
+      syncTenantSelectionFromValue(modalValue)
+    }
+  }, [fieldArgs.field.hasMany, modalValue, setValue, syncTenantSelectionFromValue, value])
 
-    isConfirmingRef.current = false
-  }, [setValue, setModified, value, fieldArgs.field.hasMany])
+  const afterModalOpen = React.useCallback(() => {
+    setModalValue(value)
+  }, [value])
 
   React.useEffect(() => {
     if (!entityType) {
       setEntityType(unique ? 'global' : 'document')
     } else {
       // unique documents are controlled from the global TenantSelector
-      if (!unique && value) {
-        if (Array.isArray(value)) {
-          if (value.length) {
-            if (!selectedTenantID) {
-              setTenant({ id: value[0], refresh: false })
-            } else if (!value.includes(selectedTenantID)) {
-              setTenant({ id: value[0], refresh: false })
-            }
-          }
-        } else if (selectedTenantID !== value) {
-          setTenant({ id: value, refresh: false })
-        }
+      if (!unique) {
+        syncTenantSelectionFromValue(value)
       }
     }
 
@@ -108,7 +120,7 @@ export const TenantField = ({ debug, unique, ...fieldArgs }: Props) => {
         setEntityType(undefined)
       }
     }
-  }, [unique, options, selectedTenantID, setTenant, value, setEntityType, entityType])
+  }, [entityType, setEntityType, syncTenantSelectionFromValue, unique, value])
 
   React.useEffect(() => {
     if (unique || debug || isEditManyModalOpen) {
@@ -138,12 +150,12 @@ export const TenantField = ({ debug, unique, ...fieldArgs }: Props) => {
     if (!unique) {
       /** Editing a non-global tenant document */
       return (
-        <AssignTenantFieldModal
-          afterModalClose={afterModalClose}
-          afterModalOpen={afterModalOpen}
-          onConfirm={onConfirm}
-        >
-          <TenantRelationshipField fieldArgs={fieldArgs} unique={unique} />
+        <AssignTenantFieldModal afterModalOpen={afterModalOpen} onConfirm={onConfirm}>
+          <FieldPathContext value={tenantField.path}>
+            <FieldContext value={localTenantField}>
+              <TenantRelationshipField fieldArgs={fieldArgs} unique={unique} />
+            </FieldContext>
+          </FieldPathContext>
         </AssignTenantFieldModal>
       )
     }
@@ -154,6 +166,28 @@ export const TenantField = ({ debug, unique, ...fieldArgs }: Props) => {
   return null
 }
 
+const hasTenantValueChanged = ({
+  hasMany,
+  modalValue,
+  value,
+}: {
+  hasMany?: boolean
+  modalValue: TenantValue | undefined
+  value: TenantValue | undefined
+}): boolean => {
+  if (hasMany) {
+    const currentValue = (value || []) as (number | string)[]
+    const nextValue = (modalValue || []) as (number | string)[]
+
+    return (
+      currentValue.length !== nextValue.length ||
+      nextValue.some((nextValueItem) => !currentValue.includes(nextValueItem))
+    )
+  }
+
+  return value !== modalValue
+}
+
 const TenantRelationshipField: React.FC<{
   debug?: boolean
   fieldArgs: RelationshipFieldClientProps

packages/plugin-multi-tenant/src/types.ts

@@ -11,6 +11,8 @@ import type {
   TypedUser,
 } from 'payload'
 
+export type TenantValue = (number | string)[] | (number | string)
+
 export type MultiTenantPluginConfig<ConfigTypes = unknown> = {
   /**
    * After a tenant is deleted, the plugin will attempt to clean up related documents

test/plugin-multi-tenant/e2e.spec.ts

@@ -352,14 +352,39 @@ test.describe('Multi Tenant', () => {
         urlUtil: menuItemsURL,
       })
 
-      await selectDocumentTenant({
-        action: 'cancel',
+      await closeNav(page)
+      await openAssignTenantModal({ page, payload })
+      await selectInput({
         page,
-        payload,
-        tenant: 'Steel Cat',
+        multiSelect: false,
+        option: 'Steel Cat',
+        selectLocator: page.locator('.tenantField'),
       })
 
       await expect(page.locator('#action-save')).toBeDisabled()
+      await expect
+        .poll(async () => {
+          return await getSelectedTenantFilterName({ page, payload })
+        })
+        .toBe('Blue Dog')
+
+      const assignTenantModal = page.locator('#assign-tenant-field-modal')
+      await assignTenantModal.locator('button', { hasText: 'Cancel' }).click()
+      await expect(assignTenantModal).toBeHidden()
+
+      await expect(page.locator('#action-save')).toBeDisabled()
+
+      await closeNav(page)
+      await openAssignTenantModal({ page, payload })
+      await expect
+        .poll(async () =>
+          getSelectInputValue({
+            multiSelect: false,
+            selectLocator: page.locator('.tenantField'),
+            selectType: 'relationship',
+          }),
+        )
+        .toBe('Blue Dog')
 
       await page.goto(menuItemsURL.list)
       await expect
@@ -386,12 +411,33 @@ test.describe('Multi Tenant', () => {
         urlUtil: menuItemsURL,
       })
 
-      await selectDocumentTenant({
+      await closeNav(page)
+      await openAssignTenantModal({ page, payload })
+      await selectInput({
         page,
-        payload,
-        tenant: 'Steel Cat',
+        multiSelect: false,
+        option: 'Steel Cat',
+        selectLocator: page.locator('.tenantField'),
       })
 
+      await expect(page.locator('#action-save')).toBeDisabled()
+      await expect
+        .poll(async () => {
+          return await getSelectedTenantFilterName({ page, payload })
+        })
+        .toBe('Blue Dog')
+
+      const assignTenantModal = page.locator('#assign-tenant-field-modal')
+      await assignTenantModal.locator('button', { hasText: 'Confirm' }).click()
+      await expect(assignTenantModal).toBeHidden()
+
+      await expect(page.locator('#action-save')).toBeEnabled()
+      await expect
+        .poll(async () => {
+          return await getSelectedTenantFilterName({ page, payload })
+        })
+        .toBe('Steel Cat')
+
       await saveDocAndAssert(page)
     })
 
@@ -1044,7 +1090,12 @@ async function openAssignTenantModal({
   // Open the assign tenant modal
   const docControlsPopup = page.locator('.popup__content')
   const docControlsButton = page.locator('.doc-controls__popup .popup-button')
-  await expect(docControlsButton).toBeVisible()
+
+  if (!(await docControlsButton.isVisible())) {
+    await expect(assignTenantModal).toBeVisible()
+    return
+  }
+
   await docControlsButton.click()
 
   const assignTenantButtonLocator = docControlsPopup.locator('button', { hasText: 'Assign Site' })