fix(ui): appends editDepth value to radio & checkbox IDs when i…

…nside drawer (#6252)
payloadcms · May 10, 2024 · dcad500 · dcad500
1 parent bd9c06a
commit dcad500
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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')