Hide dropdown content when clicking away (nasa-gcn#1989)

Author: tylerbarna

app/routes/circulars._archive._index/DateSelectorMenu.tsx

@@ -18,6 +18,7 @@ import {
 } from '@trussworks/react-uswds'
 import classNames from 'classnames'
 import { type ChangeEvent, useRef, useState } from 'react'
+import { useOnClickOutside } from 'usehooks-ts'
 
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 
@@ -77,7 +78,11 @@ export function DateSelector({
   defaultStartDate?: string
   defaultEndDate?: string
 }) {
+  const ref = useRef<HTMLDivElement>(null)
   const [showContent, setShowContent] = useState(false)
+  useOnClickOutside(ref, () => {
+    setShowContent(false)
+  })
   const defaultShowDateRange = Boolean(
     (defaultStartDate && !dateSelectorLabels[defaultStartDate]) ||
       defaultEndDate
@@ -105,7 +110,7 @@ export function DateSelector({
   }
 
   return (
-    <>
+    <div ref={ref}>
       <input
         type="hidden"
         name="startDate"
@@ -218,6 +223,6 @@ export function DateSelector({
           </CardFooter>
         )}
       </DetailsDropdownContent>
-    </>
+    </div>
   )
 }

app/routes/circulars._archive._index/SortSelectorButton.tsx

@@ -16,7 +16,8 @@ import {
 } from '@trussworks/react-uswds'
 import classNames from 'classnames'
 import type { ChangeEvent } from 'react'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { useOnClickOutside } from 'usehooks-ts'
 
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 
@@ -58,9 +59,12 @@ export function SortSelector({
   form?: string
   defaultValue?: string
 }) {
-  const [showContent, setShowContent] = useState(false)
-
   const submit = useSubmit()
+  const ref = useRef<HTMLDivElement>(null)
+  const [showContent, setShowContent] = useState(false)
+  useOnClickOutside(ref, () => {
+    setShowContent(false)
+  })
 
   function radioOnChange({ target }: ChangeEvent<HTMLInputElement>) {
     setShowContent(false)
@@ -88,7 +92,7 @@ export function SortSelector({
   )
 
   return (
-    <>
+    <div ref={ref}>
       <SortButton
         sort={sanitizedValue}
         expanded={showContent}
@@ -108,6 +112,6 @@ export function SortSelector({
           </Grid>
         </CardBody>
       </DetailsDropdownContent>
-    </>
+    </div>
   )
 }