Skip to content
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

Bug: Input minLength not working after type changed #20161

Open
ichvandi opened this issue Nov 5, 2020 · 3 comments
Open

Bug: Input minLength not working after type changed #20161

ichvandi opened this issue Nov 5, 2020 · 3 comments

Comments

@ichvandi
Copy link

@ichvandi ichvandi commented Nov 5, 2020

I have an input with type password with minLength 8, and i have a toggle to change the type to text (password toggle).
when i type with length < 8 and press submit, it prevent to submit. but, when i toggle the password so it change the type to text and submit the form, it can submitted. btw i using useRef()

React version:
react: ^17.0.1
react-dom: ^17.0.1

Steps To Reproduce

  1. type character < minLength
  2. submit form
  3. toggle form type
  4. submit form

Link to code example: DEMO

The current behavior

The form get submitted even when it under minLength

The expected behavior

The form not get submitted when it under minLength

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Nov 5, 2020

Thanks for the report.

I can spot two issues:

  1. your demo uses minLength="3" not 8.
    Typing less than 8 characters is fine as long as you type more than 2
  2. minLength is not supported in IE 11: https://caniuse.com/input-minlength
    I tested your demo in Chrome 85 and could not submit when I entered less than 2 characters.
    What browser were you using when testing your code?

@ichvandi
Copy link
Author

@ichvandi ichvandi commented Nov 5, 2020

I'm using mac os 10.14.6 and browser Safari 13.0.5 (14608.5.12)
i forgot something, don't type any characters after toggle it

btw, when i try with Chrome 86.0.4240.183 it works fine. i think it happen only in safari

Steps To Reproduce 1

  1. type character < minLength
  2. submit form
  3. toggle form type
  4. dont type anything after toggle
  5. submit form
  6. the form will submitted

Steps To Reproduce 2

  1. type character < minLength
  2. submit form
  3. toggle form type
  4. type anything after toggle
  5. submit form
  6. the form will not submitted

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Nov 5, 2020

Thanks, I can reproduce this.

Generally any validation is ignored if the input is pristine. If you submit the form without typing anything the minLength is ignored.

Safari properly marks the form as invalid if you typed something that doesn't pass all constraints. However, when the type changes Safari seems to consider the input pristine. Therefore an invalid value is submitted if the type changed after typing is complete.

The question is if React can or should fix this quirk or whether Safari should fix this.

Edit:
Minimal repro without any react: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js

If you need this behavior I suggest filing a bug with Safari.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants