Skip to content

fix(date-picker): select the focused date with Space - #3500

Merged
segunadebayo merged 3 commits into
chakra-ui:mainfrom
jsabutis:fix/date-picker-space-select
Oct 21, 2026
Merged

segunadebayo merged 3 commits into
chakra-ui:mainfrom
jsabutis:fix/date-picker-space-select

Conversation

@jsabutis

Copy link
Copy Markdown
Contributor

Closes #3499

Description

The date picker table handled Enter but not Space, and the cell triggers use role="button" rather than native buttons, so Space on a focused date did nothing. The APG date picker dialog pattern selects the date with either key.

Current behavior

Space on a focused date, month or year cell does nothing.

New behavior

  • Space runs the Enter handler, using the same keyMap.Enter?.(event) pattern as menu, select and listbox.
  • Added an e2e test on date-picker/basic that selects today with Space. It fails on main and passes with the fix.
  • Added a patch changeset for @zag-js/date-picker.

Is this a breaking change (Yes/No):

No

Additional Information

  • Date picker e2e tests pass on React (59 of 59 across the day, month and year specs). Date picker typecheck and lint pass.

The calendar table keydown handler mapped Enter to TABLE.ENTER but had
no Space entry. The day, month and year cell triggers are elements with
role="button", not native buttons, so the browser does not turn Space
into a click either. Pressing Space on a focused date did nothing,
although the WAI-ARIA date picker dialog pattern lists Space and Enter
as the keys that select the date and close the dialog.

Map Space to the Enter handler, as menu, select and listbox do.

Fixes chakra-ui#3499

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d184d2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages
Name Type
@zag-js/date-picker Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/docs Patch
@zag-js/preact Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/svelte Patch
@zag-js/vanilla Patch
@zag-js/vue Patch
@zag-js/accordion Patch
@zag-js/angle-slider Patch
@zag-js/async-list Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/cascade-select Patch
@zag-js/checkbox Patch
@zag-js/clipboard Patch
@zag-js/collapsible Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-input Patch
@zag-js/dialog Patch
@zag-js/drawer Patch
@zag-js/editable Patch
@zag-js/file-upload Patch
@zag-js/floating-panel Patch
@zag-js/hover-card Patch
@zag-js/image-cropper Patch
@zag-js/listbox Patch
@zag-js/marquee Patch
@zag-js/menu Patch
@zag-js/navigation-menu Patch
@zag-js/number-input Patch
@zag-js/pagination Patch
@zag-js/password-input Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/progress Patch
@zag-js/qr-code Patch
@zag-js/radio-group Patch
@zag-js/rating-group Patch
@zag-js/scroll-area Patch
@zag-js/select Patch
@zag-js/signature-pad Patch
@zag-js/slider Patch
@zag-js/splitter Patch
@zag-js/steps Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/timer Patch
@zag-js/toast Patch
@zag-js/toc Patch
@zag-js/toggle-group Patch
@zag-js/toggle Patch
@zag-js/tooltip Patch
@zag-js/tour Patch
@zag-js/tree-view Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-query Patch
@zag-js/file-utils Patch
@zag-js/focus-trap Patch
@zag-js/focus-visible Patch
@zag-js/highlight-word Patch
@zag-js/hotkeys Patch
@zag-js/i18n-utils Patch
@zag-js/interact-outside Patch
@zag-js/json-tree-utils Patch
@zag-js/live-region Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/scroll-snap Patch
@zag-js/stringify-state Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
zag-nextjs Ready Ready Preview Oct 21, 2026 12:56pm UTC
zag-solid Ready Ready Preview Oct 21, 2026 12:56pm UTC
zag-svelte Ready Ready Preview Oct 21, 2026 12:56pm UTC
zag-vue Ready Ready Preview Oct 21, 2026 12:56pm UTC
1 Skipped Deployment
Project Deployment Actions Updated
zag-website Ignored Ignored Preview Oct 21, 2026 12:56pm UTC

Request Review

This branch was successfully deployed

4 active deployments
Preview – zag-solid — d184d2db Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-svelte — d184d2db Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-vue — d184d2db Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-nextjs — d184d2db Deployed Oct 21, 2026 by vercel[bot]
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.

Date picker: Space does not select the focused date

2 participants