fix(browser): submit address on Enter

Generated-By: PostHog Code
Task-Id: b23f944d-dd7f-465b-9fed-1a1d028f35e1

Author: MattPua

packages/ui/src/features/browser/BrowserPanel.interaction.test.tsx

@@ -0,0 +1,55 @@
+import { ServiceProvider } from "@posthog/di/react";
+import { Theme } from "@radix-ui/themes";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Container } from "inversify";
+import { useEffect } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { BrowserPanel } from "./BrowserPanel";
+import {
+  BROWSER_VIEW_COMPONENT,
+  type BrowserViewHandle,
+  type BrowserViewProps,
+} from "./identifiers";
+
+const loadURL = vi.fn<(url: string) => Promise<void>>();
+
+const browserViewHandle: BrowserViewHandle = {
+  loadURL,
+  reload: vi.fn(),
+  stop: vi.fn(),
+  goBack: vi.fn(),
+  goForward: vi.fn(),
+};
+
+function FakeBrowserView({ onReady }: BrowserViewProps) {
+  useEffect(() => {
+    onReady(browserViewHandle);
+    return () => onReady(null);
+  }, [onReady]);
+  return <div data-testid="browser-view" />;
+}
+
+describe("BrowserPanel", () => {
+  it("navigates when Enter is pressed in the address input", async () => {
+    loadURL.mockResolvedValue();
+    const container = new Container();
+    container.bind(BROWSER_VIEW_COMPONENT).toConstantValue(FakeBrowserView);
+    const user = userEvent.setup();
+
+    render(
+      <ServiceProvider container={container}>
+        <Theme>
+          <BrowserPanel url="about:blank" />
+        </Theme>
+      </ServiceProvider>,
+    );
+
+    await user.type(
+      screen.getByRole("textbox", { name: "Address" }),
+      "posthog.com{Enter}",
+    );
+
+    expect(loadURL).toHaveBeenCalledWith("https://posthog.com");
+  });
+});

packages/ui/src/features/browser/BrowserPanel.tsx

@@ -170,6 +170,14 @@ export function BrowserPanel({
     },
     [address, navigate],
   );
+  const handleAddressKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+      event.preventDefault();
+      navigate(address);
+    },
+    [address, navigate],
+  );
 
   if (!BrowserView) return null;
 
@@ -215,6 +223,7 @@ export function BrowserPanel({
             autoFocus={initialUrl.current === DEFAULT_URL}
             value={address}
             onChange={(e) => setAddress(e.target.value)}
+            onKeyDown={handleAddressKeyDown}
             placeholder="Search or enter address"
             spellCheck={false}
             className="h-[24px] w-full rounded-(--radius-2) border-0 bg-(--gray-3) px-2 text-(--gray-12) text-[12px] outline-none focus:bg-(--gray-4)"