bug(mat-select): Select looses focus when activating one of children via mouse

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-fjmby9 (watch red/green boolean in toolbar)

Steps to reproduce:

1. Have mat-select with mat-options
2. Click on one of the options a. option gets de-selected

Expected Behavior

When clicking on options of select, the select gets de-focused.

Actual Behavior

When select is opened, its focus status is locked to true, until it gets closed. Upon closing the focus should be decided, whenever the focus is to be kept or not.

Clicking outside of options defocuses, esc keeps focus on select. This is the same as native select and how it works in mat-select now.

Environment

• Angular: 10.0.3
• CDK/Material: 10.0.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): WIndows

[crisbeto]

It’ll be reworked in terms of styling and accessibility treatment, but I think the general markup structure and events will stay more or less the same. I’ve added this to our team meeting agenda so we can figure out how we want to handle it.

[Akxe]

@crisbeto Anything came from the meeting?