[material-ui][Autocomplete] Caret transformation issue with font size change

[vednro]

Steps to reproduce

Link to live example: Disclosure not possible due to data protection guidelines

Steps:

1. Setup only the minimum required packages (react, mui, emotion, I use vite)
2. Implement the Autocomplete component as shown in the docs
3. Change the font-size in the browser settings to, for example, 32

Current behavior

When the font size in the browser is changed, the Autocomplete's caret icon does not transform correctly. It appears to be using pixels for sizes, leading to issues with responsiveness see attached image.

Expected behavior

The Autocomplete's caret icon should transform appropriately staying in the same position when the font size in the browser is changed. It should be responsive and adapt to different font sizes.

Context

I am trying to create a responsive user interface, and the issue with Autocomplete's caret icon transformation is affecting the overall layout and user experience. This component is used in many places for maintain the personal and business related profile.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

  Using Google Chrome Version 121.0.6167.85 (Offizieller Build) (64-Bit)
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.144)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.33
    @mui/core-downloads-tracker:  5.15.6
    @mui/material: ^5.15.6 => 5.15.6
    @mui/private-theming:  5.15.6
    @mui/styled-engine:  5.15.6
    @mui/system:  5.15.6
    @mui/types:  7.2.13
    @mui/utils:  5.15.6
    @types/react: ^18.2.43 => 18.2.48
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.3.3

Search keywords: autocomplete, caret, fontsize, transform, pixel, chrome

[DiegoAndai]

Hey @NiklasVeda, thanks for the report!

I can confirm the behavior:

The caret seems to move down instead of staying centered. Accepting as a bug.

[dpertsin]

Hey, @DiegoAndai mind if I fix this one?