QMAPS-1926 Allow scroll in suggest on iOS #1083
Conversation
|
Little update.
Actually, this also fixes a long standing bug on small non-iOS devices, where the last items of the result lists couldn't be reached, hidden by the keyboard.
|
bbecquet
force-pushed
the
QMAPS-1926-iphone-suggest-scroll
branch
from
5c84891
to
000d4d9
Compare
|
Ok, since #1083 (comment) the React TopBar conversion has been merged, and I've updated this PR with a proposed final implementation based on it. |
| @@ -101,6 +102,31 @@ const Suggest = ({ | |||
| } | |||
| }; | |||
|
|
|||
| useEffect(() => { | |||
| if (isMobile && dropdownVisible && window.visualViewport) { | |||
There was a problem hiding this comment.
Note that window.visualViewport is not available by default on Firefox for desktop, including in the responsive view.
(the flag dom.visualviewport.enabled can be enabled via "about:config").
So it could make testing a bit confusing, especially for a newcomer. Do you think it could be documented somewhere?
There was a problem hiding this comment.
Good idea, I've added a link to the API doc.
| outputNode.removeEventListener('touchmove', cancelTouchScrollIfNotOverflow); | ||
| }; | ||
| } | ||
| }, [isMobile, items, dropdownVisible, outputNode]); |
There was a problem hiding this comment.
Maybe this effect could also listen to the visualViewport resize event, to adapt the element height after the keyboard is closed.
This is quite minor though.
There was a problem hiding this comment.
I've added it, as it was less difficult than what I thought at first.
Let's hope I didn't break anything else :P
| @@ -36,6 +36,8 @@ | |||
| position: fixed; | |||
| top: 64px; | |||
| width: 100vw; | |||
| background-color: $background; | |||
| overflow-y: scroll; | |||
There was a problem hiding this comment.
Out of curiosity, why is this explicit "scroll" required, instead of "auto" ?
There was a problem hiding this comment.
You're right it's not, I guess I got heavy-handed while battling with Safari :) I'll put auto instead.
Description
Make it possible to scroll suggest results on iOS.
Previously, the whole page content scrolled. This was due to the virtual keyboard on iOS browsers not changing the viewport height. As a result, the list of suggestions fit entirely on the screen height (even if half of it was behind the keyboard) so it wasn't scrollable.
Here, we use a recent web API, Visual Viewport, which is supported in Safari 13+ and gives access to the real visible height, without the space taken by the keyboard. We use it to give a fixed height to the suggest list, so it becomes scrollable.
We also have to manage the case of an empty list or a list too small to be scrollable. In that case, the dropdown background element will scroll the page like before. So there is a special test for that to detect if the suggestions overflow their container or not. If not, we simply cancel any
touchmoveaction.