Seach escaping & click outside handle

Author: rhys-burendo

src/app/components/ui/ukhsa/Search/Search.tsx

@@ -1,6 +1,6 @@
 'use client'
 import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useDebounceValue } from 'usehooks-ts'
 
 import { getPages } from '@/api/requests/cms/getPages'
@@ -26,6 +26,9 @@ export function Search({ label, placeholder }: SearchProps) {
   const [searchInputValue, setSearchInputValue] = useState('')
   const [debouncedSearchValue] = useDebounceValue(searchInputValue, DEBOUNCE_MILLISECONDS)
   const [searchResults, setSearchResults] = useState<SearchResult[] | undefined>([])
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const searchContainerRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   const getSearchResults = async ({ query }: { query: string }) => {
     const pages = await getPages({ limit: limit.toString(), search: query })
@@ -40,41 +43,84 @@ export function Search({ label, placeholder }: SearchProps) {
     }
   }, [debouncedSearchValue])
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchContainerRef.current && !searchContainerRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
   return (
     <form method="GET" aria-label={label}>
-      {/* <div className="govuk-form-group mb-0 mt-2"> */}
-      <div className="govuk-form-group">
+      <div className="govuk-form-group relative" ref={searchContainerRef}>
         <label className="govuk-label" htmlFor="search" hidden={true}>
           {placeholder}
         </label>
-        <input
-          className="govuk-input govuk-!-font-size-16"
-          id="search"
-          name="search"
-          type="text"
-          placeholder={placeholder}
-          value={searchInputValue}
-          onChange={(event) => {
-            setSearchInputValue(event.currentTarget.value)
-          }}
-        />
-        <div className="absolute z-[1000] max-h-[200px] overflow-y-auto bg-white shadow-[0px_15px_15px_0px_rgba(0,0,0,0.35)] sm:w-5/12">
-          <ul>
-            {searchResults?.map(({ title, meta: { html_url } }, i) => (
-              <li
-                key={`result-${i}`}
-                value="{i}"
-                className="govuk-!-margin-left-2 govuk-!-margin-right-2 border-b shadow-[0_1px_0_#929191]"
-              >
-                <Link className="govuk-link group block focus:border-b-0 focus:outline-none" href={html_url || ''}>
-                  <div className="size-full border-2 border-transparent p-3 group-focus:border-black group-focus:bg-yellow">
-                    {title}
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
+        <div className="relative">
+          <input
+            ref={searchInputRef}
+            className="govuk-input govuk-!-font-size-16 govuk-!-width-full pr-[2.5rem]"
+            id="search"
+            name="search"
+            type="text"
+            placeholder={placeholder}
+            value={searchInputValue}
+            onFocus={() => {
+              setIsDropdownOpen(true)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsDropdownOpen(false)
+              }
+            }}
+            onChange={(event) => {
+              setSearchInputValue(event.currentTarget.value)
+              setIsDropdownOpen(true)
+            }}
+          />
+          {searchInputValue && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              className="absolute inset-y-0 right-0 mt-[2px] flex h-[36px] items-center justify-center px-3 text-black"
+              style={{ fontSize: '1.5rem', lineHeight: 1 }}
+              onClick={() => {
+                setSearchInputValue('')
+                setSearchResults([])
+                setIsDropdownOpen(false)
+                searchInputRef.current?.focus()
+              }}
+            >
+              &times;
+            </button>
+          )}
         </div>
+        {isDropdownOpen && searchResults && searchResults.length > 0 && (
+          <div className="absolute z-[1000] max-h-[200px] w-full overflow-y-auto bg-white shadow-[0px_15px_15px_0px_rgba(0,0,0,0.35)]">
+            <ul>
+              {searchResults.map(({ title, meta: { html_url } }, i) => (
+                <li
+                  key={`result-${i}`}
+                  value="{i}"
+                  className="govuk-!-margin-left-2 govuk-!-margin-right-2 border-b shadow-[0_1px_0_#929191]"
+                >
+                  <Link className="govuk-link group block focus:border-b-0 focus:outline-none" href={html_url || ''}>
+                    <div className="size-full border-2 border-transparent p-3 group-focus:border-black group-focus:bg-yellow">
+                      {title}
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
         <noscript>
           <style>{'input#search {display: none; }'}</style>
         </noscript>