fix(ai): no more scrolling to top when opening AI menu (#2503)

Author: YousefED

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -62,6 +62,9 @@ export default function FloatingComposerController<
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: false,
+      },
       elementProps: {
         style: {
           zIndex: 60,

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -58,6 +58,10 @@ export default function FloatingThreadController(props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 30,

packages/react/src/components/FilePanel/FilePanelController.tsx

@@ -2,12 +2,12 @@ import { FilePanelExtension } from "@blocknote/core/extensions";
 import { flip, offset } from "@floating-ui/react";
 import { FC, useMemo } from "react";
 
-import { FilePanel } from "./FilePanel.js";
-import { FilePanelProps } from "./FilePanelProps.js";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { BlockPopover } from "../Popovers/BlockPopover.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
-import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
-import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { FilePanel } from "./FilePanel.js";
+import { FilePanelProps } from "./FilePanelProps.js";
 
 export const FilePanelController = (props: {
   filePanel?: FC<FilePanelProps>;
@@ -37,6 +37,10 @@ export const FilePanelController = (props: {
         middleware: [offset(10), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 90,

packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx

@@ -95,6 +95,10 @@ export const FormattingToolbarController = (props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 40,

packages/react/src/components/LinkToolbar/LinkToolbarController.tsx

@@ -150,6 +150,10 @@ export const LinkToolbarController = (props: {
         handleClose: safePolygon(),
         ...props.floatingUIOptions?.useHoverProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 50,

packages/react/src/components/Popovers/FloatingUIOptions.ts

@@ -1,4 +1,5 @@
 import {
+  FloatingFocusManagerProps,
   UseDismissProps,
   UseFloatingOptions,
   UseHoverProps,
@@ -14,4 +15,8 @@ export type FloatingUIOptions = {
   useDismissProps?: UseDismissProps;
   useHoverProps?: UseHoverProps;
   elementProps?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Props to pass to the `FloatingFocusManager` component.
+   */
+  focusManagerProps?: Omit<FloatingFocusManagerProps, "context" | "children">;
 };

packages/react/src/components/Popovers/GenericPopover.tsx

@@ -1,12 +1,13 @@
 import {
-  useFloating,
-  useTransitionStyles,
+  autoUpdate,
+  FloatingFocusManager,
   useDismiss,
+  useFloating,
+  useHover,
   useInteractions,
   useMergeRefs,
   useTransitionStatus,
-  autoUpdate,
-  useHover,
+  useTransitionStyles,
 } from "@floating-ui/react";
 import { HTMLAttributes, ReactNode, useEffect, useRef } from "react";
 
@@ -175,6 +176,16 @@ export const GenericPopover = (
     );
   }
 
+  if (!props.focusManagerProps?.disabled) {
+    return (
+      <FloatingFocusManager {...props.focusManagerProps} context={context}>
+        <div ref={mergedRefs} {...mergedProps}>
+          {props.children}
+        </div>
+      </FloatingFocusManager>
+    );
+  }
+
   return (
     <div ref={mergedRefs} {...mergedProps}>
       {props.children}

packages/react/src/components/Popovers/TableCellPopover.tsx

@@ -36,6 +36,10 @@ export const SideMenuController = (props: {
         enabled: false,
         ...props.floatingUIOptions?.useDismissProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 20,

packages/react/src/components/SideMenu/SideMenuController.tsx

@@ -133,6 +133,10 @@ export function GridSuggestionMenuController<
         ],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         // Prevents editor blurring when clicking the scroll bar.
         onMouseDownCapture: (event) => event.preventDefault(),