feat: only allow one filter open at a time, easy closing

containers/ecr-viewer/src/app/components/BaseFilter.tsx

@@ -1,6 +1,7 @@
-import React, { ComponentType, ReactNode, useCallback, useState } from "react";
+import React, { ComponentType, ReactNode, useCallback } from "react";
 import { Button } from "@trussworks/react-uswds";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { FilterOpenContext } from "./Filters";
 
 /**
  * Custom hook to manage query parameters in the URL (set, delete, and update). Hook always resets page back to 1.
@@ -94,21 +95,40 @@ export const Filter = ({
   submitHandler: () => void;
   children: ReactNode;
 }) => {
-  const [isFilterBoxOpen, setIsFilterBoxOpen] = useState(false);
+  const { filterBoxOpen, setFilterBoxOpen, lastOpenButtonRef } =
+    React.useContext(FilterOpenContext);
   const openBtnRef = React.useRef<HTMLElement | null>(null);
 
+  const isFilterBoxOpen = filterBoxOpen === type;
+  const setIsFilterBoxOpen = React.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(null);
+    }
+    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.
+  React.useEffect(() => {
+    if (filterBoxOpen !== "__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"}`}
           aria-label={`Filter by ${type}`}
           aria-haspopup="listbox"
           aria-expanded={isFilterBoxOpen}
           onClick={() => {
-            if (isFilterBoxOpen) {
-              resetHandler();
-            }
             setIsFilterBoxOpen(!isFilterBoxOpen);
           }}
           type="button"
@@ -133,7 +153,7 @@ export const Filter = ({
               onSubmit={(e) => {
                 e.preventDefault();
                 submitHandler();
-                setIsFilterBoxOpen(false);
+                setFilterBoxOpen("__submitted__");
                 openBtnRef?.current?.parentElement?.focus();
               }}
             >

containers/ecr-viewer/src/app/components/Filters.tsx

@@ -9,19 +9,70 @@ 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 | null;
+  setFilterBoxOpen: (v: string | null) => void;
+  lastOpenButtonRef: { current: HTMLElement | null };
+};
+
+export const FilterOpenContext = React.createContext<FilterOpenContextValue>({
+  filterBoxOpen: null,
+  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 | null>(null);
+  const lastOpenButtonRef = React.useRef<HTMLElement | null>(null);
+
+  const filterOpenContextValue = {
+    filterBoxOpen,
+    setFilterBoxOpen,
+    lastOpenButtonRef,
+  };
+
+  const resetFilters = React.useCallback(() => {
+    setFilterBoxOpen(null);
+  }, []);
+
+  // 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 />)
+  React.useEffect(() => {
+    const handleEscapeFilters = (event: KeyboardEvent) => {
+      if (event.code === "Escape") {
+        resetFilters();
+
+        // Return focus to the most recently selected open button
+        lastOpenButtonRef.current?.focus();
+        lastOpenButtonRef.current = null;
+      }
+    };
+    if (filterBoxOpen) {
+      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>
   );

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();
+  });
+});