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?

[crisbeto]

Yeah I think it makes sense that it's styled as a text cursor since it is a text input.

[RobinKamps]

its not about the text cursor, but about where it should be applied.
the m2 material specs seems to have slighly different text cursor behavior. The labels have default cursor instead of text cursor on both appearances. On appearance outline the cursor is text for the wole input (no default cursor above and below the input) except for the right and left padding. In m3 / web material specs nothing can be found about the hover / cursor.

Angular Material MDC implementation has text cursor on the labels and different margins on appearance outline.

[RobinKamps]

[RobinKamps]

but anyway: using the whole input (without any default cursor)

.mdc-text-field {
  cursor: text;
}

results in a much better user experience in my opinion then the different cursors/paddings etc.

[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.}