fix: import EmojiBoard directly in ProfileStatus to fix emoji selection
CI / Build & Quality Checks (push) Successful in 10m18s

React.lazy + Suspense interacted badly with the nested FocusTraps (the
settings Modal500 outer trap and EmojiBoard's inner trap). During the
suspend/resolve cycle targetFromEvent returned undefined, causing
handleGroupItemClick to bail before calling onEmojiSelect.

Switched to a direct import matching MessageEditor and PowersEditor
which both use EmojiBoard inside settings panels without lazy loading.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-27 16:01:17 -04:00
parent 9fdc6160eb
commit 603c9ec892
+7 -13
View File
@@ -1,7 +1,6 @@
import React, {
ChangeEventHandler,
FormEventHandler,
Suspense,
useCallback,
useEffect,
useMemo,
@@ -47,10 +46,7 @@ import { createUploadAtom, UploadSuccess } from '../../../state/upload';
import { CompactUploadCardRenderer } from '../../../components/upload-card';
import { useCapabilities } from '../../../hooks/useCapabilities';
import { useUserPresence } from '../../../hooks/useUserPresence';
const EmojiBoard = React.lazy(() =>
import('../../../components/emoji-board').then((m) => ({ default: m.EmojiBoard })),
);
import { EmojiBoard } from '../../../components/emoji-board';
type ProfileProps = {
profile: UserProfile;
@@ -457,14 +453,12 @@ function ProfileStatus() {
position="Top"
align="End"
content={
<Suspense fallback={<Spinner size="100" />}>
<EmojiBoard
imagePackRooms={[]}
returnFocusOnDeactivate={false}
onEmojiSelect={handleEmojiSelect}
requestClose={() => setEmojiAnchor(undefined)}
/>
</Suspense>
<EmojiBoard
imagePackRooms={[]}
returnFocusOnDeactivate={false}
onEmojiSelect={handleEmojiSelect}
requestClose={() => setEmojiAnchor(undefined)}
/>
}
>
<IconButton