From 269fc0d9e0639593448b2bf1c08bcbdcbcb39c7b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 3 Oct 2025 15:53:35 +0530
Subject: [PATCH] [WIKI-705] regression: mentions dropdown selection across
 editors #7901

---
 .../src/core/extensions/mentions/utils.ts     | 31 ++++++++-----------
 .../slash-commands/command-menu.tsx           |  3 +-
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/editor/src/core/extensions/mentions/utils.ts b/packages/editor/src/core/extensions/mentions/utils.ts
index 24e9957a3..91f713fd7 100644
--- a/packages/editor/src/core/extensions/mentions/utils.ts
+++ b/packages/editor/src/core/extensions/mentions/utils.ts
@@ -11,49 +11,44 @@ import { TMentionHandler } from "@/types";
 import { MentionsListDropdown, MentionsListDropdownProps } from "./mentions-list-dropdown";
 
 export const renderMentionsDropdown =
-  (props: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
-  // @ts-expect-error - Tiptap types are incorrect
+  (args: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
   () => {
-    const { searchCallback } = props;
+    const { searchCallback } = args;
     let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null;
 
     return {
-      onStart: ({ clientRect, editor }) => {
+      onStart: (props) => {
         if (!searchCallback) return;
-        if (!clientRect) return;
+        if (!props.clientRect) return;
         component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
           props: {
             ...props,
             searchCallback,
           },
-          editor: editor,
+          editor: props.editor,
         });
-        editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
+        props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
         const element = component.element as HTMLElement;
         element.style.position = "absolute";
+        element.style.zIndex = "100";
         document.body.appendChild(element);
-        updateFloatingUIFloaterPosition(editor, element);
+        updateFloatingUIFloaterPosition(props.editor, element);
       },
-      onUpdate: ({ clientRect, editor }) => {
+      onUpdate: (props) => {
         component?.updateProps(props);
-        if (!clientRect) return;
+        if (!props.clientRect) return;
         if (component?.element) {
-          updateFloatingUIFloaterPosition(editor, component?.element as HTMLElement);
+          updateFloatingUIFloaterPosition(props.editor, component?.element as HTMLElement);
         }
       },
       onKeyDown: ({ event }) => {
         if (event.key === "Escape") {
           component?.destroy();
+          component = null;
           return true;
         }
 
-        const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-
-        if (navigationKeys.includes(event.key)) {
-          event?.stopPropagation();
-          return component?.ref?.onKeyDown({ event });
-        }
-        return component?.ref?.onKeyDown({ event });
+        return component?.ref?.onKeyDown({ event }) ?? false;
       },
       onExit: ({ editor }) => {
         editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index 9d85266f2..56ad688bc 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -32,9 +32,8 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
   );
   // handle arrow key navigation
   useEffect(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
     const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
+      if (DROPDOWN_NAVIGATION_KEYS.includes(e.key)) {
         e.preventDefault();
         const currentSection = selectedIndex.section;
         const currentItem = selectedIndex.item;