Skip to content

Commit

Permalink
Popover: Fix issue with undefined getBoundingClientRect (#27445)
Browse files Browse the repository at this point in the history
Fix an issue where the `Popover` component throws a runtime `TypeError: Cannot read property 'getBoundingClientRect' of undefined.`

This may happen in WordPress if a Popover is rendered in an iframe. It's been observed by rendering a `BlockList` component containing `RichText` in an iframe 😵

The issue is that `instanceof` checks fail across iframe boundaries, where `anchorRef instanceof window.Element` fails because `anchorRef` when it _is_ an instance of Element in the frame but not `window.Element`.

Instead of `instanceof` checks that fail across iframe boundaries, check for expected methods as the predicate.
  • Loading branch information
sirreal authored Dec 3, 2020
1 parent 9e7139a commit bff5eac
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions packages/components/src/popover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,17 @@ function computeAnchorRect(
return;
}

if ( anchorRef instanceof window.Range ) {
// Duck-type to check if `anchorRef` is an instance of Range
// `anchorRef instanceof window.Range` checks will break across document boundaries
// such as in an iframe
if ( typeof anchorRef?.cloneRange === 'function' ) {
return getRectangleFromRange( anchorRef );
}

if ( anchorRef instanceof window.Element ) {
// Duck-type to check if `anchorRef` is an instance of Element
// `anchorRef instanceof window.Element` checks will break across document boundaries
// such as in an iframe
if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
const rect = anchorRef.getBoundingClientRect();

if ( shouldAnchorIncludePadding ) {
Expand Down

0 comments on commit bff5eac

Please sign in to comment.