What needs to be done

Update the UI for closing filter boxes in the eCR Library, such that:

GIVEN that a filter box is open
WHEN a user clicks off the box (anywhere but the filter box) or clicks a different filter box
THEN the current filter box closes automatically.

Why it needs to be done

Currently, when a filter box is open, a user must click the filter button directly to close the box. This is not ideal for accessibility purposes.

Design review

Link to Figma design in Dev mode
Link to Figma prototype

Acceptance Criteria

• Given an open filter box, it should close if a user clicks anywhere outside of the box
• Given an open filter box, it should close if the user hits the esc key
• Only one filter box should open at a time.
  - For example, if the user clicks on condition, the condition box will open. Then, if they clicked on the date filter button, the condition box would automatically close and the filter by date box would open.
  - If a filter box is open and the reset button is clicked, then the filter box should close automatically.
• Unit tests have been added

Technical Notes

Relevant files:

• src/app/components/Filters.tsx