From 8faf9002c2bf746ec3bdfd98415743b3b7b0b7ed Mon Sep 17 00:00:00 2001
From: John Coffey <johnellis@linux.com>
Date: Sun, 23 Aug 2026 14:14:49 -0700
Subject: [PATCH] Stop the composer stealing focus while the subject is typed

The body editor was told to focus itself with

    autoFocus={d.to.length > 0 && Boolean(d.subject)}

and RichEditor ran that as an effect keyed on the prop. Typing the first
letter of a subject flipped Boolean(d.subject) false -> true, the effect fired,
and the caret jumped from the subject line into the message body.

autoFocus now means what it means on a DOM element: focus on mount. RichEditor
captures the prop in a ref and focuses once, and the composer decides where the
caret starts when it opens - recipients for a blank message, body for a reply
that already has recipients and a subject - instead of deriving it from state
that changes as the user types.

initialFocusTarget is extracted and exported so the rule is stated in one place
and tested. The regression test renders RichEditor and asserts it does not take
focus from a field being typed into; it fails against the previous effect.
---
 web/src/views/compose/Composer.tsx            | 20 +++++-
 web/src/views/compose/RichEditor.tsx          | 29 +++++----
 .../views/compose/__tests__/focus.test.tsx    | 62 +++++++++++++++++++
 3 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 web/src/views/compose/__tests__/focus.test.tsx

diff --git a/web/src/views/compose/Composer.tsx b/web/src/views/compose/Composer.tsx
index b992f5f..99be5e5 100644
--- a/web/src/views/compose/Composer.tsx
+++ b/web/src/views/compose/Composer.tsx
@@ -38,6 +38,11 @@ export function Composer({ draft }: { draft: Draft }) {
   const [showToolbar, setShowToolbar] = useState(true);
   const d = draft;
   const key = d.key;
+  // Where the caret starts, decided once when the composer opens: a blank
+  // message starts in the recipients, a reply (already addressed and titled)
+  // starts in the body. Deriving this from live state would move the caret
+  // while the user types.
+  const [initialFocus] = useState(() => initialFocusTarget(draft));
 
   const patch = useCallback((p: Partial<Draft>) => update(key, p), [update, key]);
   const onHtml = useCallback((html: string) => update(key, { html }), [update, key]);
@@ -138,7 +143,7 @@ export function Composer({ draft }: { draft: Draft }) {
           )}
           <div className="composer-field">
             <label htmlFor={`${key}-to`}>To</label>
-            <RecipientInput id={`${key}-to`} value={d.to} onChange={(to) => patch({ to })} placeholder="Recipients" autoFocus={!d.to.length} />
+            <RecipientInput id={`${key}-to`} value={d.to} onChange={(to) => patch({ to })} placeholder="Recipients" autoFocus={initialFocus === "to"} />
             <span className="field-extra">
               {!d.showCc && <button type="button" onClick={() => patch({ showCc: true })}>Cc</button>}
               {!d.showBcc && <button type="button" onClick={() => patch({ showBcc: true })}>Bcc</button>}
@@ -165,13 +170,13 @@ export function Composer({ draft }: { draft: Draft }) {
           )}
           <div className="composer-field">
             <label htmlFor={`${key}-subj`} className="sr-only">Subject</label>
-            <input id={`${key}-subj`} className="plain" placeholder="Subject" value={d.subject} onChange={(e) => patch({ subject: e.target.value })} autoFocus={d.to.length > 0 && !d.subject} />
+            <input id={`${key}-subj`} className="plain" placeholder="Subject" value={d.subject} onChange={(e) => patch({ subject: e.target.value })} autoFocus={initialFocus === "subject"} />
             {d.priority !== "normal" && <span className="tag" style={{ background: d.priority === "high" ? "var(--danger)" : "var(--fg-faint)" }}>{d.priority === "high" ? "High priority" : "Low priority"}</span>}
             {d.requestReceipt && <span className="tag" style={{ background: "var(--accent)" }} title="Read receipt requested"><CheckCheck size={12} /></span>}
           </div>
         </div>
         {d.format === "html" ? (
-          <RichEditor ref={editorRef} html={d.html} onChange={onHtml} placeholder="Write your message…" spellcheck={settings.spellcheck} onFiles={(files) => addFiles(key, files)} showToolbar={showToolbar} autoFocus={d.to.length > 0 && Boolean(d.subject)} />
+          <RichEditor ref={editorRef} html={d.html} onChange={onHtml} placeholder="Write your message…" spellcheck={settings.spellcheck} onFiles={(files) => addFiles(key, files)} showToolbar={showToolbar} autoFocus={initialFocus === "body"} />
         ) : (
           <textarea className="editor-textarea" value={d.text} onChange={(e) => patch({ text: e.target.value })} placeholder="Write your message…" spellCheck={settings.spellcheck} />
         )}
@@ -230,3 +235,12 @@ export function Composer({ draft }: { draft: Draft }) {
     </div>
   );
 }
+
+export type FocusTarget = "to" | "subject" | "body";
+
+/** Which field a freshly opened composer should put the caret in. */
+export function initialFocusTarget(d: Pick<Draft, "to" | "subject">): FocusTarget {
+  if (!d.to.length) return "to";
+  if (!d.subject) return "subject";
+  return "body";
+}
diff --git a/web/src/views/compose/RichEditor.tsx b/web/src/views/compose/RichEditor.tsx
index 6c21951..93c1914 100644
--- a/web/src/views/compose/RichEditor.tsx
+++ b/web/src/views/compose/RichEditor.tsx
@@ -48,20 +48,23 @@ export const RichEditor = forwardRef<RichEditorHandle, Props>(function RichEdito
     }
   }, [html]);
 
+  // autoFocus means "focus on mount", as it does on a DOM element. Reacting to
+  // the prop turning true later yanks the caret out of whatever the user is
+  // typing in — typing the first letter of a subject used to jump to the body.
+  const autoFocusOnMount = useRef(autoFocus);
   useEffect(() => {
-    if (autoFocus) {
-      const el = elRef.current;
-      if (!el) return;
-      el.focus();
-      // caret at start
-      const sel = window.getSelection();
-      const range = document.createRange();
-      range.setStart(el, 0);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-    }
-  }, [autoFocus]);
+    if (!autoFocusOnMount.current) return;
+    const el = elRef.current;
+    if (!el) return;
+    el.focus();
+    // caret at start
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(el, 0);
+    range.collapse(true);
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }, []);
 
   const emit = useCallback(() => {
     const el = elRef.current;
diff --git a/web/src/views/compose/__tests__/focus.test.tsx b/web/src/views/compose/__tests__/focus.test.tsx
new file mode 100644
index 0000000..cc2c93b
--- /dev/null
+++ b/web/src/views/compose/__tests__/focus.test.tsx
@@ -0,0 +1,62 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { RichEditor } from "../RichEditor";
+import { initialFocusTarget } from "../Composer";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("initialFocusTarget", () => {
+  it("starts a blank message in the recipients", () => {
+    expect(initialFocusTarget({ to: [], subject: "" })).toBe("to");
+  });
+  it("moves on to the subject once there are recipients", () => {
+    expect(initialFocusTarget({ to: [{ name: null, email: "a@b.c" }], subject: "" })).toBe("subject");
+  });
+  it("starts a reply — addressed and titled — in the body", () => {
+    expect(initialFocusTarget({ to: [{ name: null, email: "a@b.c" }], subject: "Re: hi" })).toBe("body");
+  });
+});
+
+describe("RichEditor autoFocus", () => {
+  let host: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+  });
+
+  const render = (autoFocus: boolean) =>
+    act(() => {
+      root.render(<RichEditor html="" onChange={() => {}} showToolbar={false} autoFocus={autoFocus} />);
+    });
+
+  const editor = () => host.querySelector<HTMLElement>('[contenteditable="true"]');
+
+  it("focuses on mount when asked to", () => {
+    render(true);
+    expect(document.activeElement).toBe(editor());
+  });
+
+  it("does not steal focus when autoFocus turns true later", () => {
+    render(false);
+    expect(document.activeElement).not.toBe(editor());
+
+    // Something else holds the caret — the subject field being typed into.
+    const subject = document.createElement("input");
+    document.body.appendChild(subject);
+    subject.focus();
+    expect(document.activeElement).toBe(subject);
+
+    render(true);
+    expect(document.activeElement, "the editor grabbed focus mid-typing").toBe(subject);
+    subject.remove();
+  });
+});