Fix textarea focus for touchscreens with keyboard (#30)

* check if touchscreen has mouse.

* add inputMode to props.

* fix formatting.

src/component/main.vue

@@ -36,6 +36,7 @@
         :implicitControl="state.settings.implicit_hosting && session.profile.can_host"
         :inactiveCursors="state.settings.inactive_cursors && session.profile.sends_inactive_cursor"
         :fps="fps"
+        :hasMobileKeyboard="is_touch_device"
         @updateKeyboardModifiers="updateKeyboardModifiers($event)"
         @uploadDrop="uploadDrop($event)"
         @mobileKeyboardOpen="state.mobile_keyboard_open = $event"
@@ -138,6 +139,10 @@
     @Prop({ type: Number, default: 0 })
     private readonly fps!: number
 
+    // auto / touch / mouse
+    @Prop({ type: String, default: 'auto' })
+    private readonly inputMode!: String
+
     /////////////////////////////
     // Public state
     /////////////////////////////
@@ -236,6 +241,20 @@
       return this.state.settings.private_mode && !this.is_admin
     }
 
+    public get is_touch_device() {
+      if (this.inputMode == 'mouse') return false
+      if (this.inputMode == 'touch') return true
+
+      return (
+        // check if the device has a touch screen
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
+        // we also check if the device has a pointer
+        !matchMedia('(pointer:fine)').matches &&
+        // and is capable of hover, then it probably has a mouse
+        !matchMedia('(hover:hover)').matches
+      )
+    }
+
     @Watch('private_mode_enabled')
     private setWebRTCPaused(paused: boolean) {
       this.connection.webrtc.paused = paused

src/component/overlay.vue

@@ -112,6 +112,9 @@
     @Prop()
     private readonly fps!: number
 
+    @Prop()
+    private readonly hasMobileKeyboard!: boolean
+
     get cursor(): string {
       if (!this.isControling || !this.cursorImage) {
         return 'default'
@@ -121,10 +124,6 @@
       return 'url(' + uri + ') ' + x + ' ' + y + ', default'
     }
 
-    get isTouchDevice(): boolean {
-      return 'ontouchstart' in window || navigator.maxTouchPoints > 0
-    }
-
     mounted() {
       // register mouseup globally as user can release mouse button outside of overlay
       window.addEventListener('mouseup', this.onMouseUp, true)
@@ -386,7 +385,7 @@
 
     onMouseEnter(e: MouseEvent) {
       // focus opens the keyboard on mobile (only for android)
-      if (!this.isTouchDevice) {
+      if (!this.hasMobileKeyboard) {
         this._textarea.focus()
       }
 
@@ -678,7 +677,7 @@
 
     public mobileKeyboardShow() {
       // skip if not a touch device
-      if (!this.isTouchDevice) return
+      if (!this.hasMobileKeyboard) return
 
       this.kbdShow = true
       this.kbdOpen = false
@@ -690,7 +689,7 @@
 
     public mobileKeyboardHide() {
       // skip if not a touch device
-      if (!this.isTouchDevice) return
+      if (!this.hasMobileKeyboard) return
 
       this.kbdShow = false
       this.kbdOpen = false