[number field] Fix hidden input focus on submit#3581
Merged
Conversation
atomiks
added
component: number field
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
atomiks
force-pushed
the
fix/number-field-validity-focus
branch
from
fc7b422 to
333c07f
Compare
atomiks
force-pushed
the
fix/number-field-validity-focus
branch
from
333c07f to
8c6a723
Compare
mnajdova
approved these changes
Dec 25, 2025
mnajdova
left a comment
mnajdova
left a comment
Member
There was a problem hiding this comment.
Logic looks good, let's just update the props description before merging.
atomiks
force-pushed
the
fix/number-field-validity-focus
branch
3 times, most recently
from
36c1e91 to
ea9b8a3
Compare
atomiks
force-pushed
the
fix/number-field-validity-focus
branch
3 times, most recently
from
ea954ce to
4160025
Compare
atomiks
force-pushed
the
fix/number-field-validity-focus
branch
from
4160025 to
95bc36b
Compare
atomiks
added a commit
to atomiks/base-ui
that referenced
this pull request
Dec 28, 2025
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #3574
The main problem in the issue is that
stepMismatchwas sometimes occurring, and the hidden<input type="number">was being focused. This emitted anaria-hiddenwarning and appeared to "block submission" but the real issue is that the submission was (correctly) blocked fromstepMismatch, just that focus wasn't being relocated to the right input.Native
<input type="number">supportsstep="any"to turn off step validation (while internal controls still assumestep={1}), which I have added here for parity. If users want a custom step without step validation, this would require another prop, which can likely wait until an issue is created.Related
stepMismatchvalidation is broken unless you add an explicitminlikemin={0}. It's some kind of esoteric React bug with controlled number inputs? For Controlled Input, step does not work as expected unless initialized with null or "". react/react#12334. Syncing thevaluewith.setAttribute('value', ...)doesn't seem to work in an effect. I've added this to the documentation forstep.