Skip to content

fix: Carousel keyboard navigation for vertical orientation#10233

Open
mahdirajaee wants to merge 1 commit intoshadcn-ui:mainfrom
mahdirajaee:fix/carousel-vertical-keyboard
Open

fix: Carousel keyboard navigation for vertical orientation#10233
mahdirajaee wants to merge 1 commit intoshadcn-ui:mainfrom
mahdirajaee:fix/carousel-vertical-keyboard

Conversation

@mahdirajaee
Copy link
Copy Markdown

Bug

Fixes #10219

The Carousel component's handleKeyDown callback only handles ArrowLeft and ArrowRight keys, regardless of the carousel's orientation. When orientation is set to "vertical", pressing ArrowUp/ArrowDown does nothing, and ArrowLeft/ArrowRight still triggers prev/next navigation, which is incorrect for a vertical layout.

Fix

Updated handleKeyDown to check the orientation prop and select the appropriate key bindings:

  • Horizontal (default): ArrowLeft for previous, ArrowRight for next
  • Vertical: ArrowUp for previous, ArrowDown for next

Added orientation to the useCallback dependency array so the handler updates when orientation changes.

Files changed

  • apps/v4/registry/bases/base/ui/carousel.tsx
  • apps/v4/registry/bases/radix/ui/carousel.tsx

Both the base and radix implementations have been updated with the same fix.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 30, 2026

@mahdirajaee is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Carousel ignores ArrowUp/ArrowDown keys when orientation is vertical

1 participant