Skip to content

Add better cross-document support#1884

Closed
ciampo wants to merge 7 commits intofloating-ui:masterfrom
ciampo:feat/cross-document
Closed

Add better cross-document support#1884
ciampo wants to merge 7 commits intofloating-ui:masterfrom
ciampo:feat/cross-document

Conversation

@ciampo
Copy link
Copy Markdown

@ciampo ciampo commented Sep 13, 2022 •
edited
Loading

Closes #1869

What

This PR adds better support for cases where the reference and the floating elements are in two different documents — for example, if the reference is inside an iframe, while the floating element is rendered in the top-level document.

TODO:

  • make sure current approach doesn't introduce regressions (especially around clipping rect detection)
  • support scenarios:
    • reference inside iframe, floating in top document
    • reference in top document, floating inside iframe
    • reference and floating inside same iframe
    • nested iframes?
  • Add event listeners for the extra documents:
    • scroll
    • resize
    • mutation observer?
    • make sure it works when using the animationFrame autoupdate strategy
  • add tests
    • for each scenario highlighted above
    • for each placement
    • including arrow position
    • including shifting (with and without limiting)
    • including flipping
  • add documentation

How

In particular, this PR:

  • adds a new page to the Visual Playground
  • adds a new optional prop on the VirtualElement type — ownerDocument. This prop is necessary to implement checks for cross-document support.
  • improves the logic of the getRectRelativeToOffsetParent function in the dom package, taking into account (when needed) the offset of the reference's parent iframe

@rollingversions
Copy link
Copy Markdown

rollingversions bot commented Sep 13, 2022 •
edited
Loading

@floating-ui/core (1.0.1 → 1.1.0)

New Features

  • Add optional ownerDocument prop to the VirtualElement type

    This is needed in order to ensure better cross-document support

@floating-ui/dom (1.0.1 → 1.1.0)

New Features

  • Improve cross-document support

    Take into account any offsets from the frame elements when floating and reference are rendered in different documents

Packages With No Changes

The following packages have no user facing changes, so won't be released:

  • @floating-ui/react-dom
  • @floating-ui/react-dom-interactions
  • @floating-ui/react-native

Edit changelogs

Change log has not been updated since latest commit Update Changelog

@netlify
Copy link
Copy Markdown

netlify bot commented Sep 13, 2022 •
edited
Loading

✅ Deploy Preview for vibrant-gates-22c214 canceled.

Name Link
🔨 Latest commit 7d2f84d
🔍 Latest deploy log https://app.netlify.com/sites/vibrant-gates-22c214/deploys/63220010b5ba47000858bb8b

ciampo
ciampo commented Sep 13, 2022
View reviewed changes
packages/dom/test/visual/spec/CrossDocument.tsx
Comment on lines +63 to +68
useLayoutEffect(() => {
// Hack to force a re-render that also creates new values for
// `refs` and/or `update`, so that `useScroll` updates internally
// and scrolls the reference element into view.
setTimeout(() => setPlacement('bottom-start'));
}, []);
Copy link
Copy Markdown
Author

@ciampo ciampo Sep 13, 2022

Choose a reason for hiding this comment

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

This fix doesn't really seem to work for now. I'll need to find a better way to force floating-ui to update

This was referenced Sep 20, 2022
Closed
Merged
@atomiks
Copy link
Copy Markdown
Collaborator

atomiks commented Dec 17, 2022

I've made a PR here that seems to solve it — I haven't bothered with nested iframes but does that have any actual use case?

#2043

@atomiks atomiks closed this Dec 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[dom] Add better support for cross-document elements

2 participants

@ciampo @atomiks