[material-ui][Menu] After opening Menu, it is not possible to refresh page by ctrl + R

[JaniecMichal]

Steps to reproduce

Link to live example: (required)

Steps:

1. Open Menu
2. Choose on keyboard ctrl + r
3. Shortcut is igonored, page has not refreshed

Current behavior

This is weird case because we using this component in our apps and we have some places when ctrl + r after open Menu don't works. We have also places when the same component but rendered for different users ones works and ones not works

Expected behavior

Refreshing by keyboard shortcut should works always?

Context

Maybe it is caused by internal feature of Menu component that after click into key is searching item which match (by first letter)

Your environment

Output from `npx @mui/envinfo` goes here. System: OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.10.0/bin/npm pnpm: 8.15.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm Browsers: Chrome: 127.0.6533.99

Search keywords: Menu, MenuItem, refresh, ctr + r

[ZeeshanTamboli]

Could you provide a minimal reproduction? A live example would be ideal. You can start with this StackBlitz template.

It works on the MUI site next.mui.com:

issue-43215.mp4

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[JaniecMichal]

@ZeeshanTamboli I just explored reason of this behavior. Looks that if MenuItem have content which start from R letter or any other letter then using shortcut with this letter won't work. You can see this issue also if you use attached by you this StackBlitz template.

[MateuszGroth]

https://stackblitz.com/edit/react-bdf3td?file=Demo.tsx

[ZeeshanTamboli]

@JaniecMichal The MenuItem component has focus when menu is opened, and the Menu listens for key events, such as typing the first letter of an item. This can prevent the default browser action, like refreshing the page with Ctrl + R.

You can stop the event from reaching the Menu by calling event.stopPropagation() in MenuItem's handleKeyDown when Ctrl is pressed. This prevents the Menu from intercepting the event, allowing the browser to handle the page refresh as expected.

See the example here: https://stackblitz.com/edit/react-bdf3td-pldymk?file=Demo.tsx.

[MateuszGroth]

@ZeeshanTamboli The fix does not work on mac - probably need to check for the metaKey instead of the ctrlKey

[ZeeshanTamboli]

@ZeeshanTamboli The fix does not work on mac - probably need to check of metaKey instead of the ctrlKey

Yup.

[MateuszGroth]

Shouldn't it work like that by default tho? I can imagine this being an issue for more people

[ZeeshanTamboli]

Shouldn't it work like that by default tho?

Alright. I compared the Menu component with other libraries like React Aria, Radix UI, and even Base UI, which all support this feature. Maybe we should too, or wait until v7. I'd like to hear others' opinions. cc @aarongarciah @DiegoAndai @michaldudak

I can imagine this being an issue for more people

From what I found, no one has reported this issue since the Material UI Menu component was introduced.

[aarongarciah]

I'd consider this a bug. With the migration to Base UI in the horizon, I'm not sure we should be spending time on improving Menu.

I'll get back to you soon.

[aarongarciah]

I added the bug label. Contributions are more than welcome! This is the part of the code that handles the typeahead:

material-ui/packages/mui-material/src/MenuList/MenuList.js

Lines 168 to 195 in f1a5b88

	} else if (key.length === 1) {
	const criteria = textCriteriaRef.current;
	const lowerKey = key.toLowerCase();
	const currTime = performance.now();
	if (criteria.keys.length > 0) {
	// Reset
	if (currTime - criteria.lastTime > 500) {
	criteria.keys = [];
	criteria.repeating = true;
	criteria.previousKeyMatched = true;
	} else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
	criteria.repeating = false;
	}
	}
	criteria.lastTime = currTime;
	criteria.keys.push(lowerKey);
	const keepFocusOnCurrent =
	currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
	if (
	criteria.previousKeyMatched &&
	(keepFocusOnCurrent ||
	moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))
	) {
	event.preventDefault();
	} else {
	criteria.previousKeyMatched = false;
	}
	}

We should not prevent events that include modifier keys such as ctrl, meta, alt. For reference, here's the useTypeahead implementation from Floating UI: https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useTypeahead.ts#L155-L166

[DiegoAndai]

Added to the "Material UI with Base UI" milestone in case we don't get a contribution before it.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @JaniecMichal! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!