bug(input, select, autocomplete): wrong cursor on hover inner padding

[RobinKamps]

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

No response

Description

According to the Material Standard the cursor should always be text for autocomplete & input and pointer for select.
Instead the cursor is only set to text/pointer on the standard html element - not the container, which has a padding where the cursors are default.
On the select it gets a bit more wierd, because the cursor wobbles from default (on the container padding) to text (on the label) to the pointer (on the html standard input).

Reproduction

Steps to reproduce:

1. head to the docs for autocomplete/input or select .e.g. https://material.angular.io/components/select/overview
2. hover over the elements

Expected Behavior

the cursor should stay the same if hovered over the component.

Actual Behavior

the cursor is different on the container padding / label (not material strandard compliant)

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

[CramericaIndustries]

Just was about to report the same bug. Wrong cursor appears also when you hover the mouse above the mat-label (red frame)

My CSS workaround for mat-select is...

mat-form-field:has(mat-select) mat-label {
    cursor: pointer;
}

[felhag]

Looks to me like this fix is the culprit. If you remove the pointer-events: all css property the cursor behaves fine.

[RobinKamps]

unfortunetaly this fix in 16.2.5 does not work on inputs and thus do not work on autocomplete (works on selects only).

[felhag]

@RobinKamps This was actually intended by me. Since clicking the label is actually focusing the input I think it make sense to style it as a text cursor. Couldn't find much about it in the specs though... @crisbeto What do you think?