fix(channels): address react-doctor and review findings on mention composer

applyMention now replaces the whole @word (caret moved backward mid-query no
longer leaks typed characters into the message) and reuses an existing
following space instead of doubling it. MentionComposer drops its state-sync
effects for ref-guarded render-time adjustments and scrolls in the key
handler, clearing react-doctor's no-adjust-state-on-prop-change errors.
MentionText keys segments by character offset instead of array index.

Generated-By: PostHog Code
Task-Id: a2ff8500-aaa6-4ce0-b01a-656d3b2c3b61

Author: k11kirky

packages/ui/src/features/canvas/components/MentionComposer.tsx

@@ -14,14 +14,7 @@ import {
 } from "@posthog/ui/features/canvas/utils/mentionComposer";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import { Text } from "@radix-ui/themes";
-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
 
 interface MentionComposerProps {
   value: string;
@@ -73,21 +66,28 @@ export function MentionComposer({
   const open =
     !!active && active.start !== dismissedStart && suggestions.length > 0;
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: reset selection per query
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [active?.start, active?.query]);
-
-  useEffect(() => {
+  // Render-time adjustments (ref-guarded, same idiom as SuggestionList): when
+  // the parent clears the draft the mention context goes with it, and a new
+  // query restarts keyboard selection at the top.
+  const prevValueRef = useRef(value);
+  if (prevValueRef.current !== value) {
+    prevValueRef.current = value;
     if (!value) {
       setActive(null);
       setDismissedStart(null);
     }
-  }, [value]);
-
-  useEffect(() => {
-    itemRefs.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
+  }
+  const activeKey = active ? `${active.start}:${active.query}` : "";
+  const prevActiveKeyRef = useRef(activeKey);
+  if (prevActiveKeyRef.current !== activeKey) {
+    prevActiveKeyRef.current = activeKey;
+    if (selectedIndex !== 0) setSelectedIndex(0);
+  }
+  // The list can shrink while a lower row is selected (members filter down).
+  const highlightedIndex = Math.min(
+    selectedIndex,
+    Math.max(0, suggestions.length - 1),
+  );
 
   const insert = useCallback(
     (member: UserBasic) => {
@@ -111,12 +111,14 @@ export function MentionComposer({
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
         const delta = event.key === "ArrowDown" ? 1 : suggestions.length - 1;
-        setSelectedIndex((i) => (i + delta) % suggestions.length);
+        const next = (highlightedIndex + delta) % suggestions.length;
+        setSelectedIndex(next);
+        itemRefs.current[next]?.scrollIntoView({ block: "nearest" });
         return;
       }
       if (event.key === "Enter" || event.key === "Tab") {
         event.preventDefault();
-        const member = suggestions[selectedIndex];
+        const member = suggestions[highlightedIndex];
         if (member) insert(member);
         return;
       }
@@ -145,7 +147,7 @@ export function MentionComposer({
               <button
                 type="button"
                 role="option"
-                aria-selected={index === selectedIndex}
+                aria-selected={index === highlightedIndex}
                 key={member.uuid}
                 ref={(el) => {
                   itemRefs.current[index] = el;
@@ -155,7 +157,7 @@ export function MentionComposer({
                 onClick={() => insert(member)}
                 onMouseEnter={() => setSelectedIndex(index)}
                 className={`flex w-full items-center gap-2 border-none px-2 py-1 text-left ${
-                  index === selectedIndex ? "bg-[var(--accent-a4)]" : ""
+                  index === highlightedIndex ? "bg-[var(--accent-a4)]" : ""
                 }`}
               >
                 <Avatar size="xs" className="shrink-0">

packages/ui/src/features/canvas/components/MentionText.tsx

@@ -1,6 +1,6 @@
 import { splitMentionSegments } from "@posthog/shared";
 import { Text } from "@radix-ui/themes";
-import { useMemo } from "react";
+import { Fragment, useMemo } from "react";
 
 /**
  * Thread message content with inline mention tokens rendered as highlighted
@@ -15,15 +15,22 @@ export function MentionText({
   currentUserEmail?: string | null;
   className?: string;
 }) {
-  const segments = useMemo(() => splitMentionSegments(content), [content]);
+  // Key each segment by its character offset — stable for a given content.
+  const segments = useMemo(() => {
+    let offset = 0;
+    return splitMentionSegments(content).map((segment) => {
+      const entry = { segment, key: `${offset}` };
+      offset += segment.text.length;
+      return entry;
+    });
+  }, [content]);
   const selfEmail = currentUserEmail?.toLowerCase();
   return (
     <Text size="1" className={className}>
-      {segments.map((segment, index) =>
+      {segments.map(({ segment, key }) =>
         segment.type === "mention" ? (
           <span
-            // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional
-            key={index}
+            key={key}
             className={`rounded px-0.5 font-medium ${
               selfEmail && segment.email.toLowerCase() === selfEmail
                 ? "bg-[var(--accent-a4)] text-[var(--accent-12)]"
@@ -34,7 +41,7 @@ export function MentionText({
             @{segment.name}
           </span>
         ) : (
-          segment.text
+          <Fragment key={key}>{segment.text}</Fragment>
         ),
       )}
     </Text>

packages/ui/src/features/canvas/utils/mentionComposer.test.ts

@@ -90,16 +90,37 @@ describe("filterMentionCandidates", () => {
 });
 
 describe("applyMention", () => {
-  it("replaces the active query with a token and trailing space", () => {
+  it("replaces the active query, reusing the existing following space", () => {
     const text = "hey @raq can you look";
     const active = { start: 4, query: "raq" };
     const result = applyMention(text, active, 8, raquel);
     expect(result.text).toBe(
-      "hey @[Raquel Smith](raquel@posthog.com)  can you look",
+      "hey @[Raquel Smith](raquel@posthog.com) can you look",
     );
-    expect(result.caret).toBe(
-      "hey @[Raquel Smith](raquel@posthog.com) ".length,
+    expect(result.caret).toBe("hey @[Raquel Smith](raquel@posthog.com) ".length);
+  });
+
+  it("consumes the rest of the @word when the caret moved backward", () => {
+    // "hey @raq" with the caret between "ra" and "q": the trailing "q" is
+    // still query text and must not leak into the message.
+    const result = applyMention(
+      "hey @raq",
+      { start: 4, query: "ra" },
+      7,
+      raquel,
+    );
+    expect(result.text).toBe("hey @[Raquel Smith](raquel@posthog.com) ");
+    expect(result.caret).toBe(result.text.length);
+  });
+
+  it("does not consume text beyond the @word", () => {
+    const result = applyMention(
+      "@ra world",
+      { start: 0, query: "ra" },
+      3,
+      raquel,
     );
+    expect(result.text).toBe("@[Raquel Smith](raquel@posthog.com) world");
   });
 
   it("works at the end of the text", () => {

packages/ui/src/features/canvas/utils/mentionComposer.ts

@@ -56,15 +56,27 @@ export function filterMentionCandidates(
     .map((entry) => entry.member);
 }
 
-/** Replace the active `@query` with the member's mention token. */
+/**
+ * Replace the active `@query` with the member's mention token, leaving the
+ * caret right after it (past any space that already follows).
+ */
 export function applyMention(
   text: string,
   active: ActiveMentionQuery,
   caret: number,
   member: UserBasic,
 ): { text: string; caret: number } {
-  const token = `${formatMention(userDisplayName(member), member.email)} `;
+  // The replacement spans the whole @word: when the caret moved back inside
+  // the query, the characters typed after it are still mention text.
+  let end = caret;
+  while (end < text.length && !/\s/.test(text[end] ?? "")) end++;
+  const tail = text.slice(end);
+  const token = formatMention(userDisplayName(member), member.email);
   const before = text.slice(0, active.start);
-  const next = before + token + text.slice(caret);
-  return { text: next, caret: before.length + token.length };
+  // Reuse an existing following space rather than doubling it up.
+  const inserted = tail.startsWith(" ") ? token : `${token} `;
+  return {
+    text: before + inserted + tail,
+    caret: before.length + inserted.length + (tail.startsWith(" ") ? 1 : 0),
+  };
 }