Skip to content

[field] Prevent defaultValue reset on focus for uncontrolled inputs #2543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 21, 2025

Conversation

ingokpp
Copy link
Contributor

@ingokpp ingokpp commented Aug 20, 2025

Fixes #2530

Problem:
Inputs wrapped in Field.Root were incorrectly resetting to their defaultValue when focused after being programmatically changed via ref (e.g., inputRef.current.value = ""). This behavior differed from plain HTML inputs and unwrapped Input components.

Cause:
The FieldControl component was always passing a value prop to the input element, making React treat it as controlled even when only defaultValue was provided. When the DOM value was changed directly, React's internal state wasn't updated, causing re-renders to reset the input.

My Solution:
Modified FieldControl to conditionally pass either value (for controlled) or defaultValue (for uncontrolled) props to the input element, matching standard behavior.

Note: Before implementing the fix, I created some failing tests that reproduced the behaviour mentioned in the issue.

Copy link

pkg-pr-new bot commented Aug 20, 2025

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@2543
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@2543

commit: c5c0d89

@mui-bot
Copy link

mui-bot commented Aug 20, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui-components/react 🔺+37B(+0.01%) 🔺+29B(+0.03%)

Details of bundle changes

Generated by 🚫 dangerJS against c5c0d89

Copy link

netlify bot commented Aug 20, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 819b56d
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68a5b9621b60f800085fce6d
😎 Deploy Preview https://deploy-preview-2543--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.

Copy link

netlify bot commented Aug 20, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit e217c80
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68a5b97bbb0c54000854f3ba
😎 Deploy Preview https://deploy-preview-2543--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.

Copy link

netlify bot commented Aug 20, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit c5c0d89
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68a5cc692b69b000087dd4a0
😎 Deploy Preview https://deploy-preview-2543--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.

Comment on lines 119 to 121
if (value != null) {
if (isControlled) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do the tests still pass without changing this? The useControlled hook should fire onValueChange for both defaultValue and value when it gets changed (not via ref mutation though of course)

const [value, setValueUnwrapped] = useControlled({
  controlled: valueProp,
  default: defaultValue,
  name: 'FieldControl',
  state: 'value',
});

Copy link
Contributor Author

Choose a reason for hiding this comment

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

They do! Adjusted

@LukasTy LukasTy added type: bug It doesn't behave as expected. scope: field This is the name of the generic UI component, not the React module! labels Aug 20, 2025
@LukasTy LukasTy changed the title [field][input] Prevent defaultValue reset on focus for uncontrolled inputs [field] Prevent defaultValue reset on focus for uncontrolled inputs Aug 20, 2025
@atomiks atomiks merged commit 6fe9c28 into mui:master Aug 21, 2025
21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: field This is the name of the generic UI component, not the React module! type: bug It doesn't behave as expected.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[field][input] Unable to set uncontrolled Input value via ref when wrapped in Field
4 participants