fix: appends editDepth value to radio & checkbox IDs when insid…

…e drawer (#6181)
payloadcms · May 10, 2024 · 69c93d3 · 69c93d3
1 parent 78aa957
commit 69c93d3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
@@ -5,6 +5,7 @@ import type { Props } from './types'
 
 import { checkbox } from '../../../../../fields/validations'
 import { getTranslation } from '../../../../../utilities/getTranslation'
+import { useEditDepth } from '../../../utilities/EditDepth'
 import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import useField from '../../useField'
@@ -41,6 +42,8 @@ const Checkbox: React.FC<Props> = (props) => {
 
   const path = pathFromProps || name
 
+  const editDepth = useEditDepth()
+
   const memoizedValidate = useCallback(
     (value, options) => {
       return validate(value, { ...options, required })
@@ -62,7 +65,7 @@ const Checkbox: React.FC<Props> = (props) => {
     }
   }, [onChange, readOnly, setValue, value])
 
-  const fieldID = `field-${path.replace(/\./g, '__')}`
+  const fieldID = `field-${path.replace(/\./g, '__')}${editDepth > 1 ? `-${editDepth}` : ''}`
 
   return (
     <div

diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import type { Props } from './types'
 
 import { getTranslation } from '../../../../../../utilities/getTranslation'
+import { useEditDepth } from '../../../../utilities/EditDepth'
 import './index.scss'
 
 const baseClass = 'radio-input'
@@ -12,9 +13,11 @@ const RadioInput: React.FC<Props> = (props) => {
   const { isSelected, onChange, option, path, readOnly } = props
   const { i18n } = useTranslation()
 
+  const editDepth = useEditDepth()
+
   const classes = [baseClass, isSelected && `${baseClass}--is-selected`].filter(Boolean).join(' ')
 
-  const id = `field-${path}-${option.value}`
+  const id = `field-${path}-${option.value}${editDepth > 1 ? `-${editDepth}` : ''}`
 
   return (
     <label htmlFor={id}>

diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
@@ -1144,7 +1144,7 @@ describe('fields', () => {
 
         // 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()
@@ -1167,7 +1167,7 @@ describe('fields', () => {
 
         // 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 wait(200)
         await editLinkModal.locator('button[type="submit"]').click()
@@ -1193,7 +1193,7 @@ describe('fields', () => {
 
         // 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
@@ -1266,7 +1266,7 @@ describe('fields', () => {
         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')