Inconsisten validation for empty value

[knstntn]

Hello

I have the following html:

<div class="box-group">
  <form name="demoForm" ng-init="color = '#eee'">
    <color-picker name="colour"
                  ng-model="color"
                  options="{ required: true, format: 'hexString' }"
                  required>
    </color-picker>

    <div ng-if="demoForm.colour.$error.required">This field is required</div>

    <button type="submit">Save</button>
  </form>
</div>

And I want to see validation error on submit if empty value is set in color picker input field

Unfortunately there is no error message and bound model is unchanged but focus is removed from input and submit button is clicked.

Expected Behavior

Model is bound to null or undefined, required validation error is set

Current Behavior

Model remains as is, no validation messages appear

Steps to Reproduce

1. Set focus on input, color picker will appear
2. Hit esc, color picker popup should be hidden, focus should remain within input field
3. Remove content
4. Remove focus from input
5. Click Save button or hit enter. Nothing happens.

One of my colleagues demonstrated that she can get into empty-field-no-error-message situation with different set of steps but I cannot reproduce those yet, so reporting only reproducible steps.

Empty value is what shown the issue for us, but in general it seems that as soon as user managed to hide color popup she can enter whatever text she wants - be it empty value or some random letters.

What I tried

• I tried to remove required: true from options and only use required / ng-required as attribute, did not work
• I tried to use allowEmpty to let color picker set value to empty and trigger angular validation, but it did not work for me either.

Any help or ideas would be greatly appreciated. Thanks.