I´m trying to avoid that the native browser credentials prompt appears. I have a registration flow with 3 different screens, in the first, user must fill name, surname, email, and password. In this screen i have the form with the different inputs, and only password have "type=password":
<form autocapitalize="none">
<input aria-invalid="false" autocomplete="given-name" id="firstName" type="text" class="MuiInputBase-input MuiInput-input makeStyles- input-114 makeStyles-input-119" autocapitalize="words" value="">
<input aria-invalid="false" autocomplete="family-name" id="lastName" type="text" class="MuiInputBase-input MuiInput-input makeStyles- input-114 makeStyles-input-123" autocapitalize="words" value="">
<input aria-invalid="false" id="birthdate" type="text" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles- input-127" placeholder="mm/dd/yyyy" value="">
<input aria-invalid="false" id="mobile" type="tel" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles-input-131 MuiInputBase-inputAdornedStart" autocapitalize="words" value="+63 ">
<input aria-invalid="true" autocomplete="new-password" id="newPassword" type="text" class="MuiInputBase-input MuiInput-input makeStyles-input-114 makeStyles-input-135 password" autocapitalize="words" value="">
</form>
<button type="button" style="width: 160px;">Next</button>When I press on "Next" button, it goes to "Terms and conditions" screen, and the credential prompt is showed. Note that the form is not submitted with this button, and there´s no network call when I press "Next" button.
For chrome, i have changed the type of the password input to "text" and I have implemented the class "password" that hides the characters by css property webkit-text-security: disk:
.password {
-webkit-text-security: disc;
-moz-text-security: disc;
}but this solution doesn´t works for firefox neither iOS and macOS safari. The problem is that Firefox is not a webkit browser based, and it doesn´t have any similar property; and Safari recognize a password input by its type="password" and by that css property -webkit-text-security: disk, so the browser still shows the credential prompt.
Anybody can help me with this problem?