fix(admin): render multiSelect fields as checkbox group#206
fix(admin): render multiSelect fields as checkbox group#206ascorbic merged 12 commits intoemdash-cms:mainfrom
Conversation
…xt input The FieldRenderer switch was missing a case for "multiSelect", causing it to fall through to the default text input. Adds a checkbox group renderer using the Kumo Checkbox component, with tests covering rendering and checked state from existing values. Closes emdash-cms#204
🦋 Changeset detectedLatest commit: c0c71e6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
All contributors have signed the CLA ✍️ ✅ |
|
I have read the CLA Document and I hereby sign the CLA |
|
recheck |
Adds proper horizontal spacing between checkbox options using flex-wrap with gap utilities instead of cramped space-y-1 layout.
@emdash-cms/admin
@emdash-cms/auth
@emdash-cms/blocks
@emdash-cms/cloudflare
emdash
create-emdash
@emdash-cms/gutenberg-to-portable-text
@emdash-cms/x402
@emdash-cms/plugin-ai-moderation
@emdash-cms/plugin-atproto
@emdash-cms/plugin-audit-log
@emdash-cms/plugin-color
@emdash-cms/plugin-embeds
@emdash-cms/plugin-forms
@emdash-cms/plugin-webhook-notifier
commit: |
BenjaminPrice
left a comment
BenjaminPrice
left a comment
There was a problem hiding this comment.
Tested scenarios
Verified that a multiSelect field renders as a checkbox group with the expected options.
Verified that selecting checkbox values and saving persists the correct selections.
Bugs
Unchecking a previously selected multi-select item, then saving, does not persist the change. The page re-renders with the item still checked.
Nits
A unit test covering checkbox toggle behavior is missing. Simulating a click on a checkbox and asserting the updated array value (e.g., ["news"] becoming ["news", "tech"]) would catch regressions in the change handler.
| ); | ||
| } | ||
|
|
||
| case "multiSelect": { |
There was a problem hiding this comment.
Nit
field.options?.map silently renders an empty group if a multiSelect field is defined without options. This is acceptably defensive, but a schema-level validation requiring options on multiSelect fields would be more robust.
After save or autosave, the draft revision query was never invalidated. For autosave (skipRevision), the revision is updated in place with the same ID, so the stale cached revision data would overwrite the form via the sync effect, reverting the user's changes. Also adds tests for multiSelect checkbox toggle behavior and JSON array round-tripping through the content repository.
Overlapping PRsThis PR modifies files that are also changed by other open PRs:
This may cause merge conflicts or duplicated work. A maintainer will coordinate. |
BenjaminPrice
left a comment
BenjaminPrice
left a comment
There was a problem hiding this comment.
Solid fix that correctly renders multiSelect fields as a checkbox group; all tested scenarios pass.
Tested scenarios
- multiSelect field renders as checkboxes in the admin UI
- Checking values and saving persists the selection correctly
- Unchecking a value and saving reflects the updated selection
- Unchecking all values saves an empty array
- Autosave preserves multiSelect changes without data loss
- multiSelect field with no options defined renders gracefully without errors
|
Happy to contribute |
3 participants
What does this PR do?
The
FieldRendererswitch inContentEditor.tsxhad nocase "multiSelect", so multiSelect custom fields fell through to the default case and rendered as plain text<input>elements. This adds a checkbox group renderer using the KumoCheckboxcomponent.Closes #204
Type of change
Checklist
pnpm typecheckpassespnpm --silent lint:json | jq '.diagnostics | length'returns 0pnpm testpasses (or targeted tests for my change)pnpm formathas been runAI-generated code disclosure
Screenshots / test output
All 3198 tests pass across all packages (admin: 710, core: 2095, cloudflare: 127, auth: 41, blocks: 60, gutenberg-to-portable-text: 100, marketplace: 48, x402: 17).