From 2623e2af9328817dea33113bfe30fd7d0e021d1c Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 24 May 2026 21:10:01 -0400
Subject: [PATCH] fix: prevent editor blur on mouse click in autocomplete menus

Add onMouseDown preventDefault to all autocomplete suggestion MenuItems
so clicking a suggestion keeps the editor focused. Without this, the
mousedown event blurs the editor before onClick fires, causing Slate's
ReactEditor.toDOMNode to fail with "Cannot resolve a DOM node from Slate
node: {"text":""}" when Transforms.collapse tries to sync the selection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx | 1 +
 .../components/editor/autocomplete/RoomMentionAutocomplete.tsx  | 2 ++
 .../components/editor/autocomplete/UserMentionAutocomplete.tsx  | 2 ++
 src/app/features/room/CommandAutocomplete.tsx                   | 1 +
 4 files changed, 6 insertions(+)

diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
index e3874cb6f..9a59cf6ab 100644
--- a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
@@ -95,6 +95,7 @@ export function EmoticonAutocomplete({
             key={emoticon.shortcode + key}
             as="button"
             radii="300"
+            onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
             onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
               onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
             }
diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index 2c59d129b..9758834d0 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -42,6 +42,7 @@ function UnknownRoomMentionItem({
     <MenuItem
       as="button"
       radii="300"
+      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
       onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
       onClick={handleSelect}
       before={
@@ -149,6 +150,7 @@ export function RoomMentionAutocomplete({
               key={rId}
               as="button"
               radii="300"
+              onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
               onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
                 onTabPress(evt, handleSelect)
               }
diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
index 0c2ffc79e..db33fc561 100644
--- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
@@ -41,6 +41,7 @@ function UnknownMentionItem({
     <MenuItem
       as="button"
       radii="300"
+      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
       onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
         onTabPress(evt, () => handleAutocomplete(userId, name))
       }
@@ -162,6 +163,7 @@ export function UserMentionAutocomplete({
               key={roomMember.userId}
               as="button"
               radii="300"
+              onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
               onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
                 onTabPress(evt, () => handleAutocomplete(roomMember.userId, getName(roomMember)))
               }
diff --git a/src/app/features/room/CommandAutocomplete.tsx b/src/app/features/room/CommandAutocomplete.tsx
index f19c211f4..891c00f4a 100644
--- a/src/app/features/room/CommandAutocomplete.tsx
+++ b/src/app/features/room/CommandAutocomplete.tsx
@@ -85,6 +85,7 @@ export function CommandAutocomplete({
           as="button"
           radii="300"
           style={{ height: 'unset' }}
+          onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
           onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
             onTabPress(evt, () => handleAutocomplete(commandName))
           }