feat: collapse tags on click outside

app/assets/javascripts/components/utils.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent, h, render } from 'preact';
 import { StateUpdater, useCallback, useState } from 'preact/hooks';
+import { useEffect } from 'react';
 
 /**
  * @returns a callback that will close a dropdown if none of its children has
@@ -30,6 +31,26 @@ export function useCloseOnBlur(
   ];
 }
 
+export function useCloseOnClickOutside(
+  container: { current: HTMLDivElement },
+  setOpen: (open: boolean) => void
+): void {
+  const closeOnClickOutside = useCallback((event: { target: EventTarget | null }) => {
+    if (
+      !container.current?.contains(event.target as Node)
+    ) {
+      setOpen(false);
+    }
+  }, [container, setOpen]);
+
+  useEffect(() => {
+    document.addEventListener('click', closeOnClickOutside);
+    return () => {
+      document.removeEventListener('click', closeOnClickOutside);
+    };
+  }, [closeOnClickOutside]);
+}
+
 export function toDirective<Props>(
   component: FunctionComponent<Props>,
   scope: Record<string, '=' | '&' | '@'> = {}