Material-ui: Can not type "S" in Menu Textfield

[manojswami600]

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.

[manojswami600]

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

[manojswami600]

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) => {
e.stopPropagation();
}

`

Thank you soo much! You saved my day!