Input with Label (or TextField) inside Menu: typing the first character of the label blurs the input

[barbalex]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/modest-heyrovsky-6tyisc?file=/src/App.tsx
Second example demonstrating same behaviour with TextField: https://codesandbox.io/s/dreamy-tess-wx86oc?file=/src/App.tsx

Steps:

1. klick into the input
2. type the first character of it's label, in this case an "f"
3. watch the input blur (in our app this even closes the menu)
4. type a different character instead
5. watch it being written into the input

Expected behavior 🤔

the input should not blur when typing any character

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 19.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 109.0.5414.121
    Edge: Spartan (44.22621.1105.0), Chromium (110.0.1587.41)
  npmPackages:
    @emotion/react: 11.10.5 => 11.10.5 
    @emotion/styled: 11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.117 
    @mui/core-downloads-tracker:  5.11.8 
    @mui/material: 5.11.8 => 5.11.8 
    @mui/private-theming:  5.11.7 
    @mui/styled-engine:  5.11.8 
    @mui/system:  5.11.8 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.7 
    @types/react: 18.0.27 => 18.0.27 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.5 => 4.9.5 

[siriwatknp]

It looks like a bug to me but needs more investigation.

[ZeeshanTamboli]

I suppose the label, which is a menu item child, is being focused which causes the input to blur. This is the feature of the Menu component. If there is a menu item that starts with that alphabet it will be focused (in this case the label). See demo for an example. You can prevent the keyboard events from bubbling up to the Menu using event.stopPropagation().

Check the following CodeSandboxes:

• Input with label
• TextField

Similar kind of issues: #19116, #19096.

I believe we can close this issue. I hope it helps.

[barbalex]

Yeah, that explains it and also: As it is a feature, this is no bug. Just something to be aware of.
Thanks for great help and this tool.