refactor: conditionally inserting invalid message depending on validity by sarahbrng · Pull Request #5850 · db-ux-design-system/core-web

sarahbrng · 2026-01-21T12:31:06Z

Proposed changes

Fix Form Component Validation Message Display

Problem

Form components displayed placeholder validation messages ("TODO: Add an invalidMessage") even when validation wasn't active. Messages appeared with display: none (hidden but present in DOM), creating unnecessary DOM nodes and potential accessibility concerns.

Root Cause

Premature initialization of _invalidMessage in onMount() and redundant onUpdate() hooks caused validation messages to be computed and rendered before actual validation occurred.

Solution

Removed eager _invalidMessage initialization from onMount()
Eliminated redundant onUpdate() validation message hooks
Moved message computation to handleValidation() for lazy evaluation
Removed SCSS display: none workarounds

Validation messages now only appear when validation actually runs.

resolves #5285

Types of changes

Bugfix (non-breaking change that fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (improvements to existing components or architectural decisions)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/5285-describe-required-fields-that-add-todo-placeholder-elements-when-omitted

…mponents

changeset-bot · 2026-01-21T12:31:11Z

🦋 Changeset detected

Latest commit: cd130cc

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

This PR includes changesets to release 10 packages

Name	Type
@db-ux/ngx-core-components	Patch
@db-ux/react-core-components	Patch
@db-ux/wc-core-components	Patch
@db-ux/v-core-components	Patch
@db-ux/core-foundations	Patch
@db-ux/core-components	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	Patch
@db-ux/core-eslint-plugin	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

mfranzke · 2026-01-21T13:37:14Z

instead of introducing the condition, should we question the TODO message itself? Or in other words, if we introduce this condition, the TODO message wouldn't appear any more, would it? Than we could as well talk about that message itself.

that was a misunderstanding.

packages/components/src/components/select/select.lite.tsx

…form components

…components

mfranzke · 2026-01-22T13:05:58Z

@sarahbrng is there CSS code that could get removed by this change ?

packages/components/src/components/checkbox/checkbox.lite.tsx

packages/components/src/styles/internal/_form-components.scss

…placeholder-elements-when-omitted

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…placeholder-elements-when-omitted

…placeholder-elements-when-omitted Resolved merge conflicts: - Accepted main's version of all custom-select screenshot files (6 files) - Binary PNG files cannot be automatically merged - Screenshots will be regenerated during next visual regression test run

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…d-fields-that-add-todo-placeholder-elements-when-omitted # Conflicts: # __snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png # __snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png # __snapshots__/custom-select/showcase/chromium-highContrast/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png # __snapshots__/custom-select/showcase/chromium/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png # __snapshots__/custom-select/showcase/firefox/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png # __snapshots__/custom-select/showcase/mobile-chrome/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png # __snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png # __snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png # __snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png # __snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png # __snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png # __snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png # __snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # packages/components/src/components/checkbox/checkbox.lite.tsx # packages/components/src/components/input/input.lite.tsx # packages/components/src/components/select/select.lite.tsx # packages/components/src/components/switch/switch.lite.tsx # packages/components/src/components/textarea/textarea.lite.tsx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…placeholder-elements-when-omitted

Copilot

Pull request overview

This PR removes placeholder "TODO" validation messages from form components by conditionally rendering invalid messages only when validation is actually active.

Changes:

Removed DEFAULT_INVALID_MESSAGE and DEFAULT_VALID_MESSAGE constants that contained placeholder text
Added hasInvalidState() method to validation state types
Wrapped invalid message rendering in <Show when={state.hasInvalidState()}> conditionals across 6 components
Removed eager _invalidMessage initialization from onMount() and redundant onUpdate() hooks
Updated test snapshots to reflect removed placeholder text

Reviewed changes

Copilot reviewed 14 out of 23 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/components/src/shared/model.ts	Added `hasInvalidState()` method to `FromValidState` type
packages/components/src/shared/constants.ts	Removed `DEFAULT_INVALID_MESSAGE` and `DEFAULT_VALID_MESSAGE` placeholder constants
packages/components/src/components/textarea/textarea.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
packages/components/src/components/input/input.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
packages/components/src/components/select/select.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
packages/components/src/components/checkbox/checkbox.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
packages/components/src/components/switch/switch.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
packages/components/src/components/custom-select/custom-select.lite.tsx	Refactored to conditionally render invalid messages, removed eager initialization
snapshots/*.png	Updated visual regression test snapshots
snapshots/*.yaml	Updated accessibility tree snapshots removing placeholder text

packages/components/src/components/custom-select/custom-select.lite.tsx

packages/components/src/components/switch/switch.lite.tsx

packages/components/src/shared/constants.ts

packages/components/src/components/textarea/textarea.lite.tsx

packages/components/src/components/input/input.lite.tsx

packages/components/src/components/select/select.lite.tsx

packages/components/src/components/checkbox/checkbox.lite.tsx

…placeholder-elements-when-omitted

michaelmkraus · 2026-03-04T07:33:28Z

packages/components/src/components/checkbox/checkbox.lite.tsx

+					id={state._invalidMessageId}
+					size="small"
+					semantic="critical">
+					{state._invalidMessage}


Suggested change

{state._invalidMessage}

{state._invalidMessage || props.invalidMessage}

state._invalidMessage was removed from onMount and onUpdate, therefore, it is initially undefined and if validation is initially invalid (prop validation="invalid"), we would see an empty error-box Therefore, we should fall back to props.invalidMessage if the state is still empty. (for all components)

michaelmkraus · 2026-03-04T07:45:13Z

packages/components/src/components/checkbox/checkbox.lite.tsx

 					{props.message}
 				</DBInfotext>
 			</Show>
 			<Show when={state.hasValidState()}>


Suggested change

<Show when={state.hasValidState() && !!props.validMessage}>

Gets shown if props.validation === 'valid'. If the developer didn't set props.validMessage, we get an empty green box.

…placeholder-elements-when-omitted

michaelmkraus · 2026-03-04T08:44:44Z

packages/components/src/components/custom-select/custom-select.lite.tsx

@@ -142,12 +143,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			if (!selectRef?.validity.valid || props.validation === 'invalid') {


Suggested change

if (!selectRef?.validity.valid || props.validation === 'invalid') {

if (state.hasInvalidState()) {

In all other components we use state.hasInvalidState(). I think it has been forgotten to be replaced here.

…d-fields-that-add-todo-placeholder-elements-when-omitted # Conflicts: # .config/cspellignorewords.txt

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…placeholder-elements-when-omitted

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

sarahbrng added 2 commits January 21, 2026 13:27

fix: update validation message display for form components

51f3b76

refactor: format conditional rendering for validity checks in form co…

7a8240f

…mponents

sarahbrng linked an issue Jan 21, 2026 that may be closed by this pull request

Describe required fields that add TODO placeholder elements when omitted #5285

Open

github-project-automation bot added this to UX Engineering Team Backlog Jan 21, 2026

github-project-automation bot moved this to 🏗 In progress in UX Engineering Team Backlog Jan 21, 2026

github-actions bot assigned sarahbrng Jan 21, 2026

github-actions bot added the 🏘components label Jan 21, 2026

sarahbrng marked this pull request as ready for review January 21, 2026 12:53

mfranzke changed the title ~~5285 describe required fields that add todo placeholder elements when omitted~~ refactor: conditionally inserting invalid message depending on validity Jan 21, 2026

nmerget reviewed Jan 22, 2026

View reviewed changes

packages/components/src/components/select/select.lite.tsx Outdated Show resolved Hide resolved

sarahbrng added 2 commits January 22, 2026 13:25

feat: add hasInvalidState method for improved validation handling in …

8eab66e

…form components

refactor: streamline conditional rendering for invalid state in form …

faf44c3

…components

refactor: remove unused invalid message handling in form components

c5bd8d7

github-actions bot mentioned this pull request Jan 22, 2026

Automated PR: auto update snapshots #5875

Merged

nmerget reviewed Jan 22, 2026

View reviewed changes

packages/components/src/components/checkbox/checkbox.lite.tsx Show resolved Hide resolved

nmerget reviewed Jan 22, 2026

View reviewed changes

packages/components/src/styles/internal/_form-components.scss Show resolved Hide resolved

mfranzke and others added 5 commits January 22, 2026 21:23

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

6565172

…placeholder-elements-when-omitted

auto update snapshots (#5875)

209c537

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

f9a4b31

…placeholder-elements-when-omitted

feat(checkbox): add invalid message handling and validity message mixin

ba24722

github-actions bot mentioned this pull request Jan 27, 2026

Automated PR: auto update snapshots #5925

Merged

github-actions bot and others added 2 commits January 27, 2026 11:04

auto update snapshots (#5925)

65184cc

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions bot mentioned this pull request Feb 25, 2026

Automated PR: auto update snapshots #6151

Merged

auto update snapshots (#6151)

af6640f

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nmerget moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Feb 25, 2026

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

5b4d623

…placeholder-elements-when-omitted

mfranzke requested a review from Copilot February 26, 2026 19:38

Copilot started reviewing on behalf of mfranzke February 26, 2026 19:38 View session

Copilot AI reviewed Feb 26, 2026

View reviewed changes

mfranzke moved this from ⏰ready for release to 🎶 Waiting for feedback in UX Engineering Team Backlog Feb 27, 2026

chore: add changeset

0b51551

nmerget dismissed michaelmkraus’s stale review via 0b51551 March 3, 2026 09:43

github-actions bot added the 📕documentation Improvements or additions to documentation label Mar 3, 2026

nmerget moved this from 🎶 Waiting for feedback to ⏰ready for release in UX Engineering Team Backlog Mar 3, 2026

nmerget enabled auto-merge (squash) March 3, 2026 09:46

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

a151266

…placeholder-elements-when-omitted

nmerget requested a review from michaelmkraus March 3, 2026 09:46

nmerget moved this from ⏰ready for release to 🎁 Ready for review in UX Engineering Team Backlog Mar 3, 2026

michaelmkraus moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Mar 3, 2026

michaelmkraus reviewed Mar 4, 2026

View reviewed changes

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

a560cca

…placeholder-elements-when-omitted

michaelmkraus reviewed Mar 4, 2026

View reviewed changes

michaelmkraus moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 4, 2026

michaelmkraus added this to Roadmap Mar 5, 2026

nmerget added 2 commits March 12, 2026 13:59

fix: issue with validations

6f37b2d

Merge remote-tracking branch 'origin/main' into 5285-describe-require…

0d36f1e

…d-fields-that-add-todo-placeholder-elements-when-omitted # Conflicts: # .config/cspellignorewords.txt

github-actions bot added 📺showcases Changes to 1-n showcases 🛠️configuration labels Mar 12, 2026

github-actions bot mentioned this pull request Mar 12, 2026

Automated PR: auto update snapshots #6301

Merged

github-actions bot and others added 2 commits March 12, 2026 13:38

auto update snapshots (#6301)

c51dc1c

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into 5285-describe-required-fields-that-add-todo-…

1e3141b

…placeholder-elements-when-omitted

github-actions bot mentioned this pull request Mar 15, 2026

Automated PR: auto update snapshots #6336

Merged

auto update snapshots (#6336)

cd130cc

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nmerget self-assigned this Mar 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: conditionally inserting invalid message depending on validity#5850

refactor: conditionally inserting invalid message depending on validity#5850
sarahbrng wants to merge 22 commits intomainfrom
5285-describe-required-fields-that-add-todo-placeholder-elements-when-omitted

sarahbrng commented Jan 21, 2026 •

edited by github-actions bot

Loading

Uh oh!

changeset-bot bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

mfranzke commented Jan 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

mfranzke commented Jan 22, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelmkraus Mar 4, 2026 •

edited

Loading

Uh oh!

michaelmkraus Mar 4, 2026

Uh oh!

michaelmkraus Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	{state._invalidMessage}
	{state._invalidMessage \|\| props.invalidMessage}

		@@ -142,12 +143,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
		if (!selectRef?.validity.valid \|\| props.validation === 'invalid') {

	if (!selectRef?.validity.valid \|\| props.validation === 'invalid') {
	if (state.hasInvalidState()) {

Conversation

sarahbrng commented Jan 21, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Fix Form Component Validation Message Display

Problem

Root Cause

Solution

Types of changes

Further comments

Uh oh!

changeset-bot bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

mfranzke commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mfranzke commented Jan 22, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelmkraus Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sarahbrng commented Jan 21, 2026 •

edited by github-actions bot

Loading

changeset-bot bot commented Jan 21, 2026 •

edited

Loading

mfranzke commented Jan 21, 2026 •

edited

Loading

michaelmkraus Mar 4, 2026 •

edited

Loading