Password confirmation fields edited in a weird order sometimes don't clear password errors #19
Description
Steps to Reproduce:
- Add the following HTML to the
examples/folder:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>All Field Examples</title>
<script src="../lib/index-web.js"></script>
<!-- The following are Bulma CSS files. You do not need to include them in your HTML files. -->
<link rel="stylesheet" href="../node_modules/bulma/css/bulma.min.css">
<link rel="stylesheet" href="../node_modules/bulmaswatch/materia/bulmaswatch.min.css">
<style>
body {
margin: 1em;
}
body > * {
margin-bottom: 1em;
}
.field {
width: 40%;
}
</style>
</head>
<body>
<h1 class="title is-1">All Field Examples</h1>
<article class="message">
<div class="message-header">
<p>Note</p>
</div>
<div class="message-body">
For all examples, the prefix used is <code>ninkasi</code>.
</div>
</article>
<div class="field">
<label class="label">Full Name</label>
<input type="text" id="test-fullname" value="" placeholder="Please enter your full name" class="ninkasi_fullNameField input" required>
<p class="ninkasi_formFieldMessage help is-danger"></p>
</div>
<div class="field">
<label class="label">Generic Text</label>
<input type="text" id="test-generic" value="" placeholder="Please enter something" class="input" required>
<p class="ninkasi_formFieldMessage help is-danger"></p>
</div>
<div class="field">
<label class="label">Password</label>
<div class="field-icon-container">
<input type="password" id="text-field-password" value="password" placeholder="" class="input" data-shouldmatch="text-field-password-confirmation" required>
<i id="eye-icon" class="fa fa-fw fa-eye field-icon ninkasi_show-password" aria-label="password-visibility-control" aria-hidden="true" aria-controls="text-field-password"></i>
</div>
<p class="ninkasi_formFieldMessage help is-danger">Please enter a password</p>
</div>
<div class="field">
<label class="label">Password Confirmation</label>
<div class="field-icon-container">
<input type="password" id="text-field-password-confirmation" value="" placeholder="" class="ninkasi_passwordConfirmationField input" data-shouldmatch="text-field-password" required>
<i id="eye-icon" class="fa fa-fw fa-eye field-icon ninkasi_show-password" aria-label="password-visibility-control" aria-hidden="true" aria-controls="text-field-password-confirmation"></i>
</div>
<p class="ninkasi_formFieldMessage help is-danger">Please enter a password confirmation</p>
</div>
<div class="field">
<label class="label">Username</label>
<input type="text" id="test-username" value="" placeholder="Please enter your username" class="ninkasi_usernameField input" required>
<p class="ninkasi_formFieldMessage help is-danger"></p>
</div>
<script>
taphandle.ComponentBehaviors.getInstance('ninkasi', {
'fieldErrorClass': 'is-danger'
});
let element = document.getElementById('text-field-password-confirmation');
// setTimeout(() => {
taphandle.ComponentBehaviors.setElementInvalid(element, "Blorf dude");
// }, 1000);
</script>
</body>
</html>
- Open the aforementioned HTML page with the latest code compiled in
lib. - Edit the password confirmation field and enter
abcqweabc. - Edit the password field and input
123qwe456. - Edit the password confirmation field and enter
123qwe456.
Expected Behavior:
- ✔️ Both the password and password field error messages are invisible.
Actual Behavior:
- ❌ The password confirmation error message is cleared, but the password error message still shows 'The password and its confirmation do not match'.