diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte index 5c6958f759..be0676d992 100644 --- a/src/lib/components/channel/Channel.svelte +++ b/src/lib/components/channel/Channel.svelte @@ -87,7 +87,7 @@ let scrollEnd = true; let messagesContainerElement = null; - let chatInputElement = null; + let chatInputElement: { focus: () => void } | null = null; let threadChatInputElement = null; let top = false; @@ -148,6 +148,17 @@ ); }; + let threadTrigger: HTMLButtonElement | null = null; + const closeThread = async () => { + const trigger = threadTrigger; + threadTrigger = null; + threadId = null; + await tick(); + if (document.activeElement === document.body) { + (trigger?.isConnected ? trigger : chatInputElement)?.focus(); + } + }; + const pinHandler = ( messageId: string, pinned: boolean, @@ -485,7 +496,8 @@ await tick(); chatInputElement?.focus(); }} - onThread={async (id) => { + onThread={async (id: string, trigger: HTMLButtonElement) => { + threadTrigger = trigger; threadId = id; await tick(); threadChatInputElement?.focus(); @@ -541,22 +553,14 @@ {#if !largeScreen} {#if threadId !== null} - { - threadId = null; - }} - > +
{ - threadId = null; - }} + onClose={closeThread} />
@@ -576,9 +580,7 @@ {channel} bind:chatInputElement={threadChatInputElement} onPin={pinHandler} - onClose={() => { - threadId = null; - }} + onClose={closeThread} /> diff --git a/src/lib/components/channel/Messages.svelte b/src/lib/components/channel/Messages.svelte index 8321c6f92c..bbc8aa8890 100644 --- a/src/lib/components/channel/Messages.svelte +++ b/src/lib/components/channel/Messages.svelte @@ -218,9 +218,7 @@ } ); }} - onThread={(id) => { - onThread(id); - }} + {onThread} onReaction={(name) => { if ( (message?.reactions ?? []) diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte index f67f349553..8040453993 100644 --- a/src/lib/components/channel/Messages/Message.svelte +++ b/src/lib/components/channel/Messages/Message.svelte @@ -122,6 +122,7 @@ }; let edit = false; + let editButtonElement: HTMLButtonElement; let editedContent = null; let showDeleteConfirmDialog = false; $: renderedMessageId = message ? (id ? `${id}-${message.id}` : message.id) : null; @@ -335,8 +336,8 @@