tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): appends editDepth value to radio & checkbox IDs when inside drawer (#6252)

Browse Source
This commit is contained in:
Patrik
2024-05-10 11:56:24 -04:00
committed by GitHub
parent bd9c06a99d
commit dcad5003f5
5 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/fields/Checkbox/index.tsx
View File

@@ -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

5
packages/ui/src/fields/RadioGroup/Radio/index.tsx
View File

@@ -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}>

4
packages/ui/src/forms/FieldLabel/index.tsx
View File

@@ -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()

4
packages/ui/src/utilities/generateFieldID.ts
View File

@@ -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}` : ''}`
}

8
test/fields/collections/RichText/e2e.spec.ts
View File

@@ -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')