Skip to content

fix(ui): not showing hyphenated field values in table #12791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JarrodMFlesch merged 4 commits into from
Jun 12, 2025
Merged

fix(ui): not showing hyphenated field values in table #12791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0af1ff4
fix(ui): not showing hyphenated field values in table
JarrodMFlesch Jun 12, 2025
4b9245f
fix tabs with same issue
JarrodMFlesch Jun 12, 2025
f492bb7
fix tests
JarrodMFlesch Jun 12, 2025
d434ea5
more test selector fixes
JarrodMFlesch Jun 12, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions packages/payload/src/utilities/flattenTopLevelFields.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe('flattenFields', () => {

expect(result).toHaveLength(2)
expect(result[1].name).toBe('slug')
expect(result[1].accessor).toBe('meta-slug')
expect(result[1].accessor).toBe('meta.slug')
expect(result[1].labelWithPrefix).toBe('Meta Info > Slug')
})

Expand Down Expand Up @@ -111,7 +111,7 @@ describe('flattenFields', () => {

expect(hoisted).toHaveLength(3)
expect(hoisted[2].name).toBe('deep')
expect(hoisted[2].accessor).toBe('outer-inner-deep')
expect(hoisted[2].accessor).toBe('outer.inner.deep')
expect(hoisted[2].labelWithPrefix).toBe('Outer > Inner > Deep Field')

const nonHoisted = flattenTopLevelFields(fields)
Expand Down Expand Up @@ -198,7 +198,7 @@ describe('flattenFields', () => {

expect(hoistedResult).toHaveLength(5)
expect(hoistedResult[4].name).toBe('nestedField')
expect(hoistedResult[4].accessor).toBe('namedGroup-nestedField')
expect(hoistedResult[4].accessor).toBe('namedGroup.nestedField')
expect(hoistedResult[4].labelWithPrefix).toBe('Named Group > Nested Field')

const nonHoistedResult = flattenTopLevelFields(fields)
Expand Down Expand Up @@ -434,7 +434,7 @@ describe('flattenFields', () => {
})

expect(result).toHaveLength(2)
expect(result[1].accessor).toBe('groupInRow-nestedInRowGroup')
expect(result[1].accessor).toBe('groupInRow.nestedInRowGroup')
expect(result[1].labelWithPrefix).toBe('Group In Row > Nested In Row Group')
})

Expand Down Expand Up @@ -466,7 +466,7 @@ describe('flattenFields', () => {
})

expect(result).toHaveLength(2)
expect(result[1].accessor).toBe('groupInCollapsible-nestedInCollapsibleGroup')
expect(result[1].accessor).toBe('groupInCollapsible.nestedInCollapsibleGroup')
expect(result[1].labelWithPrefix).toBe('Group In Collapsible > Nested In Collapsible Group')
})
})
Expand Down Expand Up @@ -603,7 +603,7 @@ describe('flattenFields', () => {
})

expect(result).toHaveLength(2)
expect(result[1].accessor).toBe('groupInTab-nestedInTabGroup')
expect(result[1].accessor).toBe('groupInTab.nestedInTabGroup')
expect(result[1].labelWithPrefix).toBe('Group In Tab > Nested In Tab Group')
})

Expand Down Expand Up @@ -659,13 +659,13 @@ describe('flattenFields', () => {
})

expect(result).toHaveLength(5)
expect(result[0].accessor).toBe('tabOne-array')
expect(result[0].accessor).toBe('tabOne.array')
expect(result[0].labelWithPrefix).toBe('Tab One > array')
expect(result[1].accessor).toBe('tabOne-arrayInRow')
expect(result[1].accessor).toBe('tabOne.arrayInRow')
expect(result[1].labelWithPrefix).toBe('Tab One > arrayInRow')
expect(result[2].accessor).toBe('tabOne-textInTab')
expect(result[2].accessor).toBe('tabOne.textInTab')
expect(result[2].labelWithPrefix).toBe('Tab One > Text In Tab')
expect(result[4].accessor).toBe('tabOne-groupInTab-nestedTextInTabGroup')
expect(result[4].accessor).toBe('tabOne.groupInTab.nestedTextInTabGroup')
expect(result[4].labelWithPrefix).toBe('Tab One > Group In Tab > Nested Text In Tab Group')
})

Expand Down
6 changes: 3 additions & 3 deletions packages/payload/src/utilities/flattenTopLevelFields.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function flattenTopLevelFields<TField extends ClientField | Field>(
const nameWithPrefix =
'name' in field && field.name
? pathPrefix
? `${pathPrefix}-${field.name}`
? `${pathPrefix}.${field.name}`
: field.name
: pathPrefix

Expand Down Expand Up @@ -138,7 +138,7 @@ export function flattenTopLevelFields<TField extends ClientField | Field>(

const pathPrefixForTab = tab.name
? pathPrefix
? `${pathPrefix}-${tab.name}`
? `${pathPrefix}.${tab.name}`
: tab.name
: pathPrefix

Expand Down Expand Up @@ -191,7 +191,7 @@ export function flattenTopLevelFields<TField extends ClientField | Field>(
...(field as FlattenedField<TField>),
...(moveSubFieldsToTop &&
isHoistingFromGroup && {
accessor: pathPrefix && name ? `${pathPrefix}-${name}` : (name ?? ''),
accessor: pathPrefix && name ? `${pathPrefix}.${name}` : (name ?? ''),
labelWithPrefix: labelPrefix
? `${labelPrefix} > ${translatedLabel ?? name}`
: (translatedLabel ?? name),
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/elements/Table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const Table: React.FC<Props> = ({ appearance, columns, data }) => {
<thead>
<tr>
{activeColumns.map((col, i) => (
<th id={`heading-${col.accessor}`} key={i}>
<th id={`heading-${col.accessor.replace(/\./g, '__')}`} key={i}>
{col.Heading}
</th>
))}
Expand All @@ -52,7 +52,7 @@ export const Table: React.FC<Props> = ({ appearance, columns, data }) => {
const { accessor } = col

return (
<td className={`cell-${accessor}`} key={colIndex}>
<td className={`cell-${accessor.replace(/\./g, '__')}`} key={colIndex}>
{col.renderedCells[rowIndex]}
</td>
)
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/fields/FieldLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import './index.scss'

export const FieldLabel: React.FC<GenericLabelProps> = (props) => {
const {
as: Element = 'label',
as: ElementFromProps = 'label',
hideLocale = false,
htmlFor: htmlForFromProps,
label,
Expand All @@ -30,6 +30,9 @@ export const FieldLabel: React.FC<GenericLabelProps> = (props) => {
const { i18n } = useTranslation()
const { code, label: localLabel } = useLocale()

const Element =
ElementFromProps === 'label' ? (htmlFor ? 'label' : 'span') : ElementFromProps || 'span'

if (label) {
return (
<Element className={`field-label ${unstyled ? 'unstyled' : ''}`} htmlFor={htmlFor}>
Expand Down
3 changes: 1 addition & 2 deletions packages/ui/src/providers/TableColumns/buildColumnState/renderCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,10 @@ export function renderCell({
const accessor: string | undefined =
('accessor' in clientField ? (clientField.accessor as string) : undefined) ??
('name' in clientField ? clientField.name : undefined)
const dotAccessor = accessor?.replace(/-/g, '.')

const cellClientProps: DefaultCellComponentProps = {
...baseCellClientProps,
cellData: 'name' in clientField ? findValueFromPath(doc, dotAccessor) : undefined,
cellData: 'name' in clientField ? findValueFromPath(doc, accessor) : undefined,
link: isLinkedColumn,
rowData: doc,
}
Expand Down
6 changes: 5 additions & 1 deletion packages/ui/src/utilities/generateFieldID.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export const generateFieldID = (path: string, editDepth: number, uuid: string) => {
return `field-${path?.replace(/\./g, '__')}${editDepth > 1 ? `-${editDepth}` : ''}${uuid ? `-${uuid}` : ''}`
if (!path) {
return undefined
}

return `field-${path.replace(/\./g, '__')}${editDepth > 1 ? `-${editDepth}` : ''}${uuid ? `-${uuid}` : ''}`
}
30 changes: 15 additions & 15 deletions test/admin/e2e/list-view/e2e.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -964,7 +964,7 @@ describe('List View', () => {
hasText: exactText('Named Group > Some Text Field'),
})
.click()
await expect(page.locator('.row-1 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-1 .cell-namedGroup__someTextField')).toHaveText(
'nested group text field',
)
})
Expand Down Expand Up @@ -1036,7 +1036,7 @@ describe('List View', () => {
await expect(page.locator('.row-1 .cell-someTextField')).toHaveText('top-level text field')

// Expect nested group cell
await expect(page.locator('.row-1 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-1 .cell-namedGroup__someTextField')).toHaveText(
'nested group text field',
)
})
Expand All @@ -1050,7 +1050,7 @@ describe('List View', () => {
hasText: exactText('Named Tab > Nested Text Field In Named Tab'),
})
.click()
await expect(page.locator('.row-1 .cell-namedTab-nestedTextFieldInNamedTab')).toHaveText(
await expect(page.locator('.row-1 .cell-namedTab__nestedTextFieldInNamedTab')).toHaveText(
'nested text in named tab',
)
})
Expand Down Expand Up @@ -1422,26 +1422,26 @@ describe('List View', () => {
hasText: exactText('Named Group > Some Text Field'),
})
.click()
const upChevron = page.locator('#heading-namedGroup-someTextField .sort-column__asc')
const downChevron = page.locator('#heading-namedGroup-someTextField .sort-column__desc')
const upChevron = page.locator('#heading-namedGroup__someTextField .sort-column__asc')
const downChevron = page.locator('#heading-namedGroup__someTextField .sort-column__desc')

await upChevron.click()
await page.waitForURL(/sort=namedGroup.someTextField/)

await expect(page.locator('.row-1 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-1 .cell-namedGroup__someTextField')).toHaveText(
'<No Some Text Field>',
)
await expect(page.locator('.row-2 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-2 .cell-namedGroup__someTextField')).toHaveText(
'nested group text field',
)

await downChevron.click()
await page.waitForURL(/sort=-namedGroup.someTextField/)

await expect(page.locator('.row-1 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-1 .cell-namedGroup__someTextField')).toHaveText(
'nested group text field',
)
await expect(page.locator('.row-2 .cell-namedGroup-someTextField')).toHaveText(
await expect(page.locator('.row-2 .cell-namedGroup__someTextField')).toHaveText(
'<No Some Text Field>',
)
})
Expand All @@ -1455,29 +1455,29 @@ describe('List View', () => {
})
.click()
const upChevron = page.locator(
'#heading-namedTab-nestedTextFieldInNamedTab .sort-column__asc',
'#heading-namedTab__nestedTextFieldInNamedTab .sort-column__asc',
)
const downChevron = page.locator(
'#heading-namedTab-nestedTextFieldInNamedTab .sort-column__desc',
'#heading-namedTab__nestedTextFieldInNamedTab .sort-column__desc',
)

await upChevron.click()
await page.waitForURL(/sort=namedTab.nestedTextFieldInNamedTab/)

await expect(page.locator('.row-1 .cell-namedTab-nestedTextFieldInNamedTab')).toHaveText(
await expect(page.locator('.row-1 .cell-namedTab__nestedTextFieldInNamedTab')).toHaveText(
'<No Nested Text Field In Named Tab>',
)
await expect(page.locator('.row-2 .cell-namedTab-nestedTextFieldInNamedTab')).toHaveText(
await expect(page.locator('.row-2 .cell-namedTab__nestedTextFieldInNamedTab')).toHaveText(
'nested text in named tab',
)

await downChevron.click()
await page.waitForURL(/sort=-namedTab.nestedTextFieldInNamedTab/)

await expect(page.locator('.row-1 .cell-namedTab-nestedTextFieldInNamedTab')).toHaveText(
await expect(page.locator('.row-1 .cell-namedTab__nestedTextFieldInNamedTab')).toHaveText(
'nested text in named tab',
)
await expect(page.locator('.row-2 .cell-namedTab-nestedTextFieldInNamedTab')).toHaveText(
await expect(page.locator('.row-2 .cell-namedTab__nestedTextFieldInNamedTab')).toHaveText(
'<No Nested Text Field In Named Tab>',
)
})
Expand Down
Loading