diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx index 1c703bce3e2b..568f461deb70 100644 --- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx +++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx @@ -126,6 +126,17 @@ export function PullRequestSearchInput({ type="search" value={value} onChange={(event) => onChange(event.currentTarget.value)} + onKeyDown={(event) => { + if (event.key !== "Escape") return; + if (event.nativeEvent.isComposing || event.keyCode === 229) { + event.stopPropagation(); + return; + } + event.preventDefault(); + event.stopPropagation(); + event.currentTarget.blur(); + if (value) onChange(""); + }} placeholder="Search pull requests, or label:bug" aria-label="Search pull requests" /> diff --git a/apps/web/src/hooks/useEscapeToGoBack.ts b/apps/web/src/hooks/useEscapeToGoBack.ts new file mode 100644 index 000000000000..613dc4cb548c --- /dev/null +++ b/apps/web/src/hooks/useEscapeToGoBack.ts @@ -0,0 +1,38 @@ +import { useCanGoBack, useNavigate } from "@tanstack/react-router"; +import { useCallback, useEffect } from "react"; + +export function useEscapeToGoBack() { + const navigate = useNavigate(); + const canGoBack = useCanGoBack(); + const navigateBack = useCallback(() => { + if (canGoBack) { + window.history.back(); + return; + } + void navigate({ to: "/" }); + }, [canGoBack, navigate]); + + useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + if ( + event.defaultPrevented || + event.isComposing || + event.keyCode === 229 || + event.key !== "Escape" || + event.repeat + ) + return; + event.preventDefault(); + + const activeElement = document.activeElement; + if (activeElement instanceof HTMLElement) { + activeElement.blur(); + } + + navigateBack(); + }; + + window.addEventListener("keydown", onKeyDown); + return () => window.removeEventListener("keydown", onKeyDown); + }, [navigateBack]); +} diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx index 99986567cbfa..928ca08bb2b9 100644 --- a/apps/web/src/routes/_chat.pull-requests.tsx +++ b/apps/web/src/routes/_chat.pull-requests.tsx @@ -119,6 +119,7 @@ import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../ import { SidebarInset } from "../components/ui/sidebar"; import { Tooltip, TooltipPopup, TooltipTrigger } from "../components/ui/tooltip"; import { useLiveRefresh } from "../hooks/useLiveRefresh"; +import { useEscapeToGoBack } from "../hooks/useEscapeToGoBack"; import { useOpenPanelPullRequestUrl } from "../hooks/useOpenPanelPullRequestUrl"; import { writeTextToClipboard } from "../hooks/useCopyToClipboard"; import { toastManager } from "../components/ui/toast"; @@ -1880,6 +1881,7 @@ function PullRequestsRouteView() { window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [keybindings]); + useEscapeToGoBack(); return ( diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx index 696ad200f3b7..c250c5d05fd8 100644 --- a/apps/web/src/routes/settings.tsx +++ b/apps/web/src/routes/settings.tsx @@ -1,14 +1,8 @@ import { RotateCcwIcon } from "lucide-react"; -import { - Outlet, - createFileRoute, - redirect, - useCanGoBack, - useLocation, - useNavigate, -} from "@tanstack/react-router"; -import { useCallback, useEffect, useState } from "react"; +import { Outlet, createFileRoute, redirect, useLocation } from "@tanstack/react-router"; +import { useState } from "react"; +import { useEscapeToGoBack } from "../hooks/useEscapeToGoBack"; import { useSettingsRestore } from "../components/settings/SettingsPanels"; import { SettingsBreadcrumb } from "../components/settings/SettingsBreadcrumb"; import { Button } from "../components/ui/button"; @@ -34,39 +28,10 @@ function RestoreDefaultsButton({ onRestored }: { onRestored: () => void }) { function SettingsContentLayout() { const location = useLocation(); - const navigate = useNavigate(); - const canGoBack = useCanGoBack(); const [restoreSignal, setRestoreSignal] = useState(0); const showRestoreDefaults = location.pathname === "/settings/general"; const handleRestored = () => setRestoreSignal((value) => value + 1); - const navigateBackWithinApp = useCallback(() => { - if (canGoBack) { - window.history.back(); - return; - } - void navigate({ to: "/" }); - }, [canGoBack, navigate]); - - useEffect(() => { - const onKeyDown = (event: KeyboardEvent) => { - if (event.defaultPrevented) return; - if (event.key === "Escape") { - event.preventDefault(); - - const activeElement = document.activeElement; - if (activeElement instanceof HTMLElement) { - activeElement.blur(); - } - - navigateBackWithinApp(); - } - }; - - window.addEventListener("keydown", onKeyDown); - return () => { - window.removeEventListener("keydown", onKeyDown); - }; - }, [navigateBackWithinApp]); + useEscapeToGoBack(); return ( ; +} export const Route = createFileRoute("/usage")({ - component: UsagePage, + component: UsageRouteView, });