Skip to content

Conversation

@zmdavis
Copy link
Contributor

@zmdavis zmdavis commented Jan 20, 2026

Summary

Fixes the Storybook search box immediately losing focus when clicking into it, particularly on stories that have modals/drawers open (like the Legacy Drawer story).

The root cause was that the FocusTrap component (used by Drawer, Modal, etc.) uses FocusScope from @react-aria/focus with contain={true}, which traps focus inside the component. When a story renders with a modal/drawer open, clicking the Storybook search box would cause focus to immediately return to the trapped element.

The fix wraps story content with FocusTrapContext.Provider with contain: false, which disables focus trapping in Storybook while preserving the behavior in production.

Testing approaches

  • Manually tested by navigating to the Legacy Drawer story (which has the drawer open by default)
  • Clicked on the search box and typed "button" - search maintained focus and displayed results correctly
  • Verified the drawer remained visible while using search

Link to Devin run: https://app.devin.ai/sessions/731006ba17a944138441298d219a7bcc
Requested by: Zach (@zmdavis)

Co-Authored-By: Zach <zach@launchdarkly.com>
@zmdavis zmdavis requested a review from a team as a code owner January 20, 2026 19:16
@changeset-bot
Copy link

changeset-bot bot commented Jan 20, 2026

⚠️ No Changeset found

Latest commit: 502bd64

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@devin-ai-integration
Copy link
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 533 kB

ℹ️ View Unchanged
Filename Size
apps/vscode/dist/client.js 111 kB
apps/vscode/dist/server.js 261 kB
packages/box/dist/index.es.js 7.26 kB
packages/box/dist/index.js 7.82 kB
packages/box/dist/style.css 2.67 kB
packages/button/dist/index.es.js 1.89 kB
packages/button/dist/index.js 2.32 kB
packages/button/dist/style.css 3 kB
packages/components/dist/index.es.js 19.1 kB
packages/components/dist/index.js 20 kB
packages/components/dist/style.css 8.45 kB
packages/core/dist/index.es.js 512 B
packages/core/dist/index.js 1.27 kB
packages/drawer/dist/index.es.js 1.76 kB
packages/drawer/dist/index.js 2.22 kB
packages/drawer/dist/style.css 497 B
packages/dropdown/dist/index.es.js 1.15 kB
packages/dropdown/dist/index.js 1.59 kB
packages/filter/dist/index.es.js 2.23 kB
packages/filter/dist/index.js 2.68 kB
packages/filter/dist/style.css 881 B
packages/focus-trap/dist/index.es.js 418 B
packages/focus-trap/dist/index.js 852 B
packages/form/dist/index.es.js 4.25 kB
packages/form/dist/index.js 4.73 kB
packages/form/dist/style.css 2.21 kB
packages/icons/dist/index.es.js 2.81 kB
packages/icons/dist/index.js 3.24 kB
packages/icons/dist/style.css 532 B
packages/menu/dist/index.es.js 3.69 kB
packages/menu/dist/index.js 4.16 kB
packages/menu/dist/style.css 872 B
packages/modal/dist/index.es.js 3.08 kB
packages/modal/dist/index.js 3.55 kB
packages/modal/dist/style.css 903 B
packages/navigation/dist/index.es.js 2.75 kB
packages/navigation/dist/index.js 3.21 kB
packages/navigation/dist/style.css 874 B
packages/overlay/dist/index.es.js 1.02 kB
packages/overlay/dist/index.js 1.42 kB
packages/popover/dist/index.es.js 3.01 kB
packages/popover/dist/index.js 3.43 kB
packages/popover/dist/style.css 529 B
packages/portal/dist/index.es.js 420 B
packages/portal/dist/index.js 835 B
packages/table/dist/index.es.js 1.01 kB
packages/table/dist/index.js 1.44 kB
packages/table/dist/style.css 700 B
packages/tokens/dist/fonts.css 183 B
packages/tokens/dist/index.css 1.47 kB
packages/tokens/dist/index.es.js 3.07 kB
packages/tokens/dist/index.js 3.11 kB
packages/tokens/dist/media-queries.css 113 B
packages/tokens/dist/themes.css 2.27 kB
packages/tooltip/dist/index.es.js 598 B
packages/tooltip/dist/index.js 1.02 kB
packages/tooltip/dist/style.css 337 B
packages/vars/dist/index.es.js 2.66 kB
packages/vars/dist/index.js 2.66 kB

compressed-size-action

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.

3 participants