-
Notifications
You must be signed in to change notification settings - Fork 47.7k
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
Fix minLength and maxLength constraints on textareas in Chrome #27635
Conversation
Comparing: 77c4ac2...9ac0791 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
The latest thinking is that React should allow defaultValue to be set even on controlled values to indicate what the "saved" value is. So it plays well with these assumptions as well as form resetting. That change is not planned yet and even so the current behavior would be still available for backwards compat so needs to be addressed somehow. |
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
Any chance we can fix this for React 19? |
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you! |
Summary
Fixes #19474
This fixes an issue that causes
<textarea>
with theminLength
andmaxLength
props not to validate when the textarea has a controlledvalue
. This Codesandbox has a minimal reproduction of the issue. Typing into the<input>
element updates thevalidity
of the input element correctly as shown in the console logs, but not the<textarea>
.This is caused by React syncing the controlled
value
prop into the nativetextarea.defaultValue
property, which is equivalent totextContent
(i.e. the children of the<textarea>
element). When the children change, Chrome marks the change as a programmatic update rather than a user update here. Then, when checking validity, it skips the length constraint for programmatically set changes here.This issue is related to #11896. I'm not sure of the overall status of that effort, but I think since the
minLength
andmaxLength
props are currently broken entirely when a<textarea>
is controlled, we could potentially consider changing the behavior for only that case for now without it being considered a breaking change. This PR disables updating the nativedefaultValue
when aminLength
ormaxLength
constraint is set. The idea is to make the minimal change possible to fix the issue until the larger refactor can be done in a major version. Open to feedback on this approach.How did you test this change?
Added a unit test. Created a small fixture locally and tested the build in Chrome.