From dcad5003f5dfe2fba513a3183319aba5bc0e9eb8 Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Fri, 10 May 2024 11:56:24 -0400
Subject: [PATCH] fix(ui): appends `editDepth` value to `radio` & `checkbox`
 IDs when inside drawer (#6252)

---
 packages/ui/src/fields/Checkbox/index.tsx         | 5 ++++-
 packages/ui/src/fields/RadioGroup/Radio/index.tsx | 5 ++++-
 packages/ui/src/forms/FieldLabel/index.tsx        | 4 +++-
 packages/ui/src/utilities/generateFieldID.ts      | 4 ++--
 test/fields/collections/RichText/e2e.spec.ts      | 8 ++++----
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx
index 41d207451..7f5ccb4bb 100644
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -4,6 +4,7 @@ import type { ClientValidate } from 'payload/types'
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { FieldError } from '@payloadcms/ui/forms/FieldError'
 import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React, { useCallback } from 'react'
 
 import type { CheckboxFieldProps } from './types.js'
@@ -48,6 +49,8 @@ const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
 
   const { uuid } = useForm()
 
+  const editDepth = useEditDepth()
+
   const memoizedValidate: ClientValidate = useCallback(
     (value, options) => {
       if (typeof validate === 'function') {
@@ -75,7 +78,7 @@ const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
 
   const checked = checkedFromProps || Boolean(value)
 
-  const fieldID = id || generateFieldID(path, uuid)
+  const fieldID = id || generateFieldID(path, editDepth, uuid)
 
   return (
     <div
diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.tsx b/packages/ui/src/fields/RadioGroup/Radio/index.tsx
index f3c2e806e..baa18fcca 100644
--- a/packages/ui/src/fields/RadioGroup/Radio/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/Radio/index.tsx
@@ -2,6 +2,7 @@
 import type { OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React from 'react'
 
 import type { OnChange } from '../index.js'
@@ -22,7 +23,9 @@ export const Radio: React.FC<{
   const { isSelected, onChange, option, path, uuid } = props
   const { i18n } = useTranslation()
 
-  const id = `field-${path}-${option.value}${uuid ? `-${uuid}` : ''}`
+  const editDepth = useEditDepth()
+
+  const id = `field-${path}-${option.value}${editDepth > 1 ? `-${editDepth}` : ''}${uuid ? `-${uuid}` : ''}`
 
   return (
     <label htmlFor={id}>
diff --git a/packages/ui/src/forms/FieldLabel/index.tsx b/packages/ui/src/forms/FieldLabel/index.tsx
index 08dbec3df..94f41ae92 100644
--- a/packages/ui/src/forms/FieldLabel/index.tsx
+++ b/packages/ui/src/forms/FieldLabel/index.tsx
@@ -3,6 +3,7 @@
 import type { LabelProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React from 'react'
 
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -22,7 +23,8 @@ const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
 
   const { uuid } = useForm()
   const { path } = useFieldProps()
-  const htmlFor = htmlForFromProps || generateFieldID(path, uuid)
+  const editDepth = useEditDepth()
+  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)
 
   const { i18n } = useTranslation()
 
diff --git a/packages/ui/src/utilities/generateFieldID.ts b/packages/ui/src/utilities/generateFieldID.ts
index 240aa9e46..548055e11 100644
--- a/packages/ui/src/utilities/generateFieldID.ts
+++ b/packages/ui/src/utilities/generateFieldID.ts
@@ -1,3 +1,3 @@
-export const generateFieldID = (path: string, uuid: string) => {
-  return `field-${path?.replace(/\./g, '__')}${uuid ? `-${uuid}` : ''}`
+export const generateFieldID = (path: string, editDepth: number, uuid: string) => {
+  return `field-${path?.replace(/\./g, '__')}${editDepth > 1 ? `-${editDepth}` : ''}${uuid ? `-${uuid}` : ''}`
 }
diff --git a/test/fields/collections/RichText/e2e.spec.ts b/test/fields/collections/RichText/e2e.spec.ts
index fc921c4ff..bdc589462 100644
--- a/test/fields/collections/RichText/e2e.spec.ts
+++ b/test/fields/collections/RichText/e2e.spec.ts
@@ -115,7 +115,7 @@ describe('Rich Text', () => {
 
       // Fill values and click Confirm
       await editLinkModal.locator('#field-text').fill('link text')
-      await editLinkModal.locator('label[for="field-linkType-custom"]').click()
+      await editLinkModal.locator('label[for="field-linkType-custom-2"]').click()
       await editLinkModal.locator('#field-url').fill('')
       await wait(200)
       await editLinkModal.locator('button[type="submit"]').click()
@@ -141,7 +141,7 @@ describe('Rich Text', () => {
       await wait(400)
       // Fill values and click Confirm
       await editLinkModal.locator('#field-text').fill('link text')
-      await editLinkModal.locator('label[for="field-linkType-custom"]').click()
+      await editLinkModal.locator('label[for="field-linkType-custom-2"]').click()
       await editLinkModal.locator('#field-url').fill('https://payloadcms.com')
       await editLinkModal.locator('button[type="submit"]').click()
       await expect(editLinkModal).toBeHidden()
@@ -170,7 +170,7 @@ describe('Rich Text', () => {
 
       // Fill values and click Confirm
       await editLinkModal.locator('#field-text').fill('link text')
-      await editLinkModal.locator('label[for="field-linkType-internal"]').click()
+      await editLinkModal.locator('label[for="field-linkType-internal-2"]').click()
       await editLinkModal.locator('#field-doc .rs__control').click()
       await page.keyboard.type('dev@')
       await editLinkModal
@@ -246,7 +246,7 @@ describe('Rich Text', () => {
       const editLinkModal = page.locator('[id^=drawer_1_rich-text-link-]')
       await expect(editLinkModal).toBeVisible()
 
-      await editLinkModal.locator('label[for="field-linkType-internal"]').click()
+      await editLinkModal.locator('label[for="field-linkType-internal-2"]').click()
       await editLinkModal.locator('.relationship__wrap .rs__control').click()
 
       const menu = page.locator('.relationship__wrap .rs__menu')