Fix mobile composer focus race on expand

- Extract keyboard expand flow into a helper - Use flushSync to commit focus state before focusing the editor - Add a regression test for the expand sequence

Julius Marminge committed 6 months ago

Commit 34f46461 parent 91a03e03 files · +93 −21Browse files

Unified · Split

3 files

apps/web/src/components/chat/ChatComposer.tsx +46 −21
apps/web/src/components/chat/mobileComposerFocus.test.ts +28 −0
apps/web/src/components/chat/mobileComposerFocus.ts +19 −0

apps/web/src/components/chat/ChatComposer.tsx+46−21

   useRef,
   useState,
 } from "react";
+import { flushSync } from "react-dom";
 import { useQuery } from "@tanstack/react-query";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { projectSearchEntriesQueryOptions } from "~/lib/projectReactQuery";
 import { ComposerPlanFollowUpBanner } from "./ComposerPlanFollowUpBanner";
 import { resolveComposerMenuActiveItemId } from "./composerMenuHighlight";
 import { searchSlashCommandItems } from "./composerSlashCommandSearch";
+import { expandMobileComposerForKeyboard } from "./mobileComposerFocus";
 import {
   getComposerProviderState,
   renderProviderTraitsMenuContent,
       [blurMobileComposerAfterSend, onSend, shouldBlurMobileComposerOnSubmit],
     );
     const expandMobileComposer = useCallback(() => {
-      if (composerBlurFrameRef.current !== null) {
+      expandMobileComposerForKeyboard({
-        window.cancelAnimationFrame(composerBlurFrameRef.current);
+        cancelPendingBlur: () => {
-        composerBlurFrameRef.current = null;
+          if (composerBlurFrameRef.current !== null) {
-      }
+            window.cancelAnimationFrame(composerBlurFrameRef.current);
-      if (mobileComposerExpandFrameRef.current !== null) {
+            composerBlurFrameRef.current = null;
-        window.cancelAnimationFrame(mobileComposerExpandFrameRef.current);
+          }
-      }
+        },
-      if (mobileComposerExpandReleaseFrameRef.current !== null) {
+        cancelPendingExpandFocus: () => {
-        window.cancelAnimationFrame(mobileComposerExpandReleaseFrameRef.current);
+          if (mobileComposerExpandFrameRef.current !== null) {
-      }
+            window.cancelAnimationFrame(mobileComposerExpandFrameRef.current);
-      mobileComposerExpandInFlightRef.current = true;
+            mobileComposerExpandFrameRef.current = null;
-      setIsComposerFocused(true);
+          }
-      mobileComposerExpandFrameRef.current = window.requestAnimationFrame(() => {
+        },
-        mobileComposerExpandFrameRef.current = null;
+        cancelPendingRelease: () => {
-        composerEditorRef.current?.focusAtEnd();
+          if (mobileComposerExpandReleaseFrameRef.current !== null) {
-        mobileComposerExpandReleaseFrameRef.current = window.requestAnimationFrame(() => {
+            window.cancelAnimationFrame(mobileComposerExpandReleaseFrameRef.current);
-          mobileComposerExpandReleaseFrameRef.current = null;
+            mobileComposerExpandReleaseFrameRef.current = null;
-          mobileComposerExpandInFlightRef.current = false;
+          }
-        });
+        },
+        setExpandInFlight: (inFlight) => {
+          mobileComposerExpandInFlightRef.current = inFlight;
+        },
+        commitExpandedState: () => {
+          flushSync(() => {
+            setIsComposerFocused(true);
+          });
+        },
+        focusEditorAtEnd: () => {
+          composerEditorRef.current?.focusAtEnd();
+        },
+        scheduleRelease: () => {
+          mobileComposerExpandReleaseFrameRef.current = window.requestAnimationFrame(() => {
+            mobileComposerExpandReleaseFrameRef.current = null;
+            mobileComposerExpandInFlightRef.current = false;
+          });
+        },
       });
     }, []);
                           : "text-muted-foreground/60",
                         !activePendingProgress?.activeQuestion?.multiSelect && "px-3 py-2",
                       )}
-                      onPointerDown={(event) => event.preventDefault()}
+                      onPointerDown={(event) => {
+                        event.preventDefault();
+                        expandMobileComposer();
+                      }}
                       onClick={expandMobileComposer}
                       aria-label="Write custom answer"
                     >
                       ? "text-foreground"
                       : "text-muted-foreground/35",
                   )}
-                  onPointerDown={(event) => event.preventDefault()}
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    expandMobileComposer();
+                  }}
                   onClick={expandMobileComposer}
                   aria-label="Expand composer"
                 >

apps/web/src/components/chat/mobileComposerFocus.test.ts+28−0

@@ -0,0 +1,28 @@
	1	import { describe, expect, it, vi } from "vitest";
	2	import { expandMobileComposerForKeyboard } from "./mobileComposerFocus";
	3
	4	describe("expandMobileComposerForKeyboard", () => {
	5	it("focuses after the expanded composer is committed and before release is scheduled", () => {
	6	const calls: string[] = [];
	7
	8	expandMobileComposerForKeyboard({
	9	cancelPendingBlur: vi.fn(() => calls.push("cancel-blur")),
	10	cancelPendingExpandFocus: vi.fn(() => calls.push("cancel-expand-focus")),
	11	cancelPendingRelease: vi.fn(() => calls.push("cancel-release")),
	12	setExpandInFlight: vi.fn((inFlight) => calls.push(`in-flight:${inFlight}`)),
	13	commitExpandedState: vi.fn(() => calls.push("commit-expanded")),
	14	focusEditorAtEnd: vi.fn(() => calls.push("focus")),
	15	scheduleRelease: vi.fn(() => calls.push("schedule-release")),
	16	});
	17
	18	expect(calls).toEqual([
	19	"cancel-blur",
	20	"cancel-expand-focus",
	21	"cancel-release",
	22	"in-flight:true",
	23	"commit-expanded",
	24	"focus",
	25	"schedule-release",
	26	]);
	27	});
	28	});

apps/web/src/components/chat/mobileComposerFocus.ts+19−0

@@ -0,0 +1,19 @@
	1	export interface MobileComposerExpandOptions {
	2	cancelPendingBlur: () => void;
	3	cancelPendingExpandFocus: () => void;
	4	cancelPendingRelease: () => void;
	5	setExpandInFlight: (inFlight: boolean) => void;
	6	commitExpandedState: () => void;
	7	focusEditorAtEnd: () => void;
	8	scheduleRelease: () => void;
	9	}
	10
	11	export function expandMobileComposerForKeyboard(options: MobileComposerExpandOptions) {
	12	options.cancelPendingBlur();
	13	options.cancelPendingExpandFocus();
	14	options.cancelPendingRelease();
	15	options.setExpandInFlight(true);
	16	options.commitExpandedState();
	17	options.focusEditorAtEnd();
	18	options.scheduleRelease();
	19	}