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>
This commit is contained in:
@@ -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))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user