Skip to content

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

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 5 commits into from
Jul 5, 2022
Merged

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

Changes from 1 commit
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: 2 additions & 2 deletions packages/components/src/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,10 +272,10 @@ const Popover = (
return anchorRect;
},
};
} else if ( getAnchorRect ) {
} else if ( getAnchorRect && anchorRefFallback.current ) {
Copy link
Contributor Author

@ciampo ciampo Jun 30, 2022

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

@andrewserong andrewserong Jul 1, 2022

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