Bug: Input minLength not working after type changed

[ichvandi]

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]

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]

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]

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.

[account-sasha]

I reproduced issue in Safari Version 15.5 (17613.2.7.1.8).

This behaviour is reproducible with native javascript so i feel like this case should seen by Safari