Focus out is causing incorrect display of success on form element

[simonihmig]

See ember-bootstrap/ember-bootstrap#1017.
Reproduction: https://ember-twiddle.com/0d0a0f211c818a5300b4deaac7e159d6?openFiles=validators.form%5C.js%2C

[jelhan]

This is an issue with ember-changeset-validations and not with this integration library. The changeset is considered valid until one of it's values is changed. To test this yourself, you can add this additional output to the template in the twiddle:

  <p>Changeset is valid? {{this.changeset.isValid}}</p>
  
  <h2>Errors</h2>
  <ul>
    {{#each-in this.changeset.error as |property error|}}
      <li>
      	{{property}}:
        {{#each error.validation as |message|}}
          {{message}}<br/>
        {{/each}}
      </li>
    {{else}}
    	No errors
    {{/each-in}}
  </ul>

Please excuse the missing twiddle link. Had issues to safe it.

[visoft]

I updated the twiddle https://ember-twiddle.com/0d0a0f211c818a5300b4deaac7e159d6?openFiles=templates.application%5C.hbs%2C

[jelhan]

@visoft Could you please report the issue at ember-changeset-validations? I think from the twiddle it's quiet obvious that it's not an issue with the usage of the validation results in Ember Bootstrap but that the initial validation seems to be wrong.

Closing this one for now. Please reopen if further investigation shows that there is an issue with Ember Bootstrap's integration of ember-changeset-validations.

[jelhan]

It wasn't clear to me that ember-changeset-validations considers the initial state always as valid until validate is called first time or a value is changed. It seems like if this was even true for v2. We need to investigate what has changed that broken this.

[jelhan]

@visoft Can you please provide an Ember Twiddle showing that this has worked with an older version of the dependencies?

[visoft]

@jelhan I can experiment with versions. See poteto/ember-changeset-validations#237 (comment) for some more information. I think the problem is that a value isn't being set on the changeset on focusout. If you set an undefined/empty value, it should work.

[jelhan]

I think the problem is that a value isn't being set on the changeset on focusout. If you set an undefined/empty value, it should work.

Seems like it. But I'm not aware that we have ever done something like this in a previous version. That's why I'm asking for a Twiddle showing that it had worked previously.

[visoft]

@jelhan I played around with different versions and the problem was still there. I'm wondering if it's always been "broken."

[visoft]

Clicking on a field and tabbing correctly works in the demo on the ember-bootstrap docs https://www.ember-bootstrap.com/#/components/forms, but that seems to be using ember-cp-validations and ember-bootstrap-cp-validations.

[lindyhopchris]

Hi! Hopefully this helps... I've currently upgrading from v1 of this addon to v3. The following test was passing in v1, but fails in both v2 and v3:

  test('it has invalid fields on blur', async function (assert) {
    await render(hbs`
      {{ui-form-register
        onSubmit=(action update)
      }}
    `);

    let keys = ['first-name', 'surname', 'email'];

    do {
      let key = keys.shift();
      let selector = `[name="${key}"]`;

      await focus(selector);
      await blur(selector);

      assert.dom(selector).doesNotHaveClass('is-valid', `${key} not valid`);
      assert.dom(selector).hasClass('is-invalid', `${key} is invalid`);
    } while (keys.length);
  });

So as far as I'm aware, this shows that it did work previously and now doesn't.

[jelhan]

Fixed by #27