autocomplete: md-require-match flashes ng-message error on selection

[marcore86]

Actual Behavior: md-require-match briefly shows an error message on mouse down event.

• `What is the issue? * I am using md-require-match inside an md-autocomplete and, once autocomplete's item are shown, I select one of them with my mouse and, for a millisecond, error message for md-require-match is showed.
  Please note that this message is not showed if I hit an item with enter key.

• What is the expected behavior? No error message should be displayed when an item is selected from the list.

CodePen (or steps to reproduce the issue):

• CodePen Demo which shows your issue: https://codepen.io/anon/pen/KyNZxB

• Details: The above code is simply the demo on angular material web site.
  Steps to reproduce:

• click "Favourite States"

• search for 'a' to get list of available states .

• left click with your mouse ( don't leave the mouse button for clarity)

• error message 'Please select an existing state' is showed

AngularJS Versions: *

• AngularJS Version:1.5.5
• AngularJS Material Version: v1.1.5

Additional Information:

• Browser Type: * Chrome
• Browser Version: *61.0.3163.100
• OS: * Windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[sukanya-pai]

Any updates/ solution for this issue?? Even I am facing the same issue.

[Splaktar]

@SSPai123 nope, no updates at this time. It would be appreciated if someone from the community could investigate and determine the cause of this issue.

[jonnyAmplience]

The issue is caused by adding the required attribute to md-autocomplete. md-require-match does not cover the case where a user fails to select an option from the field so required is needed.