Skip to content

Conversation

DHANUSHRAJA22
Copy link

Fixes #30580. Ensures only uncontrolled , , and <textarea> fields are reset after form action. Controlled fields (with value or checked props) are skipped. Includes helper and dev logging. Summary This PR addresses issue #30580 by implementing controlled field detection in form reset functionality. The current implementation was resetting all form fields after a form action, which was causing controlled React components to lose their managed state. What changed Added isControlledField() helper function - Detects if a form field is controlled by checking for React props (value or checked) Added resetFormFieldsAfterAction() function - Resets only uncontrolled fields while preserving controlled field state Updated requestFormReset() - Now uses the new controlled/uncontrolled detection logic Added dev logging - Console logs when controlled fields are skipped (development mode only) Exported helper functions - Available for potential external use How it works The solution examines each form element's React fiber node to determine if it has controlled props: For <input> elements: checks for value prop (text inputs) or checked prop (checkboxes/radio) For <textarea> and <select> elements: checks for value prop Controlled fields are skipped during reset, preserving React's state management Uncontrolled fields are reset as before Testing Tested with forms containing both controlled and uncontrolled components. Verified that: Controlled fields maintain their React-managed state after form actions Uncontrolled fields are properly reset to default values Dev logging correctly identifies controlled fields…controlled field detection for form reset functionalityAdd controlled field detection for form reset functionalityUpdate ReactDOMFormActions.js This commit enhances the form reset functionality in ReactDOMFormActions.js by: Added isControlledField() helper function that detects if a form field is controlled (has value or checked props from React) Added resetFormFieldsAfterAction() function that resets form fields after successful form action with logic to: Skip resetting controlled fields (preserving React state management) Reset uncontrolled fields as before Modified requestFormReset() to use the new controlled/uncontrolled detection logic Exported helper functions for potential external use This ensures that controlled components maintain their state while uncontrolled components are properly reset after form actions. Summary How did you test this change?

…controlled field detection for form reset functionalityAdd controlled field detection for form reset functionalityUpdate ReactDOMFormActions.js

This commit enhances the form reset functionality in ReactDOMFormActions.js by:

1. Added isControlledField() helper function that detects if a form field is controlled (has value or checked props from React)
2. Added resetFormFieldsAfterAction() function that resets form fields after successful form action with logic to:
   - Skip resetting controlled fields (preserving React state management)
   - Reset uncontrolled fields as before
3. Modified requestFormReset() to use the new controlled/uncontrolled detection logic
4. Exported helper functions for potential external use

This ensures that controlled components maintain their state while uncontrolled components are properly reset after form actions.
@meta-cla meta-cla bot added the CLA Signed label Aug 25, 2025
@geoarda
Copy link

geoarda commented Aug 25, 2025

I tested this change with forms that mix controlled and uncontrolled fields

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.

[React 19] Controlled <select> component is subject to automatic form reset
2 participants