diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx index 17cd69461ec..0698597a5e1 100644 --- 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(); + } + } } >
= 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 `` 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,