From b17c63db507a36582ba1e770c7833ba50c9bbbd4 Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@users.noreply.github.com>
Date: Wed, 11 Dec 2024 09:57:16 +0800
Subject: [PATCH] Dismiss interval dropdown list by useOutsideClickCallback
 (#97281)

---
 .../stats-interval-dropdown/index.jsx          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/components/stats-interval-dropdown/index.jsx b/client/components/stats-interval-dropdown/index.jsx
index c80df41e68b1a..0dd65a6c027d2 100644
--- a/client/components/stats-interval-dropdown/index.jsx
+++ b/client/components/stats-interval-dropdown/index.jsx
@@ -5,9 +5,20 @@ import { check, Icon, chevronDown, lock } from '@wordpress/icons';
 import clsx from 'clsx';
 import { capitalize } from 'lodash';
 import qs from 'qs';
+import { useRef } from 'react';
 import './style.scss';
+import useOutsideClickCallback from 'calypso/lib/use-outside-click-callback';
+
+const StatsIntervalDropdownListing = ( {
+	selected,
+	onSelection,
+	intervals,
+	onGatedHandler,
+	onClickOutside,
+} ) => {
+	const ref = useRef( null );
+	useOutsideClickCallback( ref, onClickOutside );
 
-const StatsIntervalDropdownListing = ( { selected, onSelection, intervals, onGatedHandler } ) => {
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 
 	const isSelectedItem = ( interval ) => {
@@ -33,7 +44,7 @@ const StatsIntervalDropdownListing = ( { selected, onSelection, intervals, onGat
 	};
 
 	return (
-		<div className="stats-interval-dropdown-listing">
+		<div className="stats-interval-dropdown-listing" ref={ ref }>
 			<ul className="stats-interval-dropdown-listing__list" role="radiogroup">
 				{ Object.keys( intervals ).map( ( intervalKey ) => {
 					const interval = intervals[ intervalKey ];
@@ -105,13 +116,14 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 					<Icon className="gridicon" icon={ chevronDown } />
 				</Button>
 			) }
-			renderContent={ () => (
+			renderContent={ ( { onClose } ) => (
 				<div className="stats-interval-dropdown__container">
 					<StatsIntervalDropdownListing
 						selected={ period }
 						onSelection={ onSelectionHandler }
 						intervals={ intervals }
 						onGatedHandler={ onGatedHandler }
+						onClickOutside={ onClose }
 					/>
 				</div>
 			) }