root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-6217: prevent visibility-driven quick entry focus

Browse Source 
Limit Quick Entry focus restoration to successful submissions instead of dashboard visibility changes.

- Gate desktop focus restoration behind an in-component successful submit marker.
- Remove the stale touch-driven suppressRefocus blur/timer path so touch actions do not force unexpected blurs.
- Cover mount, remount, mobile, submit, duplicate-confirm, Escape, Plan, and Subtask focus behavior in QuickEntryBox tests.
- Add a patch changeset for the published CLI package.

Files changed:
 .changeset/FN-6217-quick-entry-focus.md            |   5 +
 .../dashboard/app/components/QuickEntryBox.tsx     |  36 ++---
 .../components/__tests__/QuickEntryBox.test.tsx    | 167 +++++++++++++++++++--
 3 files changed, 174 insertions(+), 34 deletions(-)

Fusion-Task-Id: FN-6217

Fusion-Task-Lineage: cf8c55c0-583e-42f5-98af-8f3406c86d8c
This commit is contained in:
gsxdsm
2026-06-11 14:55:19 -07:00
parent 7923148490
commit 8eb99ed0f8
3 changed files with 177 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/dashboard/app/components/QuickEntryBox.tsx
View File

@@ -105,8 +105,8 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
const textareaRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const touchButtonRef = useRef<HTMLButtonElement | null>(null);
const suppressRefocusRef = useRef(false);
const justResetRef = useRef(false);
const justSubmittedRef = useRef(false);
const previousProjectIdRef = useRef(projectId);
const [pendingImages, setPendingImages] = useState<PendingImage[]>([]);
const pendingImagesRef = useRef<PendingImage[]>([]);
@@ -321,17 +321,20 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
}
}, [description, isExpanded, autoResize]);
// Restore focus after submission completes (when textarea is re-enabled)
// Restore focus after an in-component submission completes (when textarea is re-enabled).
useEffect(() => {
if (!isSubmitting && description === "" && textareaRef.current) {
// Use setTimeout to ensure focus happens after React re-enables the textarea
const focusTimeout = setTimeout(() => {
if (typeof window !== "undefined" && window.innerWidth > MOBILE_BREAKPOINT_PX) {
textareaRef.current?.focus();
}
}, 0);
return () => clearTimeout(focusTimeout);
if (!justSubmittedRef.current || isSubmitting || description !== "" || !textareaRef.current) {
return;
}
justSubmittedRef.current = false;
// Use setTimeout to ensure focus happens after React re-enables the textarea.
const focusTimeout = setTimeout(() => {
if (typeof window !== "undefined" && window.innerWidth > MOBILE_BREAKPOINT_PX) {
textareaRef.current?.focus();
}
}, 0);
return () => clearTimeout(focusTimeout);
}, [isSubmitting, description]);
// Clear dep search when dropdown closes
@@ -541,6 +544,7 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
}
}
resetForm();
justSubmittedRef.current = true;
} catch (err) {
setDescription(originalDescription);
addToast(getErrorMessage(err) || t("tasks.createFailed", "Failed to create task"), "error");
@@ -737,11 +741,6 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
}, []);
const handleFocus = useCallback(() => {
if (suppressRefocusRef.current) {
textareaRef.current?.blur();
return;
}
// Auto-expand on focus when autoExpand prop is true (default)
if (autoExpand) {
setIsExpanded(true);
@@ -1497,20 +1496,13 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
e.preventDefault();
}
touchButtonRef.current = button;
suppressRefocusRef.current = true;
}
}}
onTouchEnd={() => {
touchButtonRef.current = null;
window.setTimeout(() => {
suppressRefocusRef.current = false;
}, 150);
}}
onTouchCancel={() => {
touchButtonRef.current = null;
window.setTimeout(() => {
suppressRefocusRef.current = false;
}, 150);
}}
>
<button

173
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
View File

@@ -238,6 +238,12 @@ function clickSave() {
fireEvent.click(screen.getByTestId("quick-entry-save"));
}
async function flushPendingTimers() {
await act(async () => {
vi.runOnlyPendingTimers();
});
}
function openPriorityMenu() {
fireEvent.click(screen.getByTestId("quick-entry-priority-button"));
}
@@ -347,26 +353,163 @@ describe("QuickEntryBox", () => {
expect((textarea as HTMLTextAreaElement).rows).toBe(2);
});
it("focuses the quick-entry textarea on mount at desktop width", async () => {
mockDesktopViewport();
renderQuickEntryBox({});
const textarea = screen.getByTestId("quick-entry-input");
describe("post-submission focus restoration (FN-6217)", () => {
it("does not auto-focus the quick-entry textarea on empty desktop mount", async () => {
mockDesktopViewport();
renderQuickEntryBox({});
const textarea = screen.getByTestId("quick-entry-input");
await waitFor(() => {
expect(document.activeElement).toBe(textarea);
});
});
await flushPendingTimers();
it("does not focus the quick-entry textarea on mount at mobile width", async () => {
const innerWidthSpy = vi.spyOn(window, "innerWidth", "get").mockReturnValue(375);
renderQuickEntryBox({});
const textarea = screen.getByTestId("quick-entry-input");
await waitFor(() => {
expect(document.activeElement).not.toBe(textarea);
});
innerWidthSpy.mockRestore();
it("does not auto-focus the quick-entry textarea when restoring a non-empty draft on desktop mount", async () => {
mockDesktopViewport();
localStorage.setItem(QUICK_ENTRY_STORAGE_KEY, "restored draft");
renderQuickEntryBox({});
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
await flushPendingTimers();
expect(textarea.value).toBe("restored draft");
expect(document.activeElement).not.toBe(textarea);
});
it("does not auto-focus the quick-entry textarea on desktop remount or visibility restoration", async () => {
mockDesktopViewport();
const { unmount } = renderQuickEntryBox({});
let textarea = screen.getByTestId("quick-entry-input");
await flushPendingTimers();
expect(document.activeElement).not.toBe(textarea);
unmount();
Object.defineProperty(document, "visibilityState", { configurable: true, value: "visible" });
document.dispatchEvent(new Event("visibilitychange"));
renderQuickEntryBox({});
textarea = screen.getByTestId("quick-entry-input");
await flushPendingTimers();
expect(document.activeElement).not.toBe(textarea);
});
it("focuses the quick-entry textarea after a successful Enter submission on desktop", async () => {
mockDesktopViewport();
const onCreate = vi.fn().mockResolvedValue(CREATED_TASK);
renderQuickEntryBox({ onCreate });
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
const focusSpy = vi.spyOn(textarea, "focus");
fireEvent.change(textarea, { target: { value: "Create from Enter" } });
fireEvent.keyDown(textarea, { key: "Enter" });
await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1));
await flushPendingTimers();
expect(focusSpy).toHaveBeenCalledTimes(1);
expect(document.activeElement).toBe(textarea);
});
it("focuses the quick-entry textarea after a successful Save-button submission on desktop", async () => {
mockDesktopViewport();
const onCreate = vi.fn().mockResolvedValue(CREATED_TASK);
renderQuickEntryBox({ onCreate });
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
const focusSpy = vi.spyOn(textarea, "focus");
fireEvent.change(textarea, { target: { value: "Create from Save" } });
clickSave();
await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1));
await flushPendingTimers();
expect(focusSpy).toHaveBeenCalledTimes(1);
expect(document.activeElement).toBe(textarea);
});
it("focuses the quick-entry textarea only after duplicate-confirmed creation completes on desktop", async () => {
mockDesktopViewport();
const onCreate = vi.fn().mockResolvedValue(CREATED_TASK);
vi.mocked(checkDuplicateTasks).mockResolvedValueOnce([
{ id: "FN-456", title: "Duplicate", description: "desc", column: "todo", score: 0.7 },
]);
renderQuickEntryBox({ onCreate });
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
const focusSpy = vi.spyOn(textarea, "focus");
fireEvent.change(textarea, { target: { value: "maybe duplicate" } });
fireEvent.keyDown(textarea, { key: "Enter" });
expect(await screen.findByText("Possible duplicates")).toBeInTheDocument();
await flushPendingTimers();
expect(focusSpy).not.toHaveBeenCalled();
fireEvent.click(screen.getByRole("button", { name: "Create anyway" }));
await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1));
await waitFor(() => expect(textarea.value).toBe(""));
await flushPendingTimers();
expect(focusSpy).toHaveBeenCalledTimes(1);
expect(document.activeElement).toBe(textarea);
});
it("never auto-focuses the quick-entry textarea on mobile, including after a successful submission", async () => {
mockMobileViewport();
const onCreate = vi.fn().mockResolvedValue(CREATED_TASK);
renderQuickEntryBox({ onCreate });
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
const focusSpy = vi.spyOn(textarea, "focus");
await flushPendingTimers();
expect(document.activeElement).not.toBe(textarea);
fireEvent.change(textarea, { target: { value: "Mobile submission" } });
fireEvent.keyDown(textarea, { key: "Enter" });
await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1));
await flushPendingTimers();
expect(focusSpy).not.toHaveBeenCalled();
expect(document.activeElement).not.toBe(textarea);
});
it("does not auto-focus after Escape clears a non-empty draft", async () => {
mockDesktopViewport();
renderQuickEntryBox({});
const textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
textarea.focus();
fireEvent.focus(textarea);
fireEvent.change(textarea, { target: { value: "Clear me" } });
fireEvent.keyDown(textarea, { key: "Escape" });
await flushPendingTimers();
expect(textarea.value).toBe("");
expect(document.activeElement).not.toBe(textarea);
});
it("does not auto-focus after Plan or Subtask handoff reset the form", async () => {
mockDesktopViewport();
const onPlanningMode = vi.fn();
const onSubtaskBreakdown = vi.fn();
renderQuickEntryBox({ onPlanningMode, onSubtaskBreakdown });
let textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
fireEvent.change(textarea, { target: { value: "Plan this" } });
fireEvent.click(screen.getByTestId("plan-button"));
await flushPendingTimers();
expect(onPlanningMode).toHaveBeenCalledWith("Plan this");
expect(document.activeElement).not.toBe(textarea);
fireEvent.change(textarea, { target: { value: "Break this down" } });
fireEvent.click(screen.getByTestId("subtask-button"));
await flushPendingTimers();
textarea = screen.getByTestId("quick-entry-input") as HTMLTextAreaElement;
expect(onSubtaskBreakdown).toHaveBeenCalledWith("Break this down");
expect(document.activeElement).not.toBe(textarea);
});
});
describe("button focus preservation (FN-6122)", () => {