Skip to content

fix(plugin-forms): make required selects start unanswered - #4345

Draft
Chiji1108 wants to merge 2 commits into
emdash-cms:mainfrom
Chiji1108:fix/forms-required-select-placeholder
Draft

Chiji1108 wants to merge 2 commits into
emdash-cms:mainfrom
Chiji1108:fix/forms-required-select-placeholder

Conversation

@Chiji1108

Copy link
Copy Markdown
Contributor

What does this PR do?

A select field marked required can never fail validation. FormEmbed renders only the
field's options, so the browser preselects the first one; the visitor can submit without
touching the field and the submission records the first option as their answer. On our recruit
form, a required "desired position" select silently recorded the first position for every
applicant who skipped it.

For a required select whose defaultValue does not match one of its options, FormEmbed now
renders an empty-valued first option. The HTML spec treats that as the select's placeholder label
option, so the select reports valueMissing until the visitor picks something; the plugin's client
validation and the server (which already rejects an empty required value) both catch it. The empty
option shows the field's placeholder when one is set. Optional selects, and selects with a
matching default, render exactly as before.

No existing issue. I found this while moving our site to EmDash.

Type of change

  • Bug fix

Your connection to this change

  • I use EmDash and ran into the problem this PR addresses

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm lint passes
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes
  • I have added and reviewed the user-facing changeset
  • I have included screenshots below if this PR changes the UI

AI assistance disclosure

  • This PR includes AI-generated code or text — model/tool: Claude Code (Claude Opus 5.5)

Screenshots / test output

A required select (希望職種, placeholder 選択してください) on first load, rendered from each branch's FormEmbed.astro and client script with the plugin's stylesheet:

Before After
Required select on main on first load: the first option 薬剤師 is already selected Required select on this branch on first load: it shows the placeholder 選択してください
Submitting without choosing, on this branch

Submitting on this branch without choosing a position: the browser's own message リスト内の項目を選択してください。 appears under the select and no request is sent

tests/form-embed-select.render.test.ts renders four selects: required without default, required
with a placeholder, required with a default, optional. Before the fix the first two fail (first
option is tokyo, not the empty option), and the last two pass as controls
(Tests 2 failed | 2 passed (4)). With the fix: Tests 4 passed (4); the forms package suite
passes (17 files, 91 tests).

Note for reviewers: the admin field editor does not expose placeholder today, so the empty
option is blank unless the form was created through the API or a seed. Exposing it, and an empty
option for optional selects, would be behaviour changes I left out of this fix.

🤖 Generated with Claude Code

Chiji1108 and others added 2 commits October 22, 2026 13:04
Fails until a required select without a default renders an empty first
option.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A select with no empty option always has a value: the browser selects
the first option, so `required` on a select field could never fail and
every submission recorded that first option as if the visitor had chosen
it.

Render an empty-valued first option for a required select whose default
does not match one of its options. The HTML spec treats it as the
select's placeholder label option, so native and plugin validation report
the field as missing until the visitor picks one, and the server already
rejects an empty required value. The option shows the field's
`placeholder` when set. Optional selects and selects with a default are
unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Oct 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7e1ff91

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@emdash-cms/plugin-forms Patch

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant