feat(core): introduce getEnvironmentProps for mobile experience

[francoischalifour]

This PR adds capabilities to replicate "native behaviors" when using an autocomplete experience on mobile.

Inspiration

This is the wanted behavior as seen on the native Twitter app:

You can notice that the virtual keyboard hides as soon as you scroll, leaving you more space to discover the results.

API

The core library now exports another prop getter: getEnvironmentProps (reminder: the default environment is window).

This function returns two event handlers that are attached in the renderers:

onTouchMove

In native mobile apps, the virtual keyboard pops up when the input is focused, but closes as soon as you start scrolling the results list.

On touch devices, this function blurs the input if the dropdown is open. This function is mapped to the native touchstart event so it's a noop for non-touch devices.

onTouchStart

Since we now trigger the blur event on the touchmove event, we cannot rely on the blur event to close the menu.

We now need to attach a touchstart listener to the environment that closes the menu if the clicked target is not an Autocomplete element.

The dropdown is closed when you interact with an element outside of the autocomplete container.

Preview

[Haroenv]

I think if you focus something else with the keyboard (tab) it should close the pop-up. Does that happen?

[francoischalifour]

@Haroenv It didn't close the menu on Tab before this PR, and it still doesn't. We can investigate later if we want to do that.

Edit: It didn't in __DEV__, but it did in production. We can keep listening to the blur event except on touch devices to reproduce this behavior.

[eunjae-lee]

Edit: It didn't in DEV, but it did in production.

In production, isn't pressing tab key supposed to traverse the suggestions? It focuses 'delete' button and closes the menu. Should we only allow arrow keys or also tab and shift + tab to traverse the suggestions?

[francoischalifour]

@eunjae-lee I think allowing Tab for traversing the suggestions is actually an accessibility issue. We need to do some proper research but most solutions only allow arrow navigation.

[francoischalifour]

This PR has been reworked and the feature relies on two events:

• touchstart
• touchmove

I explained why in the comments, let me know if something remains unclear.

I've got an iPad and an Amazon Fire tablets on my desk if you want to try the new experience on touch devices.

[eunjae-lee]

Yeah, the code makes sense. You can merge this. I will just give it a test on your mobiles :)

[francoischalifour]

@eunjae-lee FYI you can already try it on the deployment.