Submit button behaves differently than enter key submission, at least for step validation

[grantbdev]

Bug report

Current Behavior

With an input of type="number", browsers will validate the value according to the step attribute by default. If the input value is considered invalid, form submission is prevented and the browser displays an error message. A non-Formik form displays the error message when clicking the submit button or pressing the enter key. However, it seems that a Formik form will skip this validation if the form is submitted by clicking the submit button. The validation will display in a Formik form if the enter key is pressed inside the invalid input. So it is still possible to see the error message, but the behavior is inconsistent with the submit button.

Expected behavior

Clicking the submit button should behave the same as pressing the enter key. Ideally, all browser validations should execute by default when either option is used to submit the form.

Reproducible example

Try submitting a non-integer number such as 1.2 in the inputs to observe the difference in behavior:
Codesandbox example derived from demo linked in main docs

Suggested solution(s)

I don't know enough about the internals of Formik to suggest a solution.

Additional context

It's worth noting that when a required input is blank, the browser's validation message still appears when clicking the submit button in a Formik button, so it doesn't appear to be that Formik is intending to skip all browser input validations.

Your environment

Software	Version(s)
Formik	2.4.6
React	17.0.2
TypeScript	5.6
Browser	Firefox 132, Chrome 131
npm/Yarn	Yarn v1.22.22
Operating System	macOS 15.1

[dharmveer97]

@grantbdev CODESANDBOX :- Try to check this one