fix: prevent editor blur on mouse click in autocomplete menus
CI / Build & Quality Checks (push) Successful in 10m29s

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>
This commit is contained in:
2026-05-24 21:10:01 -04:00
parent dde75ee389
commit 2623e2af93
4 changed files with 6 additions and 0 deletions
@@ -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))
}
@@ -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)
}
@@ -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)))
}
@@ -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))
}