fix: add blur behavior to popover

Parkreiner · Parkreiner · commit 6a2cfcf9afb3 · 2024-09-20T02:41:42.000Z
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -13,6 +13,7 @@ import {
 	cloneElement,
 	createContext,
 	useContext,
+	useEffect,
 	useId,
 	useRef,
 	useState,
@@ -66,6 +67,15 @@ export const Popover: FC<PopoverProps> = (props) => {
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 	const triggerRef: TriggerRef = useRef(null);
 
+	// This doesn't guarantee that we'll always close any popovers when the
+	// user switches tabs when the component is being controlled, but this is
+	// basically the most we can do from this component
+	useEffect(() => {
+		const closeOnTabSwitch = () => setUncontrolledOpen(false);
+		window.addEventListener("blur", closeOnTabSwitch);
+		return () => window.addEventListener("blur", closeOnTabSwitch);
+	}, []);
+
 	const value: PopoverContextValue = {
 		triggerRef,
 		id: `${hookId}-popover`,
