Close the dropdown when the user clicks outside it (#99179)

Automattic · Feb 3, 2025 · ba87db5 · ba87db5
1 parent 9f92bc9
commit ba87db5
Showing 1 changed file with 70 additions and 19 deletions.
diff --git a/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx b/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx
@@ -19,7 +19,7 @@ import {
 	getPartnerCoupon,
 } from '@automattic/wpcom-checkout';
 import styled from '@emotion/styled';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { has100YearPlan } from 'calypso/lib/cart-values/cart-items';
 import { useExperiment } from 'calypso/lib/explat';
 import { isWcMobileApp } from 'calypso/lib/mobile-app';
@@ -40,7 +40,7 @@ import type {
 	ResponseCartProduct,
 	RemoveCouponFromCart,
 } from '@automattic/shopping-cart';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, RefObject } from 'react';
 
 const WPOrderReviewList = styled.ul`
 	box-sizing: border-box;
@@ -308,6 +308,53 @@ function LineItemWrapper( {
 		isDeletable = false;
 	}
 
+	const isVariantDropdownOpen = product.uuid === variantOpenId;
+	const isAkQuantityDropdownOpen = product.uuid === akQuantityOpenId;
+	const variantDropdownRef = useRef< HTMLDivElement >( null );
+	const akQuantityDropdownRef = useRef< HTMLDivElement >( null );
+
+	useEffect( () => {
+		const handleClickOutside =
+			( ref: RefObject< HTMLDivElement >, toggle: ( key: string | null ) => void ) =>
+			( event: MouseEvent ): void => {
+				if ( ref.current && ! ref.current.contains( event.target as Node ) ) {
+					toggle( null );
+				}
+			};
+
+		const handleClickOutsideVariantDropdown = handleClickOutside(
+			variantDropdownRef,
+			toggleVariantSelector
+		);
+
+		const handleClickOutsideAkQuantityDropdown = handleClickOutside(
+			akQuantityDropdownRef,
+			toggleAkQuantityDropdown
+		);
+
+		if ( isVariantDropdownOpen ) {
+			document.addEventListener( 'mousedown', handleClickOutsideVariantDropdown as EventListener );
+		} else {
+			document.removeEventListener( 'mousedown', handleClickOutsideVariantDropdown );
+		}
+
+		if ( isAkQuantityDropdownOpen ) {
+			document.addEventListener( 'mousedown', handleClickOutsideAkQuantityDropdown );
+		} else {
+			document.removeEventListener( 'mousedown', handleClickOutsideAkQuantityDropdown );
+		}
+
+		return () => {
+			document.removeEventListener( 'mousedown', handleClickOutsideVariantDropdown );
+			document.removeEventListener( 'mousedown', handleClickOutsideAkQuantityDropdown );
+		};
+	}, [
+		isVariantDropdownOpen,
+		toggleVariantSelector,
+		isAkQuantityDropdownOpen,
+		toggleAkQuantityDropdown,
+	] );
+
 	const shouldShowVariantSelector = ( () => {
 		if ( ! onChangeSelection ) {
 			return false;
@@ -379,25 +426,29 @@ function LineItemWrapper( {
 			>
 				<DropdownWrapper>
 					{ finalShouldShowVariantSelector && (
-						<ItemVariationPicker
-							id={ product.uuid }
-							selectedItem={ product }
-							onChangeItemVariant={ onChangeSelection }
-							isDisabled={ isDisabled }
-							variants={ variants }
-							toggle={ toggleVariantSelector }
-							isOpen={ variantOpenId === product.uuid }
-						/>
+						<div ref={ variantDropdownRef }>
+							<ItemVariationPicker
+								id={ product.uuid }
+								selectedItem={ product }
+								onChangeItemVariant={ onChangeSelection }
+								isDisabled={ isDisabled }
+								variants={ variants }
+								toggle={ toggleVariantSelector }
+								isOpen={ isVariantDropdownOpen }
+							/>
+						</div>
 					) }
 					{ ! isRenewal && isAkPro500Cart && (
-						<AkismetProQuantityDropDown
-							id={ product.uuid }
-							responseCart={ responseCart }
-							setForceShowAkQuantityDropdown={ setForceShowAkQuantityDropdown }
-							onChangeAkProQuantity={ onChangeAkProQuantity }
-							toggle={ toggleAkQuantityDropdown }
-							isOpen={ akQuantityOpenId === product.uuid }
-						/>
+						<div ref={ akQuantityDropdownRef }>
+							<AkismetProQuantityDropDown
+								id={ product.uuid }
+								responseCart={ responseCart }
+								setForceShowAkQuantityDropdown={ setForceShowAkQuantityDropdown }
+								onChangeAkProQuantity={ onChangeAkProQuantity }
+								toggle={ toggleAkQuantityDropdown }
+								isOpen={ isAkQuantityDropdownOpen }
+							/>
+						</div>
 					) }
 				</DropdownWrapper>
 			</LineItem>