How does Discourse detect/infer virtual keyboards?

Development

AI-generated summary

Detecting Mobile Virtual Keyboards in Discourse

@Dannii is seeking a solution to detect mobile browser virtual keyboards for a non-Discourse project, and noticed Discourse’s smooth interface for handling this. @pmusaraj shared that Discourse uses the Visual Viewport API to detect virtual keyboards. The relevant code can be found by searching for visualViewport in the JavaScript files of the Discourse repository. Additional iOS-specific overrides are located in the safari-hacks.js file.

1

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

We use the visual viewport API: VisualViewport - 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.

3

Thank you for those pointers!