web: fix chat context menu click handling
All checks were successful
CI / test (push) Successful in 22s

This commit is contained in:
2026-03-08 14:09:24 +03:00
parent 539ba70294
commit 5ae5821c20

View File

@@ -42,6 +42,7 @@ export function ChatList() {
const sidebarRef = useRef<HTMLElement | null>(null); const sidebarRef = useRef<HTMLElement | null>(null);
const burgerMenuRef = useRef<HTMLDivElement | null>(null); const burgerMenuRef = useRef<HTMLDivElement | null>(null);
const burgerButtonRef = useRef<HTMLButtonElement | null>(null); const burgerButtonRef = useRef<HTMLButtonElement | null>(null);
const ctxMenuRef = useRef<HTMLDivElement | null>(null);
const deleteModalChat = chats.find((chat) => chat.id === deleteModalChatId) ?? null; const deleteModalChat = chats.find((chat) => chat.id === deleteModalChatId) ?? null;
const canDeleteForEveryone = Boolean( const canDeleteForEveryone = Boolean(
deleteModalChat && deleteModalChat &&
@@ -168,8 +169,11 @@ export function ChatList() {
const onPointerDown = (event: MouseEvent) => { const onPointerDown = (event: MouseEvent) => {
const target = event.target as Node | null; const target = event.target as Node | null;
if (ctxChatId) { if (ctxChatId) {
setCtxChatId(null); const inCtxMenu = ctxMenuRef.current?.contains(target ?? null) ?? false;
setCtxPos(null); if (!inCtxMenu) {
setCtxChatId(null);
setCtxPos(null);
}
} }
if (menuOpen) { if (menuOpen) {
const inMenu = burgerMenuRef.current?.contains(target ?? null) ?? false; const inMenu = burgerMenuRef.current?.contains(target ?? null) ?? false;
@@ -608,7 +612,7 @@ export function ChatList() {
{ctxChatId && ctxPos {ctxChatId && ctxPos
? createPortal( ? createPortal(
<div className="fixed inset-0 z-[99]" onClick={() => { setCtxChatId(null); setCtxPos(null); }}> <div className="fixed inset-0 z-[99]" onClick={() => { setCtxChatId(null); setCtxPos(null); }}>
<div className="fixed z-[100] w-44 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl" style={{ left: ctxPos.x, top: ctxPos.y }} onClick={(e) => e.stopPropagation()}> <div ref={ctxMenuRef} className="fixed z-[100] w-44 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl" style={{ left: ctxPos.x, top: ctxPos.y }} onClick={(e) => e.stopPropagation()}>
<button <button
className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800" className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
onClick={() => { onClick={() => {