Hide credentials prompt on safari (iOS and macOS)

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?



Read more here: https://stackoverflow.com/questions/67215528/hide-credentials-prompt-on-safari-ios-and-macos

Content Attribution

This content was originally published by Edu Pérez at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: