Skip to content

Navigator: add focus restoration #38149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 12 commits into from
Feb 7, 2022
Merged

Navigator: add focus restoration #38149

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d22645e
`Navigator`: add `focusTargetSelector` to the options
ciampo Jan 21, 2022
257c6dc
Use `focusTargetSelector` to restore focus when navigating back
ciampo Jan 21, 2022
13f4860
Update Storybook example to make use of `focusTargetSelector`
ciampo Jan 21, 2022
a84d1da
Update the Preferences Modal to make use of `focusTargetSelector`
ciampo Jan 21, 2022
5ccb775
Update the Global Styles Sidebar to make use of `focusTargetSelector`
ciampo Jan 21, 2022
b11fd4f
Update docs
ciampo Jan 21, 2022
c741256
Assign fallback back to `push` options to avoid error when destructur…
ciampo Jan 21, 2022
be58835
Add focus restoration unit tests
ciampo Jan 21, 2022
b5e2c39
Merge wrapper refs
ciampo Jan 21, 2022
2cd1dfe
CHANGELOG
ciampo Jan 21, 2022
e398a19
Fix `push` type by marking `options` as optional parameter
ciampo Jan 22, 2022
b3e5ede
Simplify stack operations: compute isInitial, use `usePrevious` for `…
ciampo Feb 4, 2022
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
Prev Previous commit
Next Next commit
Merge wrapper refs
  • Loading branch information
@ciampo
ciampo committed Feb 7, 2022
commit b5e2c39b36623152c485ffd20179e75452f88e69
12 changes: 9 additions & 3 deletions packages/components/src/navigator/navigator-screen/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { css } from '@emotion/react';
*/
import { focus } from '@wordpress/dom';
import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
import { useReducedMotion } from '@wordpress/compose';
import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
import { isRTL } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -99,13 +99,19 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
elementToFocus.focus();
}, [ isInitialLocation, isMatch ] );

const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
Copy link
Contributor Author

@ciampo ciampo Jan 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merging the two refs, so that they are correctly assigned to the wrapper element regardless of the value of prefersReducedMotion


if ( ! isMatch ) {
return null;
}

if ( prefersReducedMotion ) {
return (
<View ref={ forwardedRef } className={ classes } { ...otherProps }>
<View
ref={ mergedWrapperRef }
className={ classes }
{ ...otherProps }
>
{ children }
</View>
);
Expand Down Expand Up @@ -148,7 +154,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {

return (
<motion.div
ref={ wrapperRef }
ref={ mergedWrapperRef }
className={ classes }
{ ...otherProps }
{ ...animatedProps }
Expand Down