Skip to content
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

Popover: pass missing anchor ref to the getAnchorRect callback prop #42076

Merged
merged 5 commits into from
Jul 5, 2022
Merged

Popover: pass missing anchor ref to the getAnchorRect callback prop #42076

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8cc8044
Popover: pass missing anchor ref to the getAnchorRef callback prop
ciampo Jun 30, 2022
98d866a
CHANGELOG
ciampo Jun 30, 2022
4dace03
Update packages/components/CHANGELOG.md
ciampo Jul 1, 2022
89c9418
Move anchorRefFallback initialisation up
ciampo Jul 1, 2022
81f3a91
Pass anchorRefFallback.current to the second getAnchorRect call
ciampo Jul 1, 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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

- `TextHighlight`: Convert to TypeScript ([#41698](https://github.com/WordPress/gutenberg/pull/41698)).

### Bug Fix

- `Popover`: pass missing anchor ref to the `getAnchorRect` callback prop. ([#42076](https://github.com/WordPress/gutenberg/pull/42076))

## 19.14.0 (2022-06-29)

### Bug Fix
Expand Down
13 changes: 8 additions & 5 deletions packages/components/src/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const Popover = (
}

const arrowRef = useRef( null );
const anchorRefFallback = useRef( null );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isExpanded = expandOnMobile && isMobileViewport;
const hasArrow = ! isExpanded && ! noArrow;
Expand All @@ -147,8 +148,11 @@ const Popover = (
return anchorRef.ownerDocument;
} else if ( anchorRect && anchorRect?.ownerDocument ) {
return anchorRect.ownerDocument;
} else if ( getAnchorRect ) {
return getAnchorRect()?.ownerDocument ?? document;
} else if ( getAnchorRect && anchorRefFallback.current ) {
return (
getAnchorRect( anchorRefFallback.current )?.ownerDocument ??
document
);
}

return document;
Expand Down Expand Up @@ -203,7 +207,6 @@ const Popover = (
: undefined,
hasArrow ? arrow( { element: arrowRef } ) : undefined,
].filter( ( m ) => !! m );
const anchorRefFallback = useRef( null );
const slotName = useContext( slotNameContext ) || __unstableSlotName;
const slot = useSlot( slotName );

Expand Down Expand Up @@ -272,10 +275,10 @@ const Popover = (
return anchorRect;
},
};
} else if ( getAnchorRect ) {
} else if ( getAnchorRect && anchorRefFallback.current ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This extra check is to mimic the logic from the early return statement that existed prior to the refactor from #40740).

Not 100% sure about introducing it though, as it may cause regressions (since the getAnchorRect callback may be called fewer times, in case anchorRefFallback.current is not defined).

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, interesting question. In this case from reading through the series of if / else statements it sounds like if this if block is reached, then the output should include the <span ref={ anchorRefFallback } so it'd be expected by this point that anchorRefFallback.current would most likely be truthy?

Given that the README says that the callback will be called with a reference to the popover anchor element, I think adding this extra check sounds consistent with the expectations of the component.

We might just want to double-check that the BlockPopover and ListViewDropIndicator components are working as expected — which is slightly tricky because they're already components that behave slightly awkwardly sometimes 😅

But overall, the logic of re-introducing this check sounds good to me.

usedRef = {
getBoundingClientRect() {
const rect = getAnchorRect();
const rect = getAnchorRect( anchorRefFallback.current );
return new window.DOMRect(
rect.x ?? rect.left,
rect.y ?? rect.top,
Expand Down