Dropdown items are not selectable on mobile devices when rendering to a portal element

[aliceHendicott]

• downshift version: v9.0.4
• node version: 20.12
• npm (or yarn) version: yarn v1.22.19

What you did:

We have a use case where we are rendering the dropdown of our Select in a React portal. If we render the portal into document.body this works fine. However, we need to provide the option to render the portal to any user specified node id which may or may not exist. If it doesn't exist we create a div with the given id under document.body.

What happened:

When doing this, the dropdown options aren't selectable on mobile devices and a TriggerButtonBlur event is dispatched by Downshift.

Reproduction repository:

I've set up a recreation of this in CodeSandbox here.

To reproduce:

• Open preview of app in new tab
• Open dev tools and switch to responsive mode
• Try to select an item
• The dropdown will close without selecting the item

Screen.Recording.2024-05-06.at.11.55.45.AM.mov

Problem description:

Items are not selectable on mobile devices if the dropdown is not rendered until a certain condition is met (in this case until the Portal node has been created). The problem here lies in the useMouseAndTouchTracker hook where the downshiftElementRefs are excluded from the useEffect dependency array since "refs don't change".

Suggested solution:

The ideal solution here would be adding downshiftElementRefs to the dependency array but hoping to understand the original reason behind excluding this. Happy to raise a PR for this change.

If this exclusion is desired, are there any suggestions for how this use case could be resolved?

[joker-777]

This feature would be very helpful!

[iCrawl]

Having a local patch right now, I can confirm adding downshiftElementRefs to the useEffect on the line mentioned fixes Portal usage 👍