Clicking on padding around text field no longer focuses input

[austinw-fineart]

What is affected?

Accessibility, Component

Description

When I click on the inner padding around the input inside of a text field I expect it to focus on the input.
However, the focus is on the field itself leaving either the input unselected if it's empty or fully selected if it's not, like you tabbed into it.
It's possible this change in behavior was caused by a browser update as the current version of Firefox (135) does not exhibit this behavior and I do not recall older versions of Chrome doing this either but I don't know which version specifically.

Reproduction

https://material-web.dev/components/text-field/

Workaround

I have not found a workaround.

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

Failing in 2.2.0, worked in 2.2.0

Browser/OS/Node environment

Browser: Chrome 133.0.6943.127
OS: Windows 11
Node version: 22.13.1
npm version: 11.1.0

[rbjarnason]

Also started to happen for us now, have not found any workaround.

[austinw-fineart]

Chrome 132 appears to be the last working version, meaning 133 is what broke it. Now we just have to figure out if this was an intentional breaking change or a regression. My first thought was this: https://chromestatus.com/feature/5134341540413440

[willramanand]

Adding user-select: none; to the .input-wrapper class in _input.scss seems to partially address the issue.

  .input-wrapper {
    display: flex;
    user-select: none;
  }

When empty it focuses the input as expected, however if it is not empty the text is still selected.

I'm unsure if this is the best approach to solving the problem, but I thought I'd share what I had found so far.