Rendering in iframe - clicks don't register

[paul-veevers]

What you did:

Rendering downshift inside a different window/document to where the Javascript is running - e.g. inside an iframe.

What happened:

Clicks on items don't register.

Reproduction repository:

https://codesandbox.io/s/x2ynm9mojw

Problem description:

It's due to window.addEventListener('mousedown' and window.addEventListener('mouseup' in componentDidMount. Referencing the "correct" window (the one the component is in) solves the problem.

This may sound like a crazy use case, but it's quite common for 3rd party widgets, etc. I haven't tested but I assume the same is happening in a shadow dom.

Suggested solution:

Accept a prop called context or similar that defaults to window. I don't think it's possible to automatically get the parent window of a component?

As a note, there's also a reference to document in getItemNodeFromIndex, which will also need to be changed.

Happy to do a PR if that will help :)

[kentcdodds]

Hi @paul-veevers!

Yeah, I'd be fine with your suggestion solution! Might even help push #185 along :)

[paul-veevers]

See #204

[Rendez]

I have the impression that this bug still exists within ShadowDOM. Can someone confirm this?

[kentcdodds]

@Rendez, if you could provide a reproduction in codesandbox that would be great. If you're able to do that, then please file a new issue.