material-ui
material-ui copied to clipboard
mui
Nav Tabs variant of Tabs does not respect metakey clicks
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Summary 💡
When replacing the Tab component with something like an anchor, a user holding metakey (apple command/or alt) and clicking on the tab should open it in a new tab and not change the current tab.
Currently this is not true, you can check this by looking at the docs example https://mui.com/material-ui/react-tabs/#nav-tabs .
The docs example prevents anything from happening, but even if do something like this in the onClick
if (event.metaKey) {
event.stopPropagation();
} else {
event.preventDefault();
}
You'll find that the tab in the original window changes. Ideally this should be preventable.
Examples 🌈
No response
Motivation 🔦
No response
@shughes-uk just remove event.preventDefault() from onClick event
working example: https://codesandbox.io/s/ecstatic-mahavira-lmfffh?file=/demo.tsx
This results in a full page load when not using the metakey. The example you've posted is actually broken because it's not tracking tab state via search params or equivalent.
The ideal state is
- User clicks without metakey -> tab changes and no page load happens
- User clicks with metakey -> new tab opens
If you make the preventDefault conditional on metakey being held, you see behavior where the tab still changes in the original page AND a new tab opens
@shughes-uk updated code, now it is working as expected. https://codesandbox.io/s/ecstatic-mahavira-lmfffh?file=/demo.tsx
We could update the demo actually. One comment I have is that we should use the e.ctrlKey instead of checking the e.key, as the sandbox does not work on Windows. @sai6855 would you like to create a PR for this?
@shughes-uk this demo should just give an idea of what's possible, the implementation would depend on the routing framework you use.
Ignoring ctrl-click isn't enough (new tab), there is also shift key (new window), to not prevent default. But overall, this demo is not meant to be functional. A change proposal: https://github.com/mui/material-ui/pull/35597#issuecomment-1364695166.
