From 3c12f69ff0a41b01bc4306e15c966dd5476a37a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Wed, 28 Jun 2023 08:20:13 +0200 Subject: [PATCH 1/3] Avoid usage of __experimentalUseFocusOutside --- assets/js/base/components/drawer/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx index 17cd69461ec..c7ae5969826 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,11 @@ const UnforwardedDrawer = ( } ) } onKeyDown={ handleEscapeKeyDown } + onClick={ ( e ) => { + if ( e.target === ref.current ) { + onRequestClose(); + } + } } >
Date: Wed, 28 Jun 2023 08:30:26 +0200 Subject: [PATCH 2/3] Remove unnecessary fix in QuantitySelector --- .../components/quantity-selector/index.tsx | 40 ------------------- 1 file changed, 40 deletions(-) diff --git a/assets/js/base/components/quantity-selector/index.tsx b/assets/js/base/components/quantity-selector/index.tsx index ea9302ac1ba..e1a9b1c0844 100644 --- 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 `` 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, From 3e2e8879d04a5f33d19a7e181bec580a0ec2cd76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Wed, 28 Jun 2023 08:32:43 +0200 Subject: [PATCH 3/3] Add explanatory comment --- assets/js/base/components/drawer/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx index c7ae5969826..0698597a5e1 100644 --- a/assets/js/base/components/drawer/index.tsx +++ b/assets/js/base/components/drawer/index.tsx @@ -146,6 +146,8 @@ 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(); }