Skip to content

Fix column layout null validation and error display#1090

Open
busbyk wants to merge 2 commits into
mainfrom
fix/column-layout-null
Open

Fix column layout null validation and error display#1090
busbyk wants to merge 2 commits into
mainfrom
fix/column-layout-null

Conversation

@busbyk
Copy link
Copy Markdown
Collaborator

@busbyk busbyk commented May 26, 2026

Description

Pages created during the initial production seed had null values for their content block layout fields. This caused a validation error on save, and the custom ColumnLayoutPicker component didn't display the error or allow fixing the value.

Related Issues

Fixes #1086

Key Changes

  • Self-healing hook (src/blocks/Content/hooks/healColumnLayout.ts): A beforeChange field hook that auto-fixes null/invalid layout values to a sensible default matching the current column count
  • Error display (src/components/ColumnLayoutPicker/index.tsx): The custom component now uses showError/errorMessage from Payload's useField hook to display validation errors inline
  • UI auto-heal: Added a useEffect that detects null values on mount and auto-selects a valid layout option matching the column count
  • Removed the TODO comment about error display since it's now fixed
  • Added 9 unit tests for the healing hook

How to test

  1. If you have a page with a null column layout (from early seed data), open it in the admin panel
  2. The layout picker should auto-select a valid option
  3. Save — should succeed without validation error
  4. Run pnpm test -- __tests__/server/healColumnLayout.server.test.ts

Screenshots / Demo video

https://www.loom.com/share/d8d56a158c404736b0a8adea17a15dea

Migration Explanation

No migration needed — hook and UI logic only.

🤖 Generated with Claude Code

Add self-healing beforeChange hook that auto-fixes null/invalid layout
values to a sensible default matching the current column count. Fix the
ColumnLayoutPicker custom component to display validation errors and
auto-heal null values in the UI on mount.

Fixes #1086

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use @ts-expect-error with partial mock pattern instead of `as` casts,
matching the project's lint rules and existing test conventions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

Preview deployment: https://fixxcolumn-layout-null.preview.avy-fx.org

@busbyk busbyk requested a review from rchlfryn May 26, 2026 20:13
@busbyk busbyk marked this pull request as ready for review May 26, 2026 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cannot set column layout when value is set to null

2 participants