Skip to content

[field] Fix field validation with simultaneous Form errors or invalid prop#4112

Merged
mj12albert merged 4 commits intomui:masterfrom
mj12albert:fix/form-errors-skips-client-validation
Feb 25, 2026
Merged

[field] Fix field validation with simultaneous Form errors or invalid prop#4112
mj12albert merged 4 commits intomui:masterfrom
mj12albert:fix/form-errors-skips-client-validation

Conversation

@mj12albert
Copy link
Member

@mj12albert mj12albert commented Feb 16, 2026

Fixes #4095

Also handles an edge case when a field simultaneously has an error Form.errors and invalid={true}

@mj12albert mj12albert added type: bug It doesn't behave as expected. component: field Changes related to the field component. labels Feb 16, 2026
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 16, 2026

commit: 606f6ae

@mui-bot
Copy link

mui-bot commented Feb 16, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react ▼-14B(0.00%) 🔺+14B(+0.01%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link

netlify bot commented Feb 16, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 606f6ae
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/699f24cf174d570008a94b4e
😎 Deploy Preview https://deploy-preview-4112--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@mj12albert mj12albert marked this pull request as ready for review February 16, 2026 16:21
Comment on lines +79 to +83
const hasFormError =
name !== undefined &&
EMPTY_OBJECT.hasOwnProperty.call(errors, name) &&
errors[name] !== undefined;
const invalid = invalidProp === true || hasFormError;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use Object.hasOwn(...) now

Comment on lines +79 to +80
const hasFormError =
name !== undefined &&
Copy link
Contributor

@atomiks atomiks Feb 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Codex:

[P2] Empty-string name is now handled inconsistently across form error paths. FieldRoot.tsx (line 79) now includes name="" in hasFormError, but related logic still treats empty string as “no name” in:
Form.tsx (line 138),
FieldError.tsx (line 41),
and form value collection in Form.tsx (line 122).

Leaving it as truthy name is probably simplest?

@mj12albert mj12albert merged commit 8dba41c into mui:master Feb 25, 2026
23 checks passed
@mj12albert mj12albert deleted the fix/form-errors-skips-client-validation branch February 25, 2026 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: field Changes related to the field component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[form] field-level validate skips first change after error added to errors prop

3 participants