diff --git a/containers/ecr-viewer/src/app/components/BaseFilter.tsx b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
index 8a8e93d7c..2dce64cc0 100644
--- a/containers/ecr-viewer/src/app/components/BaseFilter.tsx
+++ b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
@@ -1,6 +1,14 @@
-import React, { ComponentType, ReactNode, useCallback, useState } from "react";
+import React, {
+  ComponentType,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
 import { Button } from "@trussworks/react-uswds";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { FILTER_CLOSED, FILTER_SUBMITTED, FilterOpenContext } from "./Filters";
 
 /**
  * Custom hook to manage query parameters in the URL (set, delete, and update). Hook always resets page back to 1.
@@ -94,11 +102,33 @@ export const Filter = ({
   submitHandler: () => void;
   children: ReactNode;
 }) => {
-  const [isFilterBoxOpen, setIsFilterBoxOpen] = useState(false);
-  const openBtnRef = React.useRef<HTMLElement | null>(null);
+  const { filterBoxOpen, setFilterBoxOpen, lastOpenButtonRef } =
+    useContext(FilterOpenContext);
+  const openBtnRef = useRef<HTMLElement | null>(null);
+
+  const isFilterBoxOpen = filterBoxOpen === type;
+  const setIsFilterBoxOpen = useCallback((open: boolean) => {
+    if (open) {
+      setFilterBoxOpen(type);
+      // Set the last open button to this button when we open it
+      lastOpenButtonRef.current = openBtnRef.current?.parentElement || null;
+    } else {
+      setFilterBoxOpen(FILTER_CLOSED);
+    }
+    openBtnRef?.current?.parentElement?.focus();
+  }, []);
+
+  // This filter has closed. We need the special submitted case to prevent
+  // a race condition with submitting and resetting if we try to do a reset
+  // just after submitting.
+  useEffect(() => {
+    if (filterBoxOpen !== FILTER_SUBMITTED && filterBoxOpen !== type) {
+      resetHandler();
+    }
+  }, [filterBoxOpen]);
 
   return (
-    <div>
+    <div onClick={(e) => e.stopPropagation()}>
       <div className="position-relative display-flex flex-column">
         <Button
           className={`margin-right-0 ${isActive ? "filters-applied" : "filter-button"}`}
@@ -106,9 +136,6 @@ export const Filter = ({
           aria-haspopup="listbox"
           aria-expanded={isFilterBoxOpen}
           onClick={() => {
-            if (isFilterBoxOpen) {
-              resetHandler();
-            }
             setIsFilterBoxOpen(!isFilterBoxOpen);
           }}
           type="button"
@@ -133,7 +160,7 @@ export const Filter = ({
               onSubmit={(e) => {
                 e.preventDefault();
                 submitHandler();
-                setIsFilterBoxOpen(false);
+                setFilterBoxOpen(FILTER_SUBMITTED);
                 openBtnRef?.current?.parentElement?.focus();
               }}
             >
diff --git a/containers/ecr-viewer/src/app/components/Filters.tsx b/containers/ecr-viewer/src/app/components/Filters.tsx
index 1be1ac937..1a9e47274 100644
--- a/containers/ecr-viewer/src/app/components/Filters.tsx
+++ b/containers/ecr-viewer/src/app/components/Filters.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Icon } from "@trussworks/react-uswds";
 import { useQueryParam, Filter } from "./BaseFilter";
 import {
@@ -9,19 +15,76 @@ import {
   dateRangeLabels,
 } from "@/app/view-data/utils/date-utils";
 
+// We use a context to communicate between the overall <Filters /> component
+// and the `<Filter />` component to avoid prop drilling
+type FilterOpenContextValue = {
+  filterBoxOpen: string;
+  setFilterBoxOpen: (v: string) => void;
+  lastOpenButtonRef: { current: HTMLElement | null };
+};
+// We need the submitted case to differentiate from closing and prevent
+// a race condition with submitting and resetting if we try to do a reset
+// just after submitting.
+export const FILTER_SUBMITTED = "__submitted__";
+export const FILTER_CLOSED = "__closed__";
+
+export const FilterOpenContext = createContext<FilterOpenContextValue>({
+  filterBoxOpen: FILTER_CLOSED,
+  setFilterBoxOpen: () => {},
+  lastOpenButtonRef: { current: null },
+});
+
 /**
  * Functional component that renders Filters section in eCR Library.
  * Includes Filter component for reportable conditions.
  * @returns The rendered Filters component.
  */
 const Filters = () => {
+  const [filterBoxOpen, setFilterBoxOpen] = useState<string>(FILTER_CLOSED);
+  const lastOpenButtonRef = useRef<HTMLElement | null>(null);
+
+  const filterOpenContextValue = {
+    filterBoxOpen,
+    setFilterBoxOpen,
+    lastOpenButtonRef,
+  };
+
+  const resetFilters = useCallback(() => {
+    setFilterBoxOpen(FILTER_CLOSED);
+  }, []);
+
+  // When a filter is open, close it if the escape key is hit or a click happens
+  // outside the <Filter /> component (implemented by stopping click propogation on <Filter />)
+  useEffect(() => {
+    if (filterBoxOpen !== FILTER_CLOSED && filterBoxOpen !== FILTER_SUBMITTED) {
+      const handleEscapeFilters = (event: KeyboardEvent) => {
+        if (event.code === "Escape") {
+          resetFilters();
+
+          // Return focus to the most recently selected open button
+          lastOpenButtonRef.current?.focus();
+          lastOpenButtonRef.current = null;
+        }
+      };
+
+      window.addEventListener("keydown", handleEscapeFilters);
+      window.addEventListener("click", resetFilters);
+      return () => {
+        window.removeEventListener("keydown", handleEscapeFilters);
+        window.removeEventListener("click", resetFilters);
+      };
+    }
+  }, [filterBoxOpen]);
+
   return (
     <div>
       <div className="border-top border-base-lighter"></div>
       <div className="margin-x-3 margin-y-105 display-flex flex-align-center gap-105">
         <span className="line-height-sans-6">FILTERS:</span>
-        <FilterByDate />
-        <FilterReportableConditions />
+        <FilterOpenContext.Provider value={filterOpenContextValue}>
+          <FilterByDate />
+          <FilterReportableConditions />
+        </FilterOpenContext.Provider>
       </div>
     </div>
   );
diff --git a/containers/ecr-viewer/src/app/tests/components/Filters.test.tsx b/containers/ecr-viewer/src/app/tests/components/Filters.test.tsx
index 4a20bdeee..582fd5c3e 100644
--- a/containers/ecr-viewer/src/app/tests/components/Filters.test.tsx
+++ b/containers/ecr-viewer/src/app/tests/components/Filters.test.tsx
@@ -263,6 +263,8 @@ describe("Filter by Reportable Conditions Component", () => {
     const applyButton = screen.getByRole("button", { name: /Apply Filter/i });
     fireEvent.click(applyButton);
 
+    expect(toggleFilterButton).toHaveFocus();
+
     // Should have other condition in search param
     expect(mockPush).toHaveBeenCalledWith(
       expect.stringContaining("condition=Condition2"),
@@ -385,6 +387,8 @@ describe("Filter by Date Component", () => {
     const applyButton = screen.getByRole("button", { name: /Apply Filter/i });
     fireEvent.click(applyButton);
 
+    expect(toggleButton).toHaveFocus();
+
     // Should have date range in search param
     expect(mockPush).toHaveBeenCalledWith(
       expect.stringContaining("dateRange=last-7-days"),
@@ -420,3 +424,127 @@ describe("Filter by Date Component", () => {
     expect(radioAfterReset).not.toBeChecked();
   });
 });
+
+describe("Filter Opening/Closing Controls", () => {
+  it("If a date range is checked but escape is hit without applying filter, filters should reset", async () => {
+    render(<Filters />);
+    const toggleButton = screen.getByRole("button", {
+      name: /Filter by Received Date/i,
+    });
+    fireEvent.click(toggleButton);
+
+    // Click different date option, but user closes button before applying filter
+    const radio = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    fireEvent.click(radio);
+    expect(radio).toBeChecked();
+
+    fireEvent.keyDown(window, { code: "Escape" });
+
+    // should be closed
+    expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+
+    // Selection should not persist because filter was not applied
+    expect(screen.getByText("Last year")).toBeInTheDocument();
+
+    // Focus should reset
+    expect(toggleButton).toHaveFocus();
+
+    // open and check reset
+    fireEvent.click(toggleButton);
+    const radioAfterReset = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    expect(radioAfterReset).not.toBeChecked();
+  });
+
+  it("If a date range is checked but outside click is hit without applying filter, filters should reset", async () => {
+    render(
+      <div data-testid="outside">
+        <Filters />
+      </div>,
+    );
+    const toggleButton = screen.getByRole("button", {
+      name: /Filter by Received Date/i,
+    });
+    fireEvent.click(toggleButton);
+
+    // Click different date option, but user closes button before applying filter
+    const radio = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    fireEvent.click(radio);
+    expect(radio).toBeChecked();
+
+    const outsideDiv = screen.getByTestId("outside");
+    fireEvent.click(outsideDiv);
+
+    // should be closed
+    expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+
+    // Selection should not persist because filter was not applied
+    expect(screen.getByText("Last year")).toBeInTheDocument();
+
+    // open and check reset
+    fireEvent.click(toggleButton);
+    const radioAfterReset = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    expect(radioAfterReset).not.toBeChecked();
+  });
+
+  it("If a date range is checked but condition button is hit, date should reset and close", async () => {
+    render(<Filters />);
+    const dateToggleButton = screen.getByRole("button", {
+      name: /Filter by Received Date/i,
+    });
+    fireEvent.click(dateToggleButton);
+
+    // Click different date option, but user closes button before applying filter
+    const radio = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    fireEvent.click(radio);
+    expect(radio).toBeChecked();
+
+    const conditionToggleButton = screen.getByRole("button", {
+      name: /Filter by reportable condition/i,
+    });
+
+    fireEvent.click(conditionToggleButton);
+
+    // date should be closed
+    expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+
+    // Selection should not persist because filter was not applied
+    expect(screen.getByText("Last year")).toBeInTheDocument();
+
+    // condtion should be open
+    expect(
+      screen.getByText("Filter by Reportable Condition"),
+    ).toBeInTheDocument();
+
+    // open date and check reset
+    fireEvent.click(dateToggleButton);
+    const radioAfterReset = await waitFor(() =>
+      screen.getByRole("radio", {
+        name: "Last 7 days",
+      }),
+    );
+    expect(radioAfterReset).not.toBeChecked();
+
+    // condtion should be closed
+    expect(screen.queryByText("Select all")).not.toBeInTheDocument();
+  });
+});