Can't use within iframe

[NerdCowboy]

I'm using React Frame component to wrap my entire app in an iframe as I'm building a widget.

I'm getting the following errors when I try to use Tippy
index.js:159 Uncaught TypeError: instance.set is not a function
index.js:148 Uncaught TypeError: instance.destroy is not a function
index.js:1437 The above error occurred in the <Tippy> component: in Tippy (created by ForwardRef(TippyWrapper)) in ForwardRef(TippyWrapper) (at ItemDetail/index.js:84)…

I assumed the issue was that Tippy was trying to inject itself to the document body instead of the iframe's document body, so I used React Frame's context consumer and passed its document to my component and added it to appendTo.

<FrameContextConsumer>
  {
  ({ document, window }) => {  
    return (
      <Tippy appendTo={document.body} content="Text" >
        <button>Button</button>
      </Tippy>
    )
  }}
</FrameContextConsumer>
)

I tried console.logging the instance in the onCreate prop and it just returned an empty array, so that'd explain why there's no methods on instance

Digging into Tippy's code, it appears the creation of the Tippy div is hardcoded to the main document

export function ssrSafeCreateDiv() {
  return isBrowser && document.createElement('div')
}

Is there something I'm missing to allow usage within an iframe? Or am I correct that ssrSafeCreateDiv would need to be refactored to allow passing in a different document?

[Nantris]

I'm seeing this randomly in an Electron environment, but pretty frequently. I recently updated from 2.2.0 to 2.2.3. and from react@16.8.6 to react@16.9.0.

@NerdCowboy can you change the title to reflect that the issue affects more than just iframes.

@atomiks this is created 50 errors per second or more and freezes the process completely usually. Any thoughts?

Looks like I had a typo that caused a nesting of Tippy's in a way I hadn't intended.

[atomiks]

I tried console.logging the instance in the onCreate prop and it just returned an empty array, so that'd explain why there's no methods on instance

Means an invalid targets argument (the button ref was not defined) was being passed to tippy() core which seems odd

[atomiks]

Found the issue in tippy core:

value instanceof Element (value === <button> node) this is returning false.

So somehow the button node within the frame's context is not an instanceof Element

---

To make it work we need a different technique (weird how this issue has never come up before. I'm guessing it happens only when the tippy script is in a different document, since CodePen/Sandbox work fine in the frames)

This fixes it:

function isElement(value) {
  return isType(value, 'Element');
}

function isNodeList(value) {
  return isType(value, 'NodeList');
}

function isType(value, type) {
  const str = {}.toString.call(value);
  return str.indexOf('[object') === 0 && str.indexOf(`${type}]`) > -1;
}

---

That said this also opens up a host of other issues surrounding tippy's hardcoded use of document, such as the hideOnClick listeners. I'm pretty sure Popper handles all of this elegantly so I'll dive into its code to ensure tippy works better here.

[atomiks]

Run:

npm i @tippy.js/react@latest

iframes should be supported now

[NerdCowboy]

Awesome! 🎉 Got temporarily pulled onto a different project, but I'll try to check it out sometime this week. Thanks @atomiks!