mat-select with validation not kicked when focus is lost

[k-krupka]

Bug, feature request, or proposal:

In my opinion bug with mat-select. The error message is not visible when dropdown is closed; focus is not behaving properly with "required" attribute applied.

What is the expected behavior?

When focus is not on the control anymore, the error message should be visible.

What is the current behavior?

When focus is lost, the error message is not immediately visible.

What are the steps to reproduce?

1. http://plnkr.co/edit/K6hyF9?p=preview
2. Click on "favorite options" on the left hand side
3. Click out of dropdown to cancel the selection
4. Notice the visible "this field is required message"
5. Click on "favorite food"
   
   
6. click out of dropdown to cancel the selection
7. notice that "this field is required" is not visible + the bottom line thickness is a little bit bigger than standard
   
8. click again outside of the control, to remove focus on the control
9. the "this field is required" message is visible now
   

What is the use-case or motivation for changing an existing behavior?

As on the plunker shown, autocomplete is behaving move intuitevly when deselecting / closing the dropdown. Validation occurs immediatelly as you would expect it. With mat-select it's not. In order to kick off the validation, you need to click twice somewhere on the form (some sort).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

material: 5.0.0-rc.1-6a9fbfe
angular: as for version above
OS: win 10 64bit enterprise
browser: all

Is there anything else we should know?

nope, keep up the good work over this repository :)

[willshowell]

What is the expected behavior?

When focus is not on the control anymore, the error message should be visible.

That is what is happening. When you open the mat-select and then click on the backdrop to close it, the focus still remains on the mat-select. Only once you click again are you actually blurring it.

Try using tab, esc, and the arrow keys to navigate the two inputs. It may help illuminate what the current behavior is.

[k-krupka]

@willshowell this is not what I would expect. I would expect the mat-select to behave like mat-autocomplete in this example (plunker above). I am explicitly clicking outside of select's expanded dropdown to deselect, ergo to loose the focus from the control. I don't want to do extra click to "actually" quit the control and then to loose focus :) :)

If we take the situation as you say, it means that in autocomplete there is a bug, because the focus is lost when you deselect the value.

Using keyboard keys as you mentioned is not showing the issue. Using keyboard this is behaving properly as expected. True that.

[willshowell]

I think maybe the better argument would be that mat-select behaves like a native select

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

And mat-autocomplete behaves like native autofill (at least on Chrome)

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete

[k-krupka]

For me, the examples you've provided are not exactly showing the issue with mat-select I was referring to. The elements are not styled like our material ones. It doesn't matter if we have the fields required or not. It's the same situation. Here:
http://plnkr.co/edit/1Kj64w?p=preview

For me it is just wierd, that one type of field is behaving very differently in this context.

How behaves the mat-autocomplete:

How behaves the mat-select:

If you insist that this is the correct behavior, I should be able to implement one of the events and set the focused property on the mat-select component which will remove this last step for me. I mean... right?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}