[pickers] Unable to change value with keyboard when the input label is clicked

[brandong954]

Steps to reproduce

Steps:

1. Add a DatePicker component to the application
2. Click on the label of the date picker input, specifically where it eventually floats to once the input is selected.

Current behavior

The input becomes active, but unable to use the keyboard to modify date input.

Expected behavior

Clicking on the label of the DatePicker input allows input to be modified with keyboard similar to if the input itself is clicked.

Context

Modify date input with keyboard, even if clicking on the label of the input.

Your environment

npx @mui/envinfo

  Browsers:
    Microsoft Edge
      Version 129.0.2792.52 (Official build) (arm64)
    Google Chrome
      Version 128.0.6613.139 (Official Build) (arm64)
  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 22.9.0 - /usr/local/bin/node
    npm: 10.8.3 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.0
    @mui/icons-material: ^6.1.0 => 6.1.0
    @mui/material: ^6.1.0 => 6.1.0
    @mui/private-theming:  6.1.0
    @mui/styled-engine:  6.1.0
    @mui/system:  6.1.0
    @mui/types:  7.2.16
    @mui/utils:  6.1.0
    @mui/x-date-pickers: ^7.17.0 => 7.17.0
    @mui/x-internals:  7.17.0
    @types/react:  18.3.7
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Search keywords: DatePicker input keyboard

[michelengelen]

Hey @brandong954
thanks for opening this issue.

I can confirm that clicking the label focuses the input, but in some place where editing is not possible. This only reproduces on inputs that already have a value.

I'll add this to the board ... 👍🏼

[LukasTy]

Noting that arrow editing works, but letter editing is broken.
It's working with the default v8 behavior - accessible DOM structure.