How does Discourse detect/infer virtual keyboards?

I have a non-Discourse related project in which I’d really like to be able to detect whether a mobile browser’s virtual keyboard is active or not. I just realised, after days of thinking and looking for solutions, that the Discourse forum I visit every day has a really smooth interface for mobile virtual keyboards. It’s great how reliably it detects the keyboard and changes the reply box to fill the remaining space, only to switch back to normal mode if you close the keyboard.

I haven’t found any other easy solutions for detecting the virtual keyboard (most of Stack Overflow just says not to try), but whatever Discourse does seems to work well. The codebase is large and complex though, and I don’t know where to look in it for the relevant code. So I was hoping someone who’s familiar with Discourse’s mobile interface would be able to either point me to the code, or could give an explanation of what heuristics Discourse uses?

2 Likes

We use the visual viewport API: Visual Viewport API - Web APIs | MDN.

You can search the JS files in our repo code for visualViewport. There are some quirks in iOS due to the placement of the composer, so we use some more complex overrides there, the relevant file is app/assets/javascripts/discourse/app/lib/safari-hacks.js.

5 Likes

Thank you for those pointers!

2 Likes