fix: prevent editor blur on mouse click in autocomplete menus
CI / Build & Quality Checks (push) Successful in 10m29s
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:
@@ -95,6 +95,7 @@ export function EmoticonAutocomplete({
|
|||||||
key={emoticon.shortcode + key}
|
key={emoticon.shortcode + key}
|
||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
||||||
onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
|
onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,6 +42,7 @@ function UnknownRoomMentionItem({
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
|
||||||
onClick={handleSelect}
|
onClick={handleSelect}
|
||||||
before={
|
before={
|
||||||
@@ -149,6 +150,7 @@ export function RoomMentionAutocomplete({
|
|||||||
key={rId}
|
key={rId}
|
||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
||||||
onTabPress(evt, handleSelect)
|
onTabPress(evt, handleSelect)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ function UnknownMentionItem({
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
||||||
onTabPress(evt, () => handleAutocomplete(userId, name))
|
onTabPress(evt, () => handleAutocomplete(userId, name))
|
||||||
}
|
}
|
||||||
@@ -162,6 +163,7 @@ export function UserMentionAutocomplete({
|
|||||||
key={roomMember.userId}
|
key={roomMember.userId}
|
||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
||||||
onTabPress(evt, () => handleAutocomplete(roomMember.userId, getName(roomMember)))
|
onTabPress(evt, () => handleAutocomplete(roomMember.userId, getName(roomMember)))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,6 +85,7 @@ export function CommandAutocomplete({
|
|||||||
as="button"
|
as="button"
|
||||||
radii="300"
|
radii="300"
|
||||||
style={{ height: 'unset' }}
|
style={{ height: 'unset' }}
|
||||||
|
onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
|
||||||
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
|
||||||
onTabPress(evt, () => handleAutocomplete(commandName))
|
onTabPress(evt, () => handleAutocomplete(commandName))
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user