Skip to content

Comments

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

Open
mj12albert wants to merge 3 commits intomui:masterfrom
mj12albert:fix/form-errors-skips-client-validation
Open

[field] Fix field validation with simultaneous Form errors or invalid prop#4112
mj12albert wants to merge 3 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: f2bac71

@mui-bot
Copy link

mui-bot commented Feb 16, 2026

Bundle size report

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

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 f2bac71
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/699bea842e595e00081a4e62
😎 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?

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