Downshift: Menu doesn't close onTapOutside on mobile

[adrienharnay]

• downshift version: 1.31.2
• node version: 8.11.1
• npm (or yarn) version: yarn 1.5.0

Relevant code or config

https://codesandbox.io/s/9rWEmzEv8 (downshift demo by @kentcdodds)

What you did/What happened:

On desktop:

• click on the button
• the menu opens
• click outside the select
• the menu closes

On mobile:

• tap on the button
• the menu opens
• tap outside the select
• the menu stays open

Reproduction repository:

https://codesandbox.io/s/9rWEmzEv8

Problem description:

I'm not sure this is intended? Or is it, to prevent fat fingering?

Suggested solution:

Close the menu onTapOutside if that is what we want

Thanks for this awesome package!

[aMollusk]

It looks like this occurs on iOS. It's due to the blur event not being triggered when you tap outside of the menu. Problem is that I have a feeling this is how focus events are intended to work on iOS.

The only solution I can think of is is to add a touchstart listener to check if the dropdown has been unfocused.

[kentcdodds]

This was actually resolved and released: https://github.com/paypal/downshift/pull/425

I forgot to close it.

[aMollusk]

Hey @kentcdodds. I think this is a separate issue to the one I resolved in that PR.

[kentcdodds]

Oh, you're right. Sorry about that 😅

[kentcdodds]

The only solution I can think of is is to add a touchstart listener to check if the dropdown has been unfocused.

I'd be happy to look at a PR for this. Thanks!

[adrienharnay]

Alrght I will take a look when I have some time!

[aMollusk]

@kentcdodds This can be closed now 😁. Resolved in #429

[adrienharnay]

Just upgraded and tested, works like a charm :+1: Thanks a lot!