fix: Suggestion menu scrolling to selected item (#838)

* Made suggestion menu components scroll to selected item

* Added overflow detection and cleaned up ref merging

Author: matthewlipski

packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -1,6 +1,6 @@
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, elementOverflow, mergeRefs } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
@@ -10,10 +10,26 @@ export const SuggestionMenuItem = forwardRef<
 
   assertEmpty(rest);
 
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!itemRef.current || !isSelected) {
+      return;
+    }
+
+    const overflow = elementOverflow(itemRef.current);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
   return (
     <div
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
-      ref={ref}
+      ref={mergeRefs([ref, itemRef])}
       id={id}
       onClick={onClick}
       role="option"

packages/mantine/src/style.css

@@ -322,7 +322,6 @@
 
 .bn-mt-suggestion-menu-item-body {
   align-items: stretch;
-  color: var(--bn-colors-menu-text);
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -331,6 +330,7 @@
 }
 
 .bn-mt-suggestion-menu-item-title {
+  color: var(--bn-colors-menu-text);
   line-height: 20px;
   font-weight: 500;
   font-size: 14px;
@@ -339,6 +339,7 @@
 }
 
 .bn-mt-suggestion-menu-item-subtitle {
+  color: var(--bn-colors-menu-text);
   line-height: 16px;
   font-size: 10px;
   margin: 0;

packages/mantine/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -14,7 +14,7 @@ export const SuggestionMenuEmptyItem = forwardRef<
 
   return (
     <MantineGroup className={className} ref={ref}>
-      <MantineGroup className="bn-mt-suggestion-menu-item-label">
+      <MantineGroup className="bn-mt-suggestion-menu-item-title">
         {children}
       </MantineGroup>
     </MantineGroup>

packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -4,10 +4,11 @@ import {
   Stack as MantineStack,
   Text as MantineText,
 } from "@mantine/core";
+import { mergeRefs } from "@mantine/hooks";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, elementOverflow } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
@@ -17,11 +18,27 @@ export const SuggestionMenuItem = forwardRef<
 
   assertEmpty(rest);
 
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!itemRef.current || !isSelected) {
+      return;
+    }
+
+    const overflow = elementOverflow(itemRef.current);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
   return (
     <MantineGroup
       gap={0}
       className={className}
-      ref={ref}
+      ref={mergeRefs(ref, itemRef)}
       id={id}
       role="option"
       onClick={onClick}

packages/react/src/index.ts

@@ -79,3 +79,6 @@ export * from "./hooks/useSelectedBlocks";
 export * from "./schema/ReactBlockSpec";
 export * from "./schema/ReactInlineContentSpec";
 export * from "./schema/ReactStyleSpec";
+
+export * from "./util/mergeRefs";
+export * from "./util/elementOverflow";

packages/react/src/util/elementOverflow.ts

@@ -0,0 +1,19 @@
+export function elementOverflow(element: HTMLElement) {
+  if (!element.parentElement) {
+    return "none";
+  }
+
+  const elementRect = element.getBoundingClientRect();
+  const parentRect = element.parentElement.getBoundingClientRect();
+
+  const topOverflow = elementRect.top < parentRect.top;
+  const bottomOverflow = elementRect.bottom > parentRect.bottom;
+
+  return topOverflow && bottomOverflow
+    ? "both"
+    : topOverflow
+    ? "top"
+    : bottomOverflow
+    ? "bottom"
+    : "none";
+}

packages/shadcn/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -1,6 +1,6 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, elementOverflow, mergeRefs } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 import { cn } from "../lib/utils";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
@@ -15,14 +15,30 @@ export const SuggestionMenuItem = forwardRef<
 
   assertEmpty(rest);
 
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!itemRef.current || !isSelected) {
+      return;
+    }
+
+    const overflow = elementOverflow(itemRef.current);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
   return (
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
         "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
-      ref={ref}
+      ref={mergeRefs([ref, itemRef])}
       id={id}
       onClick={onClick}
       role="option"