Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tabs][RadioGroup] Handle modifier keys #1529

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Mar 4, 2025

Fixes #1465

All composite components will now prevent arrow key navigation if any modifier key (Shift, Ctrl, Alt, Meta) is pressed by default unless it's allowed with the modifierKeys prop.

The exception is RadioGroup since HTML radio groups work normally when Shift is held (example)

Demo:

@mj12albert mj12albert added component: tabs This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work component: RadioGroup The React component. labels Mar 4, 2025
Copy link

netlify bot commented Mar 4, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit c5ac9fd
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67c996bf163db500084e663d
😎 Deploy Preview https://deploy-preview-1529--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@mj12albert mj12albert force-pushed the fix/tab-modifier-keys branch from bee18f6 to 84117fc Compare March 5, 2025 08:00
@mj12albert mj12albert marked this pull request as ready for review March 5, 2025 08:16
@mj12albert mj12albert force-pushed the fix/tab-modifier-keys branch from e11041c to f1a7674 Compare March 5, 2025 10:08
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 5, 2025
@mj12albert mj12albert force-pushed the fix/tab-modifier-keys branch from f1a7674 to 8fb06fe Compare March 5, 2025 15:39
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 5, 2025
@mj12albert mj12albert force-pushed the fix/tab-modifier-keys branch from 8fb06fe to bcf14fe Compare March 6, 2025 10:54
@@ -76,6 +94,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
enableHomeAndEndKeys = false,
stopEventPropagation = false,
disabledIndices,
modifierKeys = [],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this default be specified outside so it's a stable reference?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 ~ fixed

@mj12albert mj12albert requested a review from atomiks March 6, 2025 13:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: RadioGroup The React component. component: tabs This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[tabs] Arrow keys should not move Tab focus if any modifier keys are pressed
2 participants