Close Circular and Schema Version Dropdowns When Clicking Away (nasa-…

…gcn#2362) Fixes nasa-gcn#2345.
Vidushi-GitHub · Jun 10, 2024 · f23abf7 · f23abf7
1 parent dbc6edb
commit f23abf7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/app/routes/circulars.$circularId.($version)/route.tsx b/app/routes/circulars.$circularId.($version)/route.tsx
@@ -9,8 +9,9 @@ import type { HeadersFunction, LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Link, useLoaderData, useRouteLoaderData } from '@remix-run/react'
 import { Button, ButtonGroup, CardBody, Icon } from '@trussworks/react-uswds'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import invariant from 'tiny-invariant'
+import { useOnClickOutside } from 'usehooks-ts'
 
 import type { loader as parentLoader } from '../circulars.$circularId/route'
 import { get } from '../circulars/circulars.server'
@@ -154,23 +155,26 @@ function CircularsHistory({
   circular: number
   history?: number[]
 }) {
-  const [showVersions, setShowVersions] = useState<boolean>(false)
-
+  const ref = useRef<HTMLDivElement>(null)
+  const [showContent, setShowContent] = useState(false)
+  useOnClickOutside(ref, () => {
+    setShowContent(false)
+  })
   return (
-    <>
+    <div ref={ref}>
       <DetailsDropdownButton
         outline
         onClick={() => {
-          setShowVersions((shown) => !shown)
+          setShowContent((shown) => !shown)
         }}
       >
         Versions
       </DetailsDropdownButton>
-      {showVersions && (
+      {showContent && (
         <DetailsDropdownContent>
           <CardBody>
             <Link
-              onClick={() => setShowVersions(!showVersions)}
+              onClick={() => setShowContent(!showContent)}
               to={`/circulars/${circular}`}
             >
               Latest
@@ -179,7 +183,7 @@ function CircularsHistory({
               history.map((version) => (
                 <div key={version}>
                   <Link
-                    onClick={() => setShowVersions(!showVersions)}
+                    onClick={() => setShowContent(!showContent)}
                     to={`/circulars/${circular}/${version}`}
                   >
                     Version {version}
@@ -189,6 +193,6 @@ function CircularsHistory({
           </CardBody>
         </DetailsDropdownContent>
       )}
-    </>
+    </div>
   )
 }
diff --git a/app/routes/docs_._schema-browser.schema.($version).$/route.tsx b/app/routes/docs_._schema-browser.schema.($version).$/route.tsx
@@ -18,9 +18,10 @@ import {
 } from '@trussworks/react-uswds'
 import classNames from 'classnames'
 import { dirname } from 'path'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useParams } from 'react-router'
 import invariant from 'tiny-invariant'
+import { useOnClickOutside } from 'usehooks-ts'
 
 import type { loader as parentLoader } from '../docs_._schema-browser'
 import type { Schema } from './components'
@@ -125,19 +126,23 @@ function VersionSelector({
   versions: { name: string | null; ref: string }[]
   path: string
 }) {
-  const [showVersions, setShowVersions] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const [showContent, setShowContent] = useState(false)
+  useOnClickOutside(ref, () => {
+    setShowContent(false)
+  })
 
   return (
-    <>
+    <div ref={ref}>
       <DetailsDropdownButton
         title="Select version"
         onClick={() => {
-          setShowVersions((shown) => !shown)
+          setShowContent((shown) => !shown)
         }}
       >
         Version: {version}
       </DetailsDropdownButton>
-      {showVersions && (
+      {showContent && (
         <DetailsDropdownContent>
           <CardHeader>
             <h3>Versions</h3>
@@ -149,7 +154,7 @@ function VersionSelector({
                   className="usa-link"
                   to={`/docs/schema/${ref}/${path}`}
                   onClick={() => {
-                    setShowVersions(false)
+                    setShowContent(false)
                   }}
                 >
                   {name || ref}
@@ -159,7 +164,7 @@ function VersionSelector({
           </CardBody>
         </DetailsDropdownContent>
       )}
-    </>
+    </div>
   )
 }