diff --git a/examples/07-collaboration/05-comments/src/SettingsSelect.tsx b/examples/07-collaboration/05-comments/src/SettingsSelect.tsx
index 0dfc79dc3f..683d19de84 100644
--- a/examples/07-collaboration/05-comments/src/SettingsSelect.tsx
+++ b/examples/07-collaboration/05-comments/src/SettingsSelect.tsx
@@ -1,4 +1,8 @@
-import { ComponentProps, useComponentsContext } from "@blocknote/react";
+import {
+  ComponentProps,
+  useComponentsContext,
+  useEditorPortalElement,
+} from "@blocknote/react";
 
 // This component is used to display a selection dropdown with a label. By using
 // the useComponentsContext hook, we can create it out of existing components
@@ -9,6 +13,10 @@ export const SettingsSelect = (props: {
   items: ComponentProps["FormattingToolbar"]["Select"]["items"];
 }) => {
   const Components = useComponentsContext()!;
+  // The select's dropdown portals into the editor's portal element, which keeps
+  // it themed and clear of any overflow clipping. The prop is required, so it
+  // can't be left out by accident.
+  const editorPortalElement = useEditorPortalElement();
 
   return (
     <div className={"settings-select"}>
@@ -17,6 +25,7 @@ export const SettingsSelect = (props: {
         <Components.Generic.Toolbar.Select
           className={"bn-select"}
           items={props.items}
+          portalRoot={editorPortalElement}
         />
       </Components.Generic.Toolbar.Root>
     </div>
diff --git a/examples/07-collaboration/06-comments-with-sidebar/src/SettingsSelect.tsx b/examples/07-collaboration/06-comments-with-sidebar/src/SettingsSelect.tsx
index 0dfc79dc3f..683d19de84 100644
--- a/examples/07-collaboration/06-comments-with-sidebar/src/SettingsSelect.tsx
+++ b/examples/07-collaboration/06-comments-with-sidebar/src/SettingsSelect.tsx
@@ -1,4 +1,8 @@
-import { ComponentProps, useComponentsContext } from "@blocknote/react";
+import {
+  ComponentProps,
+  useComponentsContext,
+  useEditorPortalElement,
+} from "@blocknote/react";
 
 // This component is used to display a selection dropdown with a label. By using
 // the useComponentsContext hook, we can create it out of existing components
@@ -9,6 +13,10 @@ export const SettingsSelect = (props: {
   items: ComponentProps["FormattingToolbar"]["Select"]["items"];
 }) => {
   const Components = useComponentsContext()!;
+  // The select's dropdown portals into the editor's portal element, which keeps
+  // it themed and clear of any overflow clipping. The prop is required, so it
+  // can't be left out by accident.
+  const editorPortalElement = useEditorPortalElement();
 
   return (
     <div className={"settings-select"}>
@@ -17,6 +25,7 @@ export const SettingsSelect = (props: {
         <Components.Generic.Toolbar.Select
           className={"bn-select"}
           items={props.items}
+          portalRoot={editorPortalElement}
         />
       </Components.Generic.Toolbar.Root>
     </div>
diff --git a/examples/07-collaboration/11-versioning-yjs13/src/SettingsSelect.tsx b/examples/07-collaboration/11-versioning-yjs13/src/SettingsSelect.tsx
index 0dfc79dc3f..683d19de84 100644
--- a/examples/07-collaboration/11-versioning-yjs13/src/SettingsSelect.tsx
+++ b/examples/07-collaboration/11-versioning-yjs13/src/SettingsSelect.tsx
@@ -1,4 +1,8 @@
-import { ComponentProps, useComponentsContext } from "@blocknote/react";
+import {
+  ComponentProps,
+  useComponentsContext,
+  useEditorPortalElement,
+} from "@blocknote/react";
 
 // This component is used to display a selection dropdown with a label. By using
 // the useComponentsContext hook, we can create it out of existing components
@@ -9,6 +13,10 @@ export const SettingsSelect = (props: {
   items: ComponentProps["FormattingToolbar"]["Select"]["items"];
 }) => {
   const Components = useComponentsContext()!;
+  // The select's dropdown portals into the editor's portal element, which keeps
+  // it themed and clear of any overflow clipping. The prop is required, so it
+  // can't be left out by accident.
+  const editorPortalElement = useEditorPortalElement();
 
   return (
     <div className={"settings-select"}>
@@ -17,6 +25,7 @@ export const SettingsSelect = (props: {
         <Components.Generic.Toolbar.Select
           className={"bn-select"}
           items={props.items}
+          portalRoot={editorPortalElement}
         />
       </Components.Generic.Toolbar.Root>
     </div>
diff --git a/packages/ariakit/src/menu/Menu.tsx b/packages/ariakit/src/menu/Menu.tsx
index 177dc37f73..f1a5c527c0 100644
--- a/packages/ariakit/src/menu/Menu.tsx
+++ b/packages/ariakit/src/menu/Menu.tsx
@@ -15,9 +15,7 @@ import { createContext, forwardRef, useContext } from "react";
 
 // Threads the `portalRoot` override from `Menu` (the provider) down to
 // `MenuDropdown`, where ariakit's `portalElement` prop actually lives.
-const PortalRootContext = createContext<HTMLElement | null | undefined>(
-  undefined,
-);
+const PortalRootContext = createContext<HTMLElement | null>(null);
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   const {
@@ -25,6 +23,9 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     onOpenChange,
     position,
     portalRoot,
+    // ariakit's `virtualFocus` keeps DOM focus on the editor (roving via
+    // `aria-activedescendant`), so there is no focus to suppress here.
+    preventFocusOnOpen: _preventFocusOnOpen,
     sub: _sub, // unused
     ...rest
   } = props;
@@ -63,7 +64,10 @@ export const MenuDropdown = forwardRef<
     <AriakitMenu
       unmountOnHide={true}
       className={mergeCSSClasses("bn-ak-menu", className || "")}
-      portalElement={portalRoot ?? undefined}
+      // Ariakit falls back to a body-appended div for a missing element, so
+      // don't portal at all until there is one (editor not mounted yet).
+      portal={portalRoot !== null}
+      portalElement={portalRoot}
       ref={ref}
     >
       {children}
diff --git a/packages/ariakit/src/popover/Popover.tsx b/packages/ariakit/src/popover/Popover.tsx
index df8e01128b..93d2d8141b 100644
--- a/packages/ariakit/src/popover/Popover.tsx
+++ b/packages/ariakit/src/popover/Popover.tsx
@@ -8,9 +8,7 @@ import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { createContext, forwardRef, useContext } from "react";
 
-const PortalRootContext = createContext<HTMLElement | null | undefined>(
-  undefined,
-);
+const PortalRootContext = createContext<HTMLElement | null>(null);
 
 export const PopoverTrigger = forwardRef<
   HTMLButtonElement,
@@ -40,7 +38,10 @@ export const PopoverContent = forwardRef<
         className || "",
         variant === "panel-popover" ? "bn-ak-panel-popover" : "",
       )}
-      portalElement={portalRoot ?? undefined}
+      // Ariakit falls back to a body-appended div for a missing element, so
+      // don't portal at all until there is one (editor not mounted yet).
+      portal={portalRoot !== null}
+      portalElement={portalRoot}
       ref={ref}
     >
       {children}
@@ -51,7 +52,15 @@ export const PopoverContent = forwardRef<
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
-  const { children, open, onOpenChange, position, portalRoot, ...rest } = props;
+  const {
+    children,
+    open,
+    onOpenChange,
+    position,
+    portalRoot,
+    preventFocusOnOpen: _preventFocusOnOpen, // unused; see Menu.tsx
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
diff --git a/packages/ariakit/src/toolbar/ToolbarSelect.tsx b/packages/ariakit/src/toolbar/ToolbarSelect.tsx
index 26d817976e..4eca7d3a5f 100644
--- a/packages/ariakit/src/toolbar/ToolbarSelect.tsx
+++ b/packages/ariakit/src/toolbar/ToolbarSelect.tsx
@@ -16,7 +16,14 @@ export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled, portalRoot, ...rest } = props;
+  const {
+    className,
+    items,
+    isDisabled,
+    portalRoot,
+    preventFocusOnOpen: _preventFocusOnOpen, // unused; see Menu.tsx
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
@@ -40,7 +47,10 @@ export const ToolbarSelect = forwardRef<
         className={mergeCSSClasses("bn-ak-popover", className || "")}
         ref={ref}
         gutter={4}
-        portalElement={portalRoot ?? undefined}
+        // Ariakit falls back to a body-appended div for a missing element,
+        // so don't portal at all until there is one (editor not mounted yet).
+        portal={portalRoot !== null}
+        portalElement={portalRoot}
       >
         {items.map((option) => (
           <AriakitSelectItem
diff --git a/packages/mantine/src/menu/Menu.tsx b/packages/mantine/src/menu/Menu.tsx
index 4a04322152..e28f568175 100644
--- a/packages/mantine/src/menu/Menu.tsx
+++ b/packages/mantine/src/menu/Menu.tsx
@@ -16,7 +16,15 @@ const SubMenuContext = createContext<
 >(undefined);
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
-  const { children, onOpenChange, position, portalRoot, sub, ...rest } = props;
+  const {
+    children,
+    onOpenChange,
+    position,
+    portalRoot,
+    preventFocusOnOpen,
+    sub,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
@@ -38,9 +46,9 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     <MantineMenu
       withinPortal={!!portalRoot}
       portalProps={portalRoot ? { target: portalRoot } : undefined}
-      // Do not move focus to dropdown when portaled (mobile), as it blurs the
-      // editor's contentEditable and dismisses the on-screen keyboard.
-      trapFocus={portalRoot ? false : undefined}
+      // Do not move focus to the dropdown when requested (mobile), as it blurs
+      // the editor's contentEditable and dismisses the on-screen keyboard.
+      trapFocus={preventFocusOnOpen ? false : undefined}
       middlewares={{ flip: true, shift: true, inline: false, size: true }}
       onChange={onOpenChange}
       position={position}
diff --git a/packages/mantine/src/popover/Popover.tsx b/packages/mantine/src/popover/Popover.tsx
index 9a10c4ce44..15dd97b13d 100644
--- a/packages/mantine/src/popover/Popover.tsx
+++ b/packages/mantine/src/popover/Popover.tsx
@@ -11,7 +11,15 @@ import { forwardRef } from "react";
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
-  const { open, onOpenChange, position, portalRoot, children, ...rest } = props;
+  const {
+    open,
+    onOpenChange,
+    position,
+    portalRoot,
+    preventFocusOnOpen,
+    children,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
@@ -20,9 +28,9 @@ export const Popover = (
       middlewares={{ size: { padding: 20 } }}
       withinPortal={!!portalRoot}
       portalProps={portalRoot ? { target: portalRoot } : undefined}
-      // Do not move focus to the dropdown on mobile, as it blurs the editor's
-      // contentEditable and dismisses the on-screen keyboard.
-      trapFocus={portalRoot ? false : undefined}
+      // Do not move focus to the dropdown when requested (mobile), as it blurs
+      // the editor's contentEditable and dismisses the on-screen keyboard.
+      trapFocus={preventFocusOnOpen ? false : undefined}
       opened={open}
       onChange={onOpenChange}
       position={position}
diff --git a/packages/mantine/src/toolbar/ToolbarSelect.tsx b/packages/mantine/src/toolbar/ToolbarSelect.tsx
index 16f7023c16..567d723270 100644
--- a/packages/mantine/src/toolbar/ToolbarSelect.tsx
+++ b/packages/mantine/src/toolbar/ToolbarSelect.tsx
@@ -14,7 +14,14 @@ export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled, portalRoot, ...rest } = props;
+  const {
+    className,
+    items,
+    isDisabled,
+    portalRoot,
+    preventFocusOnOpen,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
@@ -32,9 +39,9 @@ export const ToolbarSelect = forwardRef<
         exitDuration: 0,
       }}
       disabled={isDisabled}
-      // Do not move focus to the dropdown on mobile, as it blurs the editor's
-      // contentEditable and dismisses the on-screen keyboard.
-      trapFocus={portalRoot ? false : undefined}
+      // Do not move focus to the dropdown when requested (mobile), as it blurs
+      // the editor's contentEditable and dismisses the on-screen keyboard.
+      trapFocus={preventFocusOnOpen ? false : undefined}
       middlewares={{
         flip: true,
         shift: true,
diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx
index d4a6df40d6..519f3ce431 100644
--- a/packages/react/src/components/Comments/Comment.tsx
+++ b/packages/react/src/components/Comments/Comment.tsx
@@ -18,6 +18,7 @@ import {
   Components,
   useComponentsContext,
 } from "../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../editor/EditorPortalProvider.js";
 import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js";
 import { useExtension } from "../../hooks/useExtension.js";
 import { useDictionary } from "../../i18n/dictionary.js";
@@ -161,6 +162,7 @@ export const Comment = ({
   });
 
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
 
   const [isEditing, setEditing] = useState(false);
   const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
@@ -289,7 +291,10 @@ export const Comment = ({
             </Components.Generic.Toolbar.Button>
           ))}
         {(canDeleteComment || canEditComment) && (
-          <Components.Generic.Menu.Root position={"bottom-start"}>
+          <Components.Generic.Menu.Root
+            position={"bottom-start"}
+            portalRoot={editorPortalElement}
+          >
             <Components.Generic.Menu.Trigger>
               <Components.Generic.Toolbar.Button
                 key={"more-actions"}
diff --git a/packages/react/src/components/Comments/EmojiPicker.tsx b/packages/react/src/components/Comments/EmojiPicker.tsx
index 641abdfe07..238b983d08 100644
--- a/packages/react/src/components/Comments/EmojiPicker.tsx
+++ b/packages/react/src/components/Comments/EmojiPicker.tsx
@@ -19,7 +19,7 @@ export const EmojiPicker = (props: {
   return (
     <Components.Generic.Popover.Root
       open={open}
-      portalRoot={editorPortalElement ?? undefined}
+      portalRoot={editorPortalElement}
     >
       <Components.Generic.Popover.Trigger>
         <div
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
index ed3aa38c11..48686561af 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
@@ -47,10 +47,6 @@ export const ColorStyleButton = () => {
   const dict = useDictionary();
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
   const editor = useBlockNoteEditor<
     BlockSchema,
     InlineContentSchema,
@@ -145,14 +141,14 @@ export const ColorStyleButton = () => {
 
   return (
     <Components.Generic.Menu.Root
-      // On mobile, portal the dropdown into the toolbar's themed body-level
-      // container (see `MobileFormattingToolbarController`) so it escapes the
-      // editor's scroll container overflow instead of being clipped, while
-      // staying styled. A set `portalRoot` also stops focus moving into the
-      // dropdown, which would blur the editor and dismiss the on-screen
-      // keyboard. On desktop it's `undefined`, keeping the default inline
-      // rendering.
-      portalRoot={portalRoot}
+      // Portal the dropdown into the editor's themed portal target so it
+      // inherits styling and escapes any scroll-container overflow clipping.
+      // On mobile that target is the toolbar's body-level container (see
+      // `MobileFormattingToolbarController`), and `preventFocusOnOpen` stops
+      // focus moving into the dropdown, which would blur the editor and dismiss
+      // the on-screen keyboard.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     >
       <Components.Generic.Menu.Trigger>
         <Components.FormattingToolbar.Button
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
index 76aa3656fa..f8dc565d2e 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
@@ -49,10 +49,6 @@ export const CreateLinkButton = () => {
   const dict = useDictionary();
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
 
   const formattingToolbar = useExtension(FormattingToolbarExtension);
   // eslint-disable-next-line @typescript-eslint/unbound-method -- showSelection is a plain object method, not a class method
@@ -136,13 +132,14 @@ export const CreateLinkButton = () => {
     <Components.Generic.Popover.Root
       open={showPopover}
       onOpenChange={setPopoverOpen}
-      // On mobile, portal the popover into the toolbar's themed body-level
-      // container (see `MobileFormattingToolbarController`) so it escapes the
-      // editor's scroll container overflow instead of being clipped, while
-      // staying styled. A set `portalRoot` also stops focus moving into the
-      // popover, which would blur the editor and dismiss the on-screen keyboard.
-      // On desktop it's `undefined`, keeping the default inline rendering.
-      portalRoot={portalRoot}
+      // Portal the popover into the editor's themed portal target so it
+      // inherits styling and escapes any scroll-container overflow clipping.
+      // On mobile that target is the toolbar's body-level container (see
+      // `MobileFormattingToolbarController`), and `preventFocusOnOpen` stops
+      // focus moving into the popover, which would blur the editor and dismiss
+      // the on-screen keyboard.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     >
       <Components.Generic.Popover.Trigger>
         {/* TODO: hide tooltip on click */}
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
index 7c59fbaeff..7058398840 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
@@ -20,10 +20,6 @@ export const FileCaptionButton = () => {
   const Components = useComponentsContext()!;
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
 
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -112,13 +108,14 @@ export const FileCaptionButton = () => {
     <Components.Generic.Popover.Root
       open={popoverOpen}
       onOpenChange={setPopoverOpen}
-      // On mobile, portal the popover into the toolbar's themed body-level
-      // container (see `MobileFormattingToolbarController`) so it escapes the
-      // editor's scroll container overflow instead of being clipped, while
-      // staying styled. A set `portalRoot` also stops focus moving into the
-      // popover, which would blur the editor and dismiss the on-screen keyboard.
-      // On desktop it's `undefined`, keeping the default inline rendering.
-      portalRoot={portalRoot}
+      // Portal the popover into the editor's themed portal target so it
+      // inherits styling and escapes any scroll-container overflow clipping.
+      // On mobile that target is the toolbar's body-level container (see
+      // `MobileFormattingToolbarController`), and `preventFocusOnOpen` stops
+      // focus moving into the popover, which would blur the editor and dismiss
+      // the on-screen keyboard.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     >
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
index c4c54e2cc8..b516f58d39 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
@@ -20,10 +20,6 @@ export const FileRenameButton = () => {
   const Components = useComponentsContext()!;
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
 
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -112,13 +108,14 @@ export const FileRenameButton = () => {
     <Components.Generic.Popover.Root
       open={popoverOpen}
       onOpenChange={setPopoverOpen}
-      // On mobile, portal the popover into the toolbar's themed body-level
-      // container (see `MobileFormattingToolbarController`) so it escapes the
-      // editor's scroll container overflow instead of being clipped, while
-      // staying styled. A set `portalRoot` also stops focus moving into the
-      // popover, which would blur the editor and dismiss the on-screen keyboard.
-      // On desktop it's `undefined`, keeping the default inline rendering.
-      portalRoot={portalRoot}
+      // Portal the popover into the editor's themed portal target so it
+      // inherits styling and escapes any scroll-container overflow clipping.
+      // On mobile that target is the toolbar's body-level container (see
+      // `MobileFormattingToolbarController`), and `preventFocusOnOpen` stops
+      // focus moving into the popover, which would blur the editor and dismiss
+      // the on-screen keyboard.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     >
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
index 29f3e566bc..59ccca4fb5 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
@@ -19,10 +19,6 @@ export const FileReplaceButton = () => {
   const Components = useComponentsContext()!;
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
 
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -73,7 +69,14 @@ export const FileReplaceButton = () => {
           editor.focus();
         }
       }}
-      portalRoot={portalRoot}
+      // Portal the popover into the editor's themed portal target so it
+      // inherits styling and escapes any scroll-container overflow clipping.
+      // On mobile that target is the toolbar's body-level container (see
+      // `MobileFormattingToolbarController`), and `preventFocusOnOpen` stops
+      // focus moving into the popover, which would blur the editor and dismiss
+      // the on-screen keyboard.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     >
       <Components.Generic.Popover.Trigger>
         <Components.FormattingToolbar.Button
diff --git a/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx b/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
index 508433f3a1..8f2ef1f352 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
@@ -131,10 +131,6 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
   const Components = useComponentsContext()!;
   const uiMode = useUIMode();
   const editorPortalElement = useEditorPortalElement();
-  // Only portal (and suppress dropdown focus) in the mobile toolbar; desktop
-  // renders inline with default focus behavior.
-  const portalRoot =
-    uiMode === "mobile" ? (editorPortalElement ?? undefined) : undefined;
 
   const editor = useBlockNoteEditor<
     BlockSchema,
@@ -220,7 +216,11 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
     <Components.FormattingToolbar.Select
       className={"bn-select"}
       items={selectItems}
-      portalRoot={portalRoot}
+      // Portal the dropdown into the editor's themed portal target so it
+      // inherits styling; on mobile `preventFocusOnOpen` keeps focus in the
+      // editor so the on-screen keyboard stays up.
+      portalRoot={editorPortalElement}
+      preventFocusOnOpen={uiMode === "mobile"}
     />
   );
 };
diff --git a/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx b/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx
index 52cef731f4..04f3233080 100644
--- a/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx
+++ b/packages/react/src/components/LinkToolbar/DefaultButtons/EditLinkButton.tsx
@@ -1,4 +1,5 @@
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../../editor/EditorPortalProvider.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 import { EditLinkMenuItems } from "../EditLinkMenuItems.js";
 import { LinkToolbarProps } from "../LinkToolbarProps.js";
@@ -10,11 +11,13 @@ export const EditLinkButton = (
   >,
 ) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const dict = useDictionary();
 
   return (
     <Components.Generic.Popover.Root
       onOpenChange={props.setToolbarPositionFrozen}
+      portalRoot={editorPortalElement}
     >
       <Components.Generic.Popover.Trigger>
         <Components.LinkToolbar.Button
diff --git a/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx b/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
index 44f83463fe..4541ac8dcd 100644
--- a/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
+++ b/packages/react/src/components/SideMenu/DefaultButtons/DragHandleButton.tsx
@@ -2,6 +2,7 @@ import { SideMenuExtension } from "@blocknote/core/extensions";
 import { MdDragIndicator } from "react-icons/md";
 
 import { useComponentsContext } from "../../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../../editor/EditorPortalProvider.js";
 import { useDictionary } from "../../../i18n/dictionary.js";
 import { DragHandleMenu } from "../DragHandleMenu/DragHandleMenu.js";
 import { SideMenuProps } from "../SideMenuProps.js";
@@ -16,6 +17,7 @@ export const DragHandleButton = (
   },
 ) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const dict = useDictionary();
 
   const sideMenu = useExtension(SideMenuExtension);
@@ -39,6 +41,7 @@ export const DragHandleButton = (
         }
       }}
       position={"left"}
+      portalRoot={editorPortalElement}
     >
       <Components.Generic.Menu.Trigger>
         <Components.SideMenu.Button
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/BlockColorsItem.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/BlockColorsItem.tsx
index 97694194f7..efd6a1cda2 100644
--- a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/BlockColorsItem.tsx
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/BlockColorsItem.tsx
@@ -3,12 +3,14 @@ import { SideMenuExtension } from "@blocknote/core/extensions";
 import { ReactNode } from "react";
 
 import { useComponentsContext } from "../../../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../../../editor/EditorPortalProvider.js";
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
 import { ColorPicker } from "../../../ColorPicker/ColorPicker.js";
 import { useExtensionState } from "../../../../hooks/useExtension.js";
 
 export const BlockColorsItem = (props: { children: ReactNode }) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
 
   const editor = useBlockNoteEditor<any, any, any>();
 
@@ -30,7 +32,11 @@ export const BlockColorsItem = (props: { children: ReactNode }) => {
   }
 
   return (
-    <Components.Generic.Menu.Root position={"right"} sub={true}>
+    <Components.Generic.Menu.Root
+      position={"right"}
+      sub={true}
+      portalRoot={editorPortalElement}
+    >
       <Components.Generic.Menu.Trigger sub={true}>
         <Components.Generic.Menu.Item
           className={"bn-menu-item"}
diff --git a/packages/react/src/components/TableHandles/TableCellButton.tsx b/packages/react/src/components/TableHandles/TableCellButton.tsx
index 4f14eae6af..969a6a5f2b 100644
--- a/packages/react/src/components/TableHandles/TableCellButton.tsx
+++ b/packages/react/src/components/TableHandles/TableCellButton.tsx
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { MdArrowDropDown } from "react-icons/md";
 
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../editor/EditorPortalProvider.js";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension } from "../../hooks/useExtension.js";
 import { TableCellButtonProps } from "./TableCellButtonProps.js";
@@ -16,6 +17,7 @@ export const TableCellButton = (
   props: TableCellButtonProps & { children?: ReactNode },
 ) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
 
   const editor = useBlockNoteEditor<any, any, any>();
 
@@ -45,6 +47,7 @@ export const TableCellButton = (
         }
       }}
       position={"right"}
+      portalRoot={editorPortalElement}
     >
       <Components.Generic.Menu.Trigger>
         <Components.Generic.Menu.Button className={"bn-table-cell-handle"}>
diff --git a/packages/react/src/components/TableHandles/TableCellMenu/DefaultButtons/ColorPicker.tsx b/packages/react/src/components/TableHandles/TableCellMenu/DefaultButtons/ColorPicker.tsx
index 36e1ecca2f..df96f2a6d6 100644
--- a/packages/react/src/components/TableHandles/TableCellMenu/DefaultButtons/ColorPicker.tsx
+++ b/packages/react/src/components/TableHandles/TableCellMenu/DefaultButtons/ColorPicker.tsx
@@ -3,6 +3,7 @@ import { TableHandlesExtension } from "@blocknote/core/extensions";
 import { ReactNode } from "react";
 
 import { useComponentsContext } from "../../../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../../../editor/EditorPortalProvider.js";
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
 import { useExtensionState } from "../../../../hooks/useExtension.js";
 import { useDictionary } from "../../../../i18n/dictionary.js";
@@ -10,6 +11,7 @@ import { ColorPicker } from "../../../ColorPicker/ColorPicker.js";
 
 export const ColorPickerButton = (props: { children?: ReactNode }) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const dict = useDictionary();
   const editor = useBlockNoteEditor<any, any, any>();
 
@@ -74,7 +76,11 @@ export const ColorPickerButton = (props: { children?: ReactNode }) => {
   }
 
   return (
-    <Components.Generic.Menu.Root position={"right"} sub={true}>
+    <Components.Generic.Menu.Root
+      position={"right"}
+      sub={true}
+      portalRoot={editorPortalElement}
+    >
       <Components.Generic.Menu.Trigger sub={true}>
         <Components.Generic.Menu.Item
           className={"bn-menu-item"}
diff --git a/packages/react/src/components/TableHandles/TableHandle.tsx b/packages/react/src/components/TableHandles/TableHandle.tsx
index e06345ab0c..e1a8f734e9 100644
--- a/packages/react/src/components/TableHandles/TableHandle.tsx
+++ b/packages/react/src/components/TableHandles/TableHandle.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useMemo, useState } from "react";
 
 import { MdDragIndicator } from "react-icons/md";
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../editor/EditorPortalProvider.js";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { TableHandleMenu } from "./TableHandleMenu/TableHandleMenu.js";
@@ -20,6 +21,7 @@ export const TableHandle = (
 ) => {
   const editor = useBlockNoteEditor<any, any, any>();
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -66,6 +68,7 @@ export const TableHandle = (
         }
       }}
       position={"right"}
+      portalRoot={editorPortalElement}
     >
       <Components.Generic.Menu.Trigger>
         <Components.TableHandle.Root
diff --git a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/ColorPicker.tsx b/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/ColorPicker.tsx
index 812a44ec35..72de0dfd0a 100644
--- a/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/ColorPicker.tsx
+++ b/packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/ColorPicker.tsx
@@ -10,6 +10,7 @@ import {
 import { TableHandlesExtension } from "@blocknote/core/extensions";
 
 import { useComponentsContext } from "../../../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../../../editor/EditorPortalProvider.js";
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
 import { useDictionary } from "../../../../i18n/dictionary.js";
 import { ColorPicker } from "../../../ColorPicker/ColorPicker.js";
@@ -27,6 +28,7 @@ export const ColorPickerButton = <
   children?: ReactNode;
 }) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const dict = useDictionary();
   const editor = useBlockNoteEditor<
     { table: DefaultBlockSchema["table"] },
@@ -104,7 +106,11 @@ export const ColorPickerButton = <
   const firstCell = mapTableCell(currentCells[0].cell);
 
   return (
-    <Components.Generic.Menu.Root position={"right"} sub={true}>
+    <Components.Generic.Menu.Root
+      position={"right"}
+      sub={true}
+      portalRoot={editorPortalElement}
+    >
       <Components.Generic.Menu.Trigger sub={true}>
         <Components.Generic.Menu.Item
           className={"bn-menu-item"}
diff --git a/packages/react/src/components/Versioning/CurrentSnapshot.tsx b/packages/react/src/components/Versioning/CurrentSnapshot.tsx
index 139701376f..8b55bdc5a8 100644
--- a/packages/react/src/components/Versioning/CurrentSnapshot.tsx
+++ b/packages/react/src/components/Versioning/CurrentSnapshot.tsx
@@ -6,6 +6,7 @@ import {
 import { RiArrowLeftRightLine, RiMoreFill } from "react-icons/ri";
 
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../editor/EditorPortalProvider.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { dateToString } from "./dateToString.js";
 import { useSnapshotLabel } from "./useVersionUsers.js";
@@ -31,6 +32,7 @@ export const CurrentSnapshot = ({
   previousSnapshot?: VersionSnapshot;
 }) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const { canPreviewCurrent, previewCurrentVersion, exitPreview } =
     useExtension(VersioningExtension);
   const selected = useExtensionState(VersioningExtension, {
@@ -72,7 +74,10 @@ export const CurrentSnapshot = ({
         variant="action-toolbar"
         className="bn-action-toolbar"
       >
-        <Components.Generic.Menu.Root position="bottom-start">
+        <Components.Generic.Menu.Root
+          position="bottom-start"
+          portalRoot={editorPortalElement}
+        >
           <Components.Generic.Menu.Trigger>
             <Components.Generic.Toolbar.Button
               className="bn-snapshot-menu-trigger"
diff --git a/packages/react/src/components/Versioning/Snapshot.tsx b/packages/react/src/components/Versioning/Snapshot.tsx
index 1a8e03ead3..0281a9bc23 100644
--- a/packages/react/src/components/Versioning/Snapshot.tsx
+++ b/packages/react/src/components/Versioning/Snapshot.tsx
@@ -12,6 +12,7 @@ import {
 } from "react-icons/ri";
 
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useEditorPortalElement } from "../../editor/EditorPortalProvider.js";
 import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { dateToString } from "./dateToString.js";
 import { useSnapshotLabel } from "./useVersionUsers.js";
@@ -25,6 +26,7 @@ export const Snapshot = ({
   previousSnapshot?: VersionSnapshot;
 }) => {
   const Components = useComponentsContext()!;
+  const editorPortalElement = useEditorPortalElement();
   const {
     canRestore,
     restore,
@@ -110,7 +112,10 @@ export const Snapshot = ({
         variant="action-toolbar"
         className="bn-action-toolbar"
       >
-        <Components.Generic.Menu.Root position="bottom-start">
+        <Components.Generic.Menu.Root
+          position="bottom-start"
+          portalRoot={editorPortalElement}
+        >
           <Components.Generic.Menu.Trigger>
             <Components.Generic.Toolbar.Button
               className="bn-snapshot-menu-trigger"
diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 5d71bc58dc..b3c80e182e 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -47,7 +47,14 @@ type ToolbarSelectType = {
     isDisabled?: boolean;
   }[];
   isDisabled?: boolean;
-  portalRoot?: HTMLElement | null;
+  portalRoot: HTMLElement | null;
+  /**
+   * When true, the surface must not move DOM focus onto itself when it opens.
+   * On mobile, stealing focus blurs the editor's `contentEditable` and
+   * dismisses the on-screen keyboard. Adapters map this to their own library's
+   * focus mechanism.
+   */
+  preventFocusOnOpen?: boolean;
 };
 
 type MenuButtonType = {
@@ -334,7 +341,14 @@ export type ComponentProps = {
           | "bottom"
           | "left"
           | `${"top" | "right" | "bottom" | "left"}-${"start" | "end"}`;
-        portalRoot?: HTMLElement | null;
+        portalRoot: HTMLElement | null;
+        /**
+         * When true, the surface must not move DOM focus onto itself when it
+         * opens. On mobile, stealing focus blurs the editor's `contentEditable`
+         * and dismisses the on-screen keyboard. Adapters map this to their own
+         * library's focus mechanism.
+         */
+        preventFocusOnOpen?: boolean;
         children?: ReactNode;
       };
       Divider: {
@@ -374,7 +388,14 @@ export type ComponentProps = {
           | "bottom"
           | "left"
           | `${"top" | "right" | "bottom" | "left"}-${"start" | "end"}`;
-        portalRoot?: HTMLElement | null;
+        portalRoot: HTMLElement | null;
+        /**
+         * When true, the surface must not move DOM focus onto itself when it
+         * opens. On mobile, stealing focus blurs the editor's `contentEditable`
+         * and dismisses the on-screen keyboard. Adapters map this to their own
+         * library's focus mechanism.
+         */
+        preventFocusOnOpen?: boolean;
         children?: ReactNode;
       };
       Content: {
diff --git a/packages/shadcn/src/badge/Badge.tsx b/packages/shadcn/src/badge/Badge.tsx
index 98942b0f74..3027da457d 100644
--- a/packages/shadcn/src/badge/Badge.tsx
+++ b/packages/shadcn/src/badge/Badge.tsx
@@ -28,6 +28,10 @@ export const Badge = forwardRef<
   // Portal the tooltip into the ambient portal target (a themed `.bn-root`)
   // so it inherits the editor's light/dark color scheme instead of the
   // document body's.
+  // NOTE: Only ShadCN Badge / Tooltip depend on useEditorPortalElement.
+  // Alternative would be to pass a portalElement to these components, but they
+  // would be ignored by ariakit / mantine. For now keep these two exceptions
+  // (ideally skin components don't have a dependency on the editor's context)
   const editorPortalElement = useEditorPortalElement();
 
   const badge = (
@@ -54,7 +58,7 @@ export const Badge = forwardRef<
     <ShadCNComponents.Tooltip.Tooltip>
       <ShadCNComponents.Tooltip.TooltipTrigger render={badge} />
       <ShadCNComponents.Tooltip.TooltipContent
-        container={editorPortalElement ?? undefined}
+        container={editorPortalElement}
         className={"flex flex-col items-center whitespace-pre-wrap"}
       >
         <span>{mainTooltip}</span>
diff --git a/packages/shadcn/src/menu/Menu.tsx b/packages/shadcn/src/menu/Menu.tsx
index abe101b9fa..fd64f69740 100644
--- a/packages/shadcn/src/menu/Menu.tsx
+++ b/packages/shadcn/src/menu/Menu.tsx
@@ -1,13 +1,11 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, useEditorPortalElement } from "@blocknote/react";
+import { ComponentProps } from "@blocknote/react";
 import { ChevronRight } from "lucide-react";
 import { createContext, forwardRef, ReactElement, useContext } from "react";
 import { cn } from "../lib/utils.js";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
 
-const PortalRootContext = createContext<HTMLElement | null | undefined>(
-  undefined,
-);
+const PortalRootContext = createContext<HTMLElement | null>(null);
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   const {
@@ -15,6 +13,9 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     onOpenChange,
     position: _position, // Unused
     portalRoot,
+    // base-ui manages menu focus itself; unlike Mantine there is no focus to
+    // suppress, so this is intentionally unused.
+    preventFocusOnOpen: _preventFocusOnOpen,
     sub,
     ...rest
   } = props;
@@ -81,11 +82,11 @@ export const MenuDropdown = forwardRef<
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
-  const portalRoot = useContext(PortalRootContext);
-  // Default to the ambient portal target (a themed `.bn-root`) so the menu
-  // inherits light/dark mode instead of the document body's.
-  const editorPortalElement = useEditorPortalElement();
-  const container = portalRoot ?? editorPortalElement ?? undefined;
+  // The `portalRoot` supplied at the call site is a themed `.bn-root`, so the
+  // menu inherits light/dark mode instead of the document body's.
+  // `null` (editor not mounted yet) makes Base UI wait for a container
+  // instead of falling back to the body; nothing is open at that point.
+  const container = useContext(PortalRootContext);
 
   if (sub) {
     return (
diff --git a/packages/shadcn/src/popover/popover.tsx b/packages/shadcn/src/popover/popover.tsx
index 793530ce3b..886a7af479 100644
--- a/packages/shadcn/src/popover/popover.tsx
+++ b/packages/shadcn/src/popover/popover.tsx
@@ -1,13 +1,11 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, useEditorPortalElement } from "@blocknote/react";
+import { ComponentProps } from "@blocknote/react";
 import { createContext, forwardRef, ReactElement, useContext } from "react";
 
 import { cn } from "../lib/utils.js";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
 
-const PortalRootContext = createContext<HTMLElement | null | undefined>(
-  undefined,
-);
+const PortalRootContext = createContext<HTMLElement | null>(null);
 
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
@@ -18,6 +16,9 @@ export const Popover = (
     onOpenChange,
     position: _position, // unused
     portalRoot,
+    // base-ui manages popover focus itself; unlike Mantine there is no focus to
+    // suppress, so this is intentionally unused.
+    preventFocusOnOpen: _preventFocusOnOpen,
     ...rest
   } = props;
 
@@ -61,16 +62,17 @@ export const PopoverContent = forwardRef<
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
-  const portalRoot = useContext(PortalRootContext);
-  // Default to the ambient portal target (a themed `.bn-root`) so popovers
-  // inherit light/dark mode instead of the document body's, and escape the
-  // mobile formatting toolbar's horizontal scroll clip.
-  const editorPortalElement = useEditorPortalElement();
+  // The `portalRoot` supplied at the call site is a themed `.bn-root`, so
+  // popovers inherit light/dark mode instead of the document body's, and escape
+  // the mobile formatting toolbar's horizontal scroll clip.
+  // `null` (editor not mounted yet) makes Base UI wait for a container
+  // instead of falling back to the body; nothing is open at that point.
+  const container = useContext(PortalRootContext);
 
   return (
     <ShadCNComponents.Popover.PopoverContent
       sideOffset={8}
-      container={portalRoot ?? editorPortalElement ?? undefined}
+      container={container}
       className={cn(
         className,
         "flex flex-col gap-2",
diff --git a/packages/shadcn/src/toolbar/Toolbar.tsx b/packages/shadcn/src/toolbar/Toolbar.tsx
index 60425e5228..fbbc734261 100644
--- a/packages/shadcn/src/toolbar/Toolbar.tsx
+++ b/packages/shadcn/src/toolbar/Toolbar.tsx
@@ -68,6 +68,11 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     // Portal the tooltip into the ambient portal target (a themed `.bn-root`)
     // so it inherits the editor's light/dark color scheme instead of the
     // document body's.
+    // NOTE: Only ShadCN Badge / Tooltip depend on useEditorPortalElement.
+    // Alternative would be to pass a portalElement to these components, but they
+    // would be ignored by ariakit / mantine. For now keep these two exceptions
+    // (ideally skin components don't have a dependency on the editor's context)
+
     const editorPortalElement = useEditorPortalElement();
 
     const trigger =
@@ -112,7 +117,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       <ShadCNComponents.Tooltip.Tooltip>
         <ShadCNComponents.Tooltip.TooltipTrigger render={trigger} />
         <ShadCNComponents.Tooltip.TooltipContent
-          container={editorPortalElement ?? undefined}
+          container={editorPortalElement}
           className={"flex flex-col items-center whitespace-pre-wrap"}
         >
           <span>{mainTooltip}</span>
@@ -127,16 +132,21 @@ export const ToolbarSelect = forwardRef<
   HTMLDivElement,
   ComponentProps["FormattingToolbar"]["Select"]
 >((props, ref) => {
-  const { className, items, isDisabled, portalRoot, ...rest } = props;
+  const {
+    className,
+    items,
+    isDisabled,
+    portalRoot,
+    // base-ui manages select focus itself; unlike Mantine there is no focus to
+    // suppress, so this is intentionally unused.
+    preventFocusOnOpen: _preventFocusOnOpen,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
-  // Default to the ambient portal target (a themed `.bn-root`) so the dropdown
-  // inherits light/dark mode instead of the body's.
-  const editorPortalElement = useEditorPortalElement();
-
   // TODO?
   const SelectItemContent = (props: any) => (
     <div className={"flex items-center gap-1"}>
@@ -164,7 +174,7 @@ export const ToolbarSelect = forwardRef<
       </ShadCNComponents.Select.SelectTrigger>
       <ShadCNComponents.Select.SelectContent
         className={className}
-        container={portalRoot ?? editorPortalElement ?? undefined}
+        container={portalRoot}
         // Position the dropdown below the trigger (classic dropdown behavior)
         // instead of aligning the selected item over the trigger (the Base UI
         // default).