Change/close dropdown when clicked outside (#37169)

* Close Action button dropdown when clicked outside

* changelog

projects/packages/my-jetpack/_inc/components/product-card/action-button.jsx

@@ -2,8 +2,9 @@ import { Button } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown, external, check } from '@wordpress/icons';
 import cs from 'classnames';
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
 import useProduct from '../../data/products/use-product';
+import useOutsideAlerter from '../../hooks/use-outside-alerter';
 import styles from './style.module.scss';
 
 export const PRODUCT_STATUSES = {
@@ -41,6 +42,7 @@ const ActionButton = ( {
 	const { detail } = useProduct( slug );
 	const { manageUrl, purchaseUrl } = detail;
 	const isManageDisabled = ! manageUrl;
+	const dropdownRef = useRef( null );
 
 	const isBusy = isFetching || isInstallingStandalone;
 	const hasAdditionalActions = additionalActions?.length > 0;
@@ -210,6 +212,11 @@ const ActionButton = ( {
 		setCurrentAction( allActions[ 0 ] );
 	}, [ allActions ] );
 
+	// Close the dropdown when clicking outside of it.
+	useOutsideAlerter( dropdownRef, () => {
+		setIsDropdownOpen( false );
+	} );
+
 	if ( ! admin ) {
 		return (
 			<Button { ...buttonState } size="small" variant="link" weight="regular">
@@ -222,7 +229,7 @@ const ActionButton = ( {
 	}
 
 	const dropdown = hasAdditionalActions && (
-		<div className={ styles[ 'action-button-dropdown' ] }>
+		<div ref={ dropdownRef } className={ styles[ 'action-button-dropdown' ] }>
 			<ul className={ styles[ 'dropdown-menu' ] }>
 				{ [ ...additionalActions, getStatusAction() ].map( ( { label, isExternalLink }, index ) => {
 					const onDropdownMenuItemClick = () => {

projects/packages/my-jetpack/_inc/components/product-card/style.module.scss

@@ -77,6 +77,7 @@ $box-shadow-color: rgba( 0, 0, 0, 0.1 );
 	border-radius: calc( var( --jp-border-radius ) / 2 );
 	box-shadow: 0px 1px 1px 0px $box-shadow-color, 0px 1px 1.5px 0px $box-shadow-color, 0px 2px 3px -0.5px $box-shadow-color;
 	padding: var( --spacing-base );
+	z-index: 1;
 
 	.dropdown-item {
 		display: flex;

projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.ts

@@ -13,7 +13,7 @@ import {
 interface MyJetpackConnection {
 	apiNonce: string;
 	apiRoot: string;
-	blogID: number;
+	blogID: string;
 	registrationNonce: string;
 	isSiteConnected: boolean;
 	topJetpackMenuItemUrl: string;

projects/packages/my-jetpack/_inc/hooks/use-outside-alerter/index.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import type { MutableRefObject } from 'react';
+
+const useOutsideAlerter = ( ref: MutableRefObject< HTMLElement >, onClickOutside: () => void ) => {
+	useEffect( () => {
+		const handleClickOutside = ( event: Event ) => {
+			if (
+				event.target instanceof Element &&
+				ref.current &&
+				! ref.current.contains( event.target )
+			) {
+				onClickOutside();
+			}
+		};
+
+		document.addEventListener( 'mousedown', handleClickOutside );
+		return () => {
+			document.removeEventListener( 'mousedown', handleClickOutside );
+		};
+	}, [ ref, onClickOutside ] );
+};
+
+export default useOutsideAlerter;

projects/packages/my-jetpack/changelog/change-close-dropdown-when-clicked-outside

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Fix z-index issue and close action button dropdown when clicked outside