ref(js): Re-use useOnClickOutside from utils (#7397)

src/components/search.tsx

@@ -9,6 +9,8 @@ import DOMPurify from 'dompurify';
 import {Link, navigate} from 'gatsby';
 import algoliaInsights from 'search-insights';
 
+import {useOnClickOutside} from 'sentry-docs/utils';
+
 import {useKeyboardNavigate} from './hooks/useKeyboardNavigate';
 import {Logo} from './logo';
 
@@ -46,32 +48,6 @@ const search = new SentryGlobalSearch([
   'blog',
 ]);
 
-const useClickOutside = (
-  ref: React.RefObject<HTMLElement>,
-  handler: () => void,
-  events?: string[]
-) => {
-  if (!events) {
-    events = [`mousedown`, `touchstart`];
-  }
-
-  const detectClickOutside = (event: MouseEvent) => {
-    return !ref.current.contains(event.target as HTMLElement) && handler();
-  };
-
-  useEffect(() => {
-    for (const event of events) {
-      document.addEventListener(event, detectClickOutside);
-    }
-
-    return () => {
-      for (const event of events) {
-        document.removeEventListener(event, detectClickOutside);
-      }
-    };
-  });
-};
-
 function relativizeUrl(url: string) {
   return url.replace(/^.*:\/\/docs\.sentry\.io/, '');
 }
@@ -89,10 +65,13 @@ export function Search({path, autoFocus, platforms = []}: Props) {
   const [inputFocus, setInputFocus] = useState(false);
   const [showOffsiteResults, setShowOffsiteResults] = useState(false);
   const [loading, setLoading] = useState(true);
-  useClickOutside(ref, () => {
+
+  const handleClickOutside = useCallback(() => {
     setInputFocus(false);
     setShowOffsiteResults(false);
-  });
+  }, []);
+
+  useOnClickOutside({ref, handler: handleClickOutside});
 
   const inputRef = useRef<HTMLInputElement>(null);
 

src/utils.ts

@@ -5,14 +5,14 @@ import qs from 'query-string';
 type ClickOutsideCallback = (event: MouseEvent) => void;
 
 interface UseClickOutsideOpts<E extends HTMLElement> {
-  enabled: boolean;
   handler: ClickOutsideCallback;
   ref: React.RefObject<E>;
+  enabled?: boolean;
 }
 
 export function useOnClickOutside<E extends HTMLElement>({
   ref,
-  enabled,
+  enabled = true,
   handler,
 }: UseClickOutsideOpts<E>) {
   useEffect(() => {