Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Avoid usage of __experimentalUseFocusOutside #10017

Merged
merged 3 commits into from
Jun 28, 2023
+7 −44
Merged

Avoid usage of __experimentalUseFocusOutside #10017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c12f69
Avoid usage of __experimentalUseFocusOutside
Aljullu Jun 28, 2023
689acc6
Remove unnecessary fix in QuantitySelector
Aljullu Jun 28, 2023
3e2e887
Add explanatory comment
Aljullu Jun 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions assets/js/base/components/drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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( () => {
Expand Down Expand Up @@ -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(
Expand All @@ -157,7 +161,6 @@ const UnforwardedDrawer = (
ref={ drawerRef }
role="dialog"
tabIndex={ -1 }
{ ...focusOutsideProps }
>
<div
className="wc-block-components-drawer__content"
Expand Down
40 changes: 0 additions & 40 deletions assets/js/base/components/quantity-selector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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,
Expand Down