fix: detect autofilled values on focus for controlled inputs#35719
fix: detect autofilled values on focus for controlled inputs#35719DukeDeSouth wants to merge 1 commit intofacebook:mainfrom
Conversation
…k#1159) When browsers autofill form fields (e.g., username/password saved in browser, password managers, iOS Chrome autofill), they may set the input value without firing input or change events. This causes controlled components to have stale state while the user sees filled data. The fix adds value change detection on focusin events for text inputs. When a user focuses an autofilled field, React now checks if the DOM value differs from its tracked value and fires onChange if so. This uses the existing value tracking infrastructure (updateValueIfChanged) which safely deduplicates — if the value hasn't changed, no event fires. This covers the majority of autofill scenarios because: - Browsers expose autofill values after first user interaction - focusin fires when the user clicks/taps any field - Each field gets checked as the user interacts with the form Closes facebook#1159 Co-authored-by: Cursor <cursoragent@cursor.com>
|
Hi @DukeDeSouth! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
|
Nice fix — this is one of those “it’s obviously broken in real browsers, but hard to model in events” issues. Hooking the existing value-tracking check ( Only thing to call out: for controlled inputs this can now fire LGTM. |
Human View
Summary
Fixes #1159 — an 11-year-old bug where browser autofill breaks controlled components.
When browsers autofill form fields (saved passwords, address autocomplete, password managers), they may set the input value without firing
inputorchangeevents. This causes controlled components to have stale state — the user sees filled data but React state remains empty. On form submission, data is lost.Root Cause
React's
ChangeEventPlugindetects value changes viagetTargetInstForInputOrChangeEvent(), which only checks values wheninputorchangeDOM events fire. When browsers autofill without events (e.g., Chrome on iOS, some password managers), React never checks and never firesonChange.Fix
Add value change detection on
focusinevents for text inputs. Thefocusinevent is already registered as a dependency ofonChangebut was unused for modern browsers. When a user focuses an autofilled field, React now checks if the DOM value differs from its tracked value (viaupdateValueIfChanged()) and firesonChangeif so.This is safe because:
updateValueIfChanged()compares the value tracker with the actual DOM value — if they match, no event fires (zero false positives)focusinalready bubbles to the root and is captured by React's event delegationChange
1 function modified in
ChangeEventPlugin.js(+7 lines):Coverage
Known Limitations
Test Plan
ReactDOMInput-test.jsAI View (DCCE Protocol v1.0)
Metadata
AI Contribution Summary
Verification Steps Performed
Human Review Guidance
ChangeEventPlugin.js,ReactDOMInput-test.jsMade with M7 Cursor