Selection via mouse click does not work when menu is inside a portal

• downshift version: 1.3.0
• node version:
• npm (or yarn) version:

What you did:

Trying to implement simple select component using Downshift. The requirement for my select is that menu is inside a portal. I’m using react-portal npm package that leverages React’s native createPortal() API.

What happened:

After I’ve put menu inside portal, selection via mouse stopped working. Menu is being closed as always, but selection does not happen.

Reproduction repository:

Here’s a sandbox: https://codesandbox.io/s/w7p91ol19k You can try selecting one of menu items. The onChange is not happening, the state is not changed. Try removing Portal element. Without portal everything works as expected.

I believe, there is something to do with mousedown and blur event handlers. I have found that there are native event listeners for mousedown and mouseup events. They are preventing the selection of item due to calling reset prior to that.

[kentcdodds]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[kentcdodds]

Thanks for the report! We could probably add a feature for the upcoming getMenuProps function (see the pull requests) which would apply a ref so we can check that as well as the root ref… Unless someone else has another idea.