Skip to content

fix(tour): restore focus when the tour is dismissed - #3497

Merged
segunadebayo merged 3 commits into
chakra-ui:mainfrom
jsabutis:fix/tour-restore-focus
Oct 21, 2026
Merged

segunadebayo merged 3 commits into
chakra-ui:mainfrom
jsabutis:fix/tour-restore-focus

Conversation

@jsabutis

Copy link
Copy Markdown
Contributor

Closes #3496

Description

The tour focus trap turns off returnFocusOnDeactivate so focus does not jump back between steps. Nothing restored focus when the tour ended, so dismissing it left focus on the body.

Current behavior

After Escape, the close trigger or skip, focus is on <body>.

New behavior

  • The machine remembers the focused element on start and focuses it again on dismiss or skip.
  • If the user already moved focus outside the tour, for example by clicking another control, focus is left alone.
  • Two e2e tests cover Escape and the close trigger. Both fail before the fix and pass after.
  • Added a patch changeset for @zag-js/tour.

Is this a breaking change (Yes/No):

No

Additional Information

Tour e2e tests pass on React (15 passed, 3 skipped as before). Tour typecheck and lint pass.

The tour traps focus in its content while a step is open, with
returnFocusOnDeactivate turned off so focus does not jump back between
steps. Nothing restored focus when the tour ended, so dismissing it with
Escape, the close trigger or skip left focus on the body.

Remember the focused element when the tour starts and focus it again on
dismiss or skip, unless the user already moved focus elsewhere.

Fixes chakra-ui#3496

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@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 4:08pm UTC
zag-solid Ready Ready Preview Oct 21, 2026 4:08pm UTC
zag-svelte Ready Ready Preview Oct 21, 2026 4:08pm UTC
zag-vue Ready Ready Preview Oct 21, 2026 4:08pm UTC
zag-website Ready Ready Preview Oct 21, 2026 4:08pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d6e4ad1

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/tour 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/date-picker 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/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

This branch was successfully deployed

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

Tour: focus is lost to the body when the tour is dismissed

2 participants