Password confirmation fields edited in a weird order sometimes don't clear password errors #19

jwir3 · 2020-05-10T22:57:27Z

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'.

The text was updated successfully, but these errors were encountered:

jwir3 added the bug Something isn't working label May 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Password confirmation fields edited in a weird order sometimes don't clear password errors #19

Password confirmation fields edited in a weird order sometimes don't clear password errors #19

jwir3 commented May 10, 2020

Password confirmation fields edited in a weird order sometimes don't clear password errors #19

Password confirmation fields edited in a weird order sometimes don't clear password errors #19

Comments

jwir3 commented May 10, 2020