Can not type "S" in Menu Textfield

[manojspace]

I was trying to add textfield in menu, and it works fine.
But when I type S as the first keyword, it doesn't take that key as input, instead it just highlights the menu area.

If S is a shortcut key, then how to disable it for that menu instance?

Can someone help here for this problem.

The code snippet is here:
https://codesandbox.io/s/zealous-feather-ehvec

Just try typing start with S key.

[jimmy-james]

I was trying to add textfield in menu, and it works fine.
But when I type S as the first keyword, it doesn't take that key as input, instead it just highlights the menu area.

If S is a shortcut key, then how to disable it for that menu instance?

Can someone help here for this problem.

The code snippet is here:
https://codesandbox.io/s/zealous-feather-ehvec

Just try typing start with S key.

Typing S does not work specifically when it is the first letter typed on focus. It works after typing another letter first however.

[manojspace]

Is there any way to overcome this problem?

[jimmy-james]

Is there any way to overcome this problem?

Looks like putting a Textfield component inside of a Menu component causes the problem because, if you notice, the "S" you are typing is found in the Textfield Label attribute. If you change/remove the Label, you'll find that it doesn't catch on "S" anymore.

This seems to be happening because MUI Menu moves the focus based on what it finds in the MenuList. For some reason, it's also targeting the Label, which it shouldn't, IMO.

Do you have to have a Textfield within the Menu?

[jimmy-james]

Ah, I see. MUI Menu traverses the MenuList items and focuses on every child item. When it focuses on your Textfield child, it sees the text inside of it in the Label ("Standard") and processes it just as if it was an expected MenuList item.

[jimmy-james]

Seeing if a fix can be merged.
If not, then you'll have to try a different approach. Not sure what your specific use case is.

[mbrookes]

You can prevent keyboard events from bubbling up from the input to the menu.

[mbrookes]

Duplicate of #19096

[manojspace]

Is there any way to overcome this problem?

Looks like putting a Textfield component inside of a Menu component causes the problem because, if you notice, the "S" you are typing is found in the Textfield Label attribute. If you change/remove the Label, you'll find that it doesn't catch on "S" anymore.

This seems to be happening because MUI Menu moves the focus based on what it finds in the MenuList. For some reason, it's also targeting the Label, which it shouldn't, IMO.

Do you have to have a Textfield within the Menu?

Sol.1: Removing the label it worked.
Sol.2: Prevent keyboard events as suggested by @mbrookes

onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     e.stopPropagation();
  }

<TextField onKeyDown={this.onKeyDown} />

Thank you soo much! You saved my day!

[TondeMoon]

Sol.1: Removing the label it worked. Sol.2: Prevent keyboard events as suggested by @mbrookes

`onKeyDown = (e: KeyboardEvent) => { e.stopPropagation(); }

`

Thank you soo much! You saved my day!

Thank you from 2022 for my saved days!

[nikitahlukhov]

One more thank you from 2022!

[ShaliniChauhan123]

thankyou from 2023

[vsvai]

onKeyDown = {(e: KeyboardEvent) => {
e.stopPropagation();
}}
Inside The textField component fixed will fix
this issue after the onChange

[abinicorn]

Thank you from 2023! Saved my day!

[akselipalmer]

Thank you from 2023! Our team was so confused. Saved us.

[palmerelias]

I'm not sure why it wasn't obvious to me at first, but 'onKeyDown' is a prop for inputBase.

<InputBase
onKeyDown={(e) => {
e.stopPropagation();
}}
onChange={handleChange}
/>

Thanks for the help from 2023!!

[afaqahmedkhan]

onKeyDown = {(e: KeyboardEvent) => { e.stopPropagation(); }} Inside The textField component fixed will fix this issue after the onChange

Thanks from 2024

[jtimus]

Thanks from March 2024!

[AlessandroGenerale17]

Thanks from April 2024! 👍🏻

[rutvik-cybercom]

Thanks from April 2024!