From 502bd64bf9b63e3a6a644f99c149864fa97d206f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 20 Jan 2026 19:15:43 +0000
Subject: [PATCH] fix(storybook): disable focus trap to fix search box blur
 issue

Co-Authored-By: Zach <zach@launchdarkly.com>
---
 .storybook/preview.tsx | 43 ++++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f5dde5a25..1bf941da2 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type { DecoratorFunction, GlobalTypes, Parameters } from 'storybook/internal/types';
 
 import { Box } from '@launchpad-ui/box';
+import { FocusTrapContext } from '@launchpad-ui/focus-trap';
 import sprite from '@launchpad-ui/icons/img/sprite.svg';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { BrowserRouter, useNavigate } from 'react-router';
@@ -156,29 +157,31 @@ const decorators: DecoratorFunction<ReactRenderer>[] = [
 		return (
 			<BrowserRouter>
 				<RouterProvider>
-					{mirror ? (
-						<Box display="flex" flexDirection={sideBySide ? 'row' : 'column'} minHeight="100vh">
-							<Box
-								padding="$400"
-								width={sideBySide ? '50vw' : undefined}
-								height={stacked ? '50vh' : undefined}
-							>
-								<StoryFn />
+					<FocusTrapContext.Provider value={{ contain: false }}>
+						{mirror ? (
+							<Box display="flex" flexDirection={sideBySide ? 'row' : 'column'} minHeight="100vh">
+								<Box
+									padding="$400"
+									width={sideBySide ? '50vw' : undefined}
+									height={stacked ? '50vh' : undefined}
+								>
+									<StoryFn />
+								</Box>
+								<Box
+									data-theme="dark"
+									padding="$400"
+									width={sideBySide ? '50vw' : undefined}
+									height={stacked ? '50vh' : undefined}
+								>
+									<StoryFn />
+								</Box>
 							</Box>
-							<Box
-								data-theme="dark"
-								padding="$400"
-								width={sideBySide ? '50vw' : undefined}
-								height={stacked ? '50vh' : undefined}
-							>
+						) : (
+							<Box padding="$400">
 								<StoryFn />
 							</Box>
-						</Box>
-					) : (
-						<Box padding="$400">
-							<StoryFn />
-						</Box>
-					)}
+						)}
+					</FocusTrapContext.Provider>
 				</RouterProvider>
 			</BrowserRouter>
 		);