Skip to content

getOverflowAncestors: traverse into iframe parent#2535

Merged
atomiks merged 4 commits intofloating-ui:masterfrom
jsnajdr:fix/overflow-ancestors-iframe
Sep 11, 2023
Merged

getOverflowAncestors: traverse into iframe parent#2535
atomiks merged 4 commits intofloating-ui:masterfrom
jsnajdr:fix/overflow-ancestors-iframe

Conversation

@jsnajdr
Copy link
Copy Markdown
Contributor

@jsnajdr jsnajdr commented Sep 8, 2023

Fixes #2518.

When getOverflowAncestors reaches the window object, it checks whether there is window.frameElement and continues traversing up into the iframe's parent.

TODO before this is shippable:

  • add tests
  • verify usage in getClippingElementAncestors. Do we also want to traverse into iframe's parent there?

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Sep 8, 2023

🦋 Changeset detected

Latest commit: 61ac08d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link
Copy Markdown

netlify bot commented Sep 8, 2023

Deploy Preview for vibrant-gates-22c214 canceled.

Name Link
🔨 Latest commit 61ac08d
🔍 Latest deploy log https://app.netlify.com/sites/vibrant-gates-22c214/deploys/64fd505e16c87900080bb5bb

win.visualViewport || [],
isOverflowElement(scrollableAncestor) ? scrollableAncestor : []
isOverflowElement(scrollableAncestor) ? scrollableAncestor : [],
win.frameElement ? getOverflowAncestors(win.frameElement) : [],
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This could use a unit test - there is already an existing test suite for getOverflowAncestors().

We might need to configure loading of subresources because jsdom by default won't load any subresources like iframes, and for an element inside the iframe, node.ownerDocument.defaultView will be equal to the parent window object.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I added a unit test. Working with iframes in JSDOM turned out to be fine. I don't load any document, just add elements to iframe.contentDocument. And the two Window objects are distinct.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice, great to hear that it wasn't a problem 👍

Copy link
Copy Markdown

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

This looks great to me 👍 🚀

Looking forward to getting this landed so we can remove the extra custom listeners in #54286


document.body.append(scroll);
scroll.append(iframe);
iframe.contentDocument!.body.append(test);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

We may need a no-non-null-assertion ignore here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

iframe.contentDocument can be null, but by appending the element into the document.body structure, we are "attaching" it and it gets loaded. Then contentDocument and contentWindow get a reliable non-null value. But this certaintly can't be expressed in types.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This looks good, but to prevent warnings appearing here, can you appease the checker?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Warning fixed 👍

win.visualViewport || [],
isOverflowElement(scrollableAncestor) ? scrollableAncestor : []
isOverflowElement(scrollableAncestor) ? scrollableAncestor : [],
win.frameElement ? getOverflowAncestors(win.frameElement) : [],
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice, great to hear that it wasn't a problem 👍

]);
});

test('returns overflow ancestors in iframe parents', () => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Thanks for adding the test 🙌

@atomiks atomiks merged commit 3426bc2 into floating-ui:master Sep 11, 2023
@jsnajdr jsnajdr deleted the fix/overflow-ancestors-iframe branch September 11, 2023 06:36
@jsnajdr
Copy link
Copy Markdown
Contributor Author

jsnajdr commented Sep 11, 2023

Thanks @atomiks for merging the patch so quickly 👍 There might be, however, something wrong with the release. The getOverflowAncestors function is part of the @floating-ui/utils package, but only the @floating-ui/dom got released.

@atomiks
Copy link
Copy Markdown
Collaborator

atomiks commented Sep 11, 2023

oh 🤦 I forgot that function was moved out into the utils package, only utils needed to be released. I'll fix it in a second.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

getOverflowAncestors should traverse through parent iframes

3 participants