Validation issue in Chrome

[andlebed]

I'm submitting a bug report

• Library Version:
  0.17.2
• Aurelia-validation Version:
  0.13.1
• Operating System:
  OSX 10.11.6
• Node Version:
  6.7.0
• NPM Version:
  3.10.8
• Browser:
  Chrome 54.0.2840.71 (64-bit)
• Language:
  ESNext

view-model.js

import {inject, NewInstance} from 'aurelia-framework';
import {ValidationController, ValidationRules} from 'aurelia-validation';
import {MaterializeFormValidationRenderer} from 'aurelia-materialize-bridge';

@inject(NewInstance.of(ValidationController))
export class ViewModel {

  email = '';
  isDisabled = false;

  constructor(controller) {
    this.controller = controller;
    this.controller.addRenderer(new MaterializeFormValidationRenderer());

    ValidationRules
      .ensure('email')
      .required().withMessage('We need your email')
      .email().withMessage('Wrong email')
      .on(this);
  }

  submit() {
    this.isDisabled = true;
  }

}

view.html

<template>
  <form submit.delegate="submit()">
    <md-input md-label="Email" md-value.bind="email & validate" md-disabled.bind="isDisabled" md-validate="true"></md-input>
    <button md-button="disabled.one-way: isDisabled; flat: true;">Send</button>
  </form>
</template>

Current behavior:
Type valid email into input, click "Send" button. Input contains "valid" in the class name.

Type valid email into input and press Enter. Input contains "invalid" in the class name.

Expected/desired behavior:
Input should remain valid after form submission by Enter.

Without md-validate="true" works fine.

[Thanood]

Hmm, this seems to happen because the input field doesn't lose focus on Enter (it doesn't blur?)..
In the catalog example you can even see the success message on top of the failure message.

Making the input field lose focus in any way (clicking outside the input field, switching browser tab) seems to trigger the correct validation.

The difference in the catalog sample is that the input has valid in its class name.
Strange.

[Thanood]

Tbh I think with aurelia-validation this is totally up to the user. That means if you configure blur as the validation trigger (it's the default) it won't trigger on change or keyup. Native input elements don't blur on enter, either..

However, I know from personal experience that such a blur-on-enter functionality can be very handy. I will add an additional option as a custom attribute md-blur-on-enter which does that. It will blur the input on enter and thus trigger validation (default is false to not break anything).