documentation icon indicating copy to clipboard operation
documentation copied to clipboard

issue: maxLength does not limit input field to length

Open MylesWardell opened this issue 2 years ago • 2 comments

Version Number

7.49.3

Codesandbox/Expo snack

https://codesandbox.io/s/intelligent-poincare-f57gmx

Steps to reproduce

  1. Go to input
  2. See that maxLength is 3
  3. type and see that its allows more than 3

Expected behaviour

image Text says max Length accepted by this input so I would assume its a passthrough to maxLength on the react input. If it was just validation it should say maxLength the input is validated or something like that.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

MylesWardell avatar Jan 18 '24 02:01 MylesWardell

The prop does not appear to be documented, but you can enable the passing of native validation props to input elements by using the progressive: true flag on useForm.

If it was just validation it should say maxLength the input is validated or something like that.

Validation is only performed based on the mode prop, which defaults to onSubmit. This means that your expected validation error would occur on form submission. If you require validation to occur onChange, consider using mode: "onChange".

Moshyfawn avatar Jan 18 '24 03:01 Moshyfawn

Why does the library not set the native attributes of the input element for required, minLength, maxLength, etc by default? This gives the much better out-of-box user experience. It'll show what is actually invalid without a re-render.

T3rm1 avatar Dec 08 '24 00:12 T3rm1