Avoid usage of __experimentalUseFocusOutside (#10017)

Aljullu · web-flow · commit 1b9746e16803 · 2023-06-28T14:43:03.000+02:00
* Avoid usage of __experimentalUseFocusOutside

* Remove unnecessary fix in QuantitySelector

* Add explanatory comment
diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx
@@ -19,8 +19,6 @@ import { close } from '@wordpress/icons';
 import {
 	useFocusReturn,
 	useFocusOnMount,
-	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
-	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
@@ -93,7 +91,6 @@ const UnforwardedDrawer = (
 	const focusOnMountRef = useFocusOnMount();
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
 	const contentRef = useRef< HTMLDivElement >( null );
 
 	useEffect( () => {
@@ -148,6 +145,13 @@ const UnforwardedDrawer = (
 				}
 			) }
 			onKeyDown={ handleEscapeKeyDown }
+			onClick={ ( e ) => {
+				// If click was done directly in the overlay element and not one
+				// of its descendants, close the drawer.
+				if ( e.target === ref.current ) {
+					onRequestClose();
+				}
+			} }
 		>
 			<div
 				className={ classNames(
@@ -157,7 +161,6 @@ const UnforwardedDrawer = (
 				ref={ drawerRef }
 				role="dialog"
 				tabIndex={ -1 }
-				{ ...focusOutsideProps }
 			>
 				<div
 					className="wc-block-components-drawer__content"
diff --git a/assets/js/base/components/quantity-selector/index.tsx b/assets/js/base/components/quantity-selector/index.tsx
@@ -6,7 +6,6 @@ import { speak } from '@wordpress/a11y';
 import classNames from 'classnames';
 import { useCallback, useLayoutEffect, useRef } from '@wordpress/element';
 import { DOWN, UP } from '@wordpress/keycodes';
-import { usePrevious } from '@woocommerce/base-hooks';
 import { useDebouncedCallback } from 'use-debounce';
 
 /**
@@ -75,45 +74,6 @@ const QuantitySelector = ( {
 	const canDecrease = ! disabled && quantity - step >= minimum;
 	const canIncrease =
 		! disabled && ( ! hasMaximum || quantity + step <= maximum );
-	const previousCanDecrease = usePrevious( canDecrease );
-	const previousCanIncrease = usePrevious( canIncrease );
-
-	// When the increase or decrease buttons get disabled, the focus
-	// gets moved to the `<body>` element. This was causing weird
-	// issues in the Mini-Cart block, as the drawer expects focus to be
-	// inside.
-	// To fix this, we move the focus to the text input after the
-	// increase or decrease buttons get disabled. We only do that if
-	// the focus is on the button or the body element.
-	// See https://github.com/woocommerce/woocommerce-blocks/pull/9345
-	useLayoutEffect( () => {
-		// Refs are not available yet, so abort.
-		if (
-			! inputRef.current ||
-			! decreaseButtonRef.current ||
-			! increaseButtonRef.current
-		) {
-			return;
-		}
-
-		const currentDocument = inputRef.current.ownerDocument;
-		if (
-			previousCanDecrease &&
-			! canDecrease &&
-			( currentDocument.activeElement === decreaseButtonRef.current ||
-				currentDocument.activeElement === currentDocument.body )
-		) {
-			inputRef.current.focus();
-		}
-		if (
-			previousCanIncrease &&
-			! canIncrease &&
-			( currentDocument.activeElement === increaseButtonRef.current ||
-				currentDocument.activeElement === currentDocument.body )
-		) {
-			inputRef.current.focus();
-		}
-	}, [ previousCanDecrease, previousCanIncrease, canDecrease, canIncrease ] );
 
 	/**
 	 * The goal of this function is to normalize what was inserted,
