bug(select[matNativeControl]): Sometimes the options are not triggered

[br-kwon]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

prior to mdc migration

Description

when using select[matNativeControl] inside <mat-form-field appearance="outline"> there's a couple of problems:

1. when using an empty string as the default option, the label appears within the form field. directly clicking the label does not trigger the options.
2. clicking just inside mat-form-field (inside the outline) also does not trigger the options

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-r49x2i?file=src%2Fapp%2Fexample-component.html
Steps to reproduce:

1. click the label while it's within the form field
2. also click just inside the bounds of the form field

Expected Behavior

triggers the options

Actual Behavior

options are not triggered - label just moves up

Environment

• Angular: 16.1.2
• CDK/Material: 16.1.3
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[wagnermaciel]

Hi @br-kwon, it seems like there are two issues described here. Please open up a separate issue for the unexpected behavior when passing an empty string as a default option so that we can track & triage it separately

[br-kwon]

@wagnermaciel thanks for taking a look! i think ideally both issues would be fixed at the same time. they both describe issues in triggering the options (dead zones inside mat-form-field).