Hacky way to show on-screen keyboard

Doesn't work some of the time.

src/components/compose-button.jsx

@@ -1,6 +1,7 @@
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import openCompose from '../utils/open-compose';
+import openOSK from '../utils/open-osk';
 import states from '../utils/states';
 
 import Icon from './icon';
@@ -14,6 +15,7 @@ export default function ComposeButton() {
         states.showCompose = true;
       }
     } else {
+      openOSK();
       states.showCompose = true;
     }
   }

src/utils/open-osk.jsx

@@ -0,0 +1,16 @@
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); // https://stackoverflow.com/a/23522755
+
+export default function openOSK() {
+  if (isSafari) {
+    const fauxEl = document.createElement('input');
+    fauxEl.style.position = 'absolute';
+    fauxEl.style.top = '0';
+    fauxEl.style.left = '0';
+    fauxEl.style.opacity = '0';
+    document.body.appendChild(fauxEl);
+    fauxEl.focus();
+    setTimeout(() => {
+      document.body.removeChild(fauxEl);
+    }, 500);
+  }
+}