I'm trying to replicate the following behavior; when changing your password (e.g. on this very site), Safari will suggest filling a New Strong Password:
According to MDN, adding autocomplete="new-password" should do the trick. But I'm having trouble getting that to work, while on Stack Exchange it works even though there is a relevant typo in the source code.
If I copy-paste the HTML into my application, the autocompletion of the current password is working as intended:
but the new password field, upon focusing, only shows the gray key button, so it's detected as a password, but not a new one. In Chrome, similar behavior: both fields are detected as regular password fields.
There are no errors visible in the browser console. I'm developing a Spring Boot application with Thymeleaf, but that shouldn't matter. Here is the HTML of the page, which I copied from Stack Exchange:
<!DOCTYPE HTML>
<html>
<body>
<div class="">
<div class="subheader">
<h1>Change Password</h1>
</div>
<div id="mainbar">
<div>Change password for [email protected]</div>
<br>
<form id="se-pw-reset" action="/account/password-reset" method="POST" class="d-flex fd-column gs12 gsy">
<input type="hidden" name="fkey" value="">
<input type="hidden" name="guid" value="">
<div class="d-flex fd-column gs4 gsy wmx3">
<div class="d-flex fd-column gs4 gsy js-auth-item ">
<label class="flex--item s-label" for="currentpassword">Current password</label>
<div class="d-flex ps-relative">
<input id="currentpassword" class="flex--item s-input" autocomplete="current-password" name="currentpassword" type="password" value="">
<svg aria-hidden="true" class="s-input-icon js-alert-icon d-none svg-icon iconAlertCircle" width="18" height="18" viewBox="0 0 18 18"><path d="M9 17c-4.36 0-8-3.64-8-8s3.64-8 8-8 8 3.64 8 8-3.64 8-8 8M8 4v6h2V4zm0 8v2h2v-2z"></path></svg>
</div>
<p class="s-input-message js-error-message d-none">
</p>
</div>
<div class="d-flex fd-column gs4 gsy js-auth-item ">
<label class="flex--item s-label" for="password">New password</label>
<div class="d-flex ps-relative">
<input id="password" class="flex--item s-input" autocomplete="new-password" name="password" type="password" value="">
<svg aria-hidden="true" class="s-input-icon js-alert-icon d-none svg-icon iconAlertCircle" width="18" height="18" viewBox="0 0 18 18"><path d="M9 17c-4.36 0-8-3.64-8-8s3.64-8 8-8 8 3.64 8 8-3.64 8-8 8M8 4v6h2V4zm0 8v2h2v-2z"></path></svg>
</div>
<p class="s-input-message js-error-message d-none">
</p>
</div>
<div class="d-flex fd-column gs4 gsy js-auth-item ">
<label class="flex--item s-label" for="password2">New password (again)</label>
<div class="d-flex ps-relative">
<input id="password2" class="flex--item s-input" autocomplete="new-password" name="password2" type="password" value="">
<svg aria-hidden="true" class="s-input-icon js-alert-icon d-none svg-icon iconAlertCircle" width="18" height="18" viewBox="0 0 18 18"><path d="M9 17c-4.36 0-8-3.64-8-8s3.64-8 8-8 8 3.64 8 8-3.64 8-8 8M8 4v6h2V4zm0 8v2h2v-2z"></path></svg>
</div>
<p class="s-input-message js-error-message d-none">
</p>
</div>
<p class="fs-caption fc-black-400 mt4 mb4">
Passwords must contain at least eight characters, including at least 1 letter and 1 number.
</p>
<div class="d-flex fd-column gs4 gsy js-auth-item ">
<button class="flex--item s-btn s-btn__filled" id="submit-button" name="submit-button">
Change Password
</button>
<p class="s-input-message js-error-message d-none">
</p>
</div>
</div>
</form>
</div>
</div>
</body>
</html>Stack Exchange loads some JavaScript but I can't see how that would affect the autocompletion.
As suggested by a staff member, when I put the <form> part into a fiddle, it works as expected (see the screenshot below). I've tried to exclude any localhost-related shenanigans, but when I upload the form to my server (which is serving the pages as HTTPS), the problem persists.
