-
Notifications
You must be signed in to change notification settings - Fork 11
feat(core): introduce getEnvironmentProps
for mobile experience
#27
Conversation
I think if you focus something else with the keyboard (tab) it should close the pop-up. Does that happen? |
@Haroenv It didn't close the menu on Edit: It didn't in |
In production, isn't pressing |
@eunjae-lee I think allowing |
ff6def0
to
3a789f3
Compare
This PR has been reworked and the feature relies on two events:
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, the code makes sense. You can merge this. I will just give it a test on your mobiles :)
@eunjae-lee FYI you can already try it on the deployment. |
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 iswindow
).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 thetouchmove
event, we cannot rely on theblur
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