Use useImperativeHandle instead of exposing button ref in Channels.

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { Fragment, useState } from '@wordpress/element';
+import {
+	Fragment,
+	useState,
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Card,
@@ -27,18 +33,24 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
 import './Channels.scss';
 
 type ChannelsProps = {
-	addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
 	registeredChannels: Array< RegisteredChannel >;
 	recommendedChannels: Array< RecommendedChannel >;
 	onInstalledAndActivated?: () => void;
 };
 
-export const Channels: React.FC< ChannelsProps > = ( {
-	addChannelsButtonRef,
-	registeredChannels,
-	recommendedChannels,
-	onInstalledAndActivated,
-} ) => {
+export type ChannelsRef = {
+	/**
+	 * Scroll into the "Add channels" section in the card.
+	 * The section will be expanded, and the "Add channels" button will be in focus.
+	 */
+	scrollIntoAddChannels: () => void;
+};
+
+export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
+	(
+		{ registeredChannels, recommendedChannels, onInstalledAndActivated },
+		ref
+	) => {
 		const hasRegisteredChannels = registeredChannels.length >= 1;
 
 		/**
@@ -46,6 +58,19 @@ export const Channels: React.FC< ChannelsProps > = ( {
 		 * Initial state is expanded if there are no registered channels in first page load.
 		 */
 		const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
+		const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
+
+		useImperativeHandle(
+			ref,
+			() => ( {
+				scrollIntoAddChannels: () => {
+					setExpanded( true );
+					addChannelsButtonRef.current?.focus();
+					addChannelsButtonRef.current?.scrollIntoView();
+				},
+			} ),
+			[]
+		);
 
 		return (
 			<Card className="woocommerce-marketing-channels-card">
@@ -64,16 +89,14 @@ export const Channels: React.FC< ChannelsProps > = ( {
 				</CardHeader>
 
 				{ /* Registered channels section. */ }
-			{ registeredChannels.map( ( el, idx ) => {
-				return (
+				{ registeredChannels.map( ( el, idx ) => (
 					<Fragment key={ el.slug }>
 						<RegisteredChannelCardBody registeredChannel={ el } />
 						{ idx !== registeredChannels.length - 1 && (
 							<CardDivider />
 						) }
 					</Fragment>
-				);
-			} ) }
+				) ) }
 
 				{ /* Recommended channels section. */ }
 				{ recommendedChannels.length >= 1 && (
@@ -85,12 +108,16 @@ export const Channels: React.FC< ChannelsProps > = ( {
 									<Button
 										ref={ addChannelsButtonRef }
 										variant="link"
-									onClick={ () => setExpanded( ! expanded ) }
+										onClick={ () =>
+											setExpanded( ! expanded )
+										}
 									>
 										{ __( 'Add channels', 'woocommerce' ) }
 										<Icon
 											icon={
-											expanded ? chevronUp : chevronDown
+												expanded
+													? chevronUp
+													: chevronDown
 											}
 											size={ 24 }
 										/>
@@ -99,8 +126,7 @@ export const Channels: React.FC< ChannelsProps > = ( {
 							</>
 						) }
 						{ !! expanded &&
-						recommendedChannels.map( ( el, idx ) => {
-							return (
+							recommendedChannels.map( ( el, idx ) => (
 								<Fragment key={ el.plugin }>
 									<SmartPluginCardBody
 										plugin={ el }
@@ -113,10 +139,10 @@ export const Channels: React.FC< ChannelsProps > = ( {
 										<CardDivider />
 									) }
 								</Fragment>
-							);
-						} ) }
+							) ) }
 					</div>
 				) }
 			</Card>
 		);
-};
+	}
+);

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts

@@ -1 +1,2 @@
 export { Channels } from './Channels';
+export type { ChannelsRef } from './Channels';

plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx

@@ -20,7 +20,7 @@ import {
 import { getAdminSetting } from '~/utils/admin-settings';
 import { IntroductionBanner } from './IntroductionBanner';
 import { Campaigns } from './Campaigns';
-import { Channels } from './Channels';
+import { Channels, ChannelsRef } from './Channels';
 import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
 import { LearnMarketing } from './LearnMarketing';
@@ -46,7 +46,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 	const { loading: loadingRecommended, data: dataRecommended } =
 		useRecommendedChannels();
 	const { currentUserCan } = useUser();
-	const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
+	const channelsRef = useRef< ChannelsRef >( null );
 
 	if (
 		loadingIntroductionBanner ||
@@ -77,9 +77,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 				<IntroductionBanner
 					onDismissClick={ dismissIntroductionBanner }
 					onAddChannelsClick={ () => {
-						addChannelsButtonRef.current?.focus();
-						addChannelsButtonRef.current?.click();
-						addChannelsButtonRef.current?.scrollIntoView();
+						channelsRef.current?.scrollIntoAddChannels();
 					} }
 				/>
 			) }
@@ -87,7 +85,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 			{ !! ( dataRegistered && dataRecommended ) &&
 				!! ( dataRegistered.length || dataRecommended.length ) && (
 					<Channels
-						addChannelsButtonRef={ addChannelsButtonRef }
+						ref={ channelsRef }
 						registeredChannels={ dataRegistered }
 						recommendedChannels={ dataRecommended }
 						onInstalledAndActivated={ refetch }