Search Result Box Won't Hide After Clicking Outside

[Praveen Shinde]

Search Result Box Won't Hide After Clicking Outside

Description

The search result box remains visible even after clicking outside of it. This issue affects the user experience by cluttering the interface and potentially causing confusion.

Steps to Reproduce

1. Type a query into the search bar.
2. Observe the search results box appearing below the search bar.
3. Click anywhere outside the search results box.

Expected Behavior

The search result box should hide when clicking outside of it.
Expected-Example.webm

example website : https://certificatehub.vercel.app/

Actual Behavior

The search result box remains visible despite clicking outside of it.
Actual.webm

Suggested Fix

Implement an event listener to detect clicks outside the search result box and hide it accordingly.

const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  const handleClickOutside = (event) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setIsVisible(false);
    }
  };