fix: add blueprint provider to root layout (#687)

Set the portal container to the root layout div so we can open dialogs when in fullscreen
zakodium-oss · Mar 16, 2024 · e8aebd4 · e8aebd4
1 parent a91278f
commit e8aebd4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/components/root-layout/RootLayout.tsx b/src/components/root-layout/RootLayout.tsx
@@ -1,4 +1,4 @@
-import { FocusStyleManager } from '@blueprintjs/core';
+import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { CSSProperties, ReactNode, useCallback, useState } from 'react';
 
@@ -35,11 +35,15 @@ export function RootLayout(props: RootLayoutProps) {
   return (
     <div style={{ ...style, ...props.style }} translate="no">
       <CustomDivPreflight ref={ref}>
-        <RootLayoutProvider innerRef={rootRef}>
-          <QueryClientProvider client={queryClient}>
-            <AccordionProvider>{props.children}</AccordionProvider>
-          </QueryClientProvider>
-        </RootLayoutProvider>
+        <BlueprintProvider
+          {...(rootRef ? { portalContainer: rootRef } : undefined)}
+        >
+          <RootLayoutProvider innerRef={rootRef}>
+            <QueryClientProvider client={queryClient}>
+              <AccordionProvider>{props.children}</AccordionProvider>
+            </QueryClientProvider>
+          </RootLayoutProvider>
+        </BlueprintProvider>
       </CustomDivPreflight>
     </div>
   );

diff --git a/src/pages/demo/App.tsx b/src/pages/demo/App.tsx
@@ -10,14 +10,14 @@ import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 
 export default function App() {
   return (
-    <RootLayout>
-      <KbsProvider>
-        <AppStateProvider>
-          <FullScreenProvider>
+    <FullScreenProvider>
+      <RootLayout>
+        <KbsProvider>
+          <AppStateProvider>
             <MainLayout />
-          </FullScreenProvider>
-        </AppStateProvider>
-      </KbsProvider>
-    </RootLayout>
+          </AppStateProvider>
+        </KbsProvider>
+      </RootLayout>
+    </FullScreenProvider>
   );
 }