fix: improve keyboard shortcut logic, fix #1846

Author: Akryum

packages/app-frontend/src/features/App.vue

@@ -96,6 +96,7 @@ export default defineComponent({
     :class="{
       'disconnected pointer-events-none': !isInitializing && !isConnected
     }"
+    tabindex="0"
   >
     <AppConnecting
       v-if="isInitializing"

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -4,7 +4,7 @@ import ComponentTreeNode from './ComponentTreeNode.vue'
 import SelectedComponentPane from './SelectedComponentPane.vue'
 
 import { onMounted, ref, provide, defineComponent } from '@vue/composition-api'
-import { onKeyDown, onKeyUp } from '@front/util/keyboard'
+import { onKeyDown } from '@front/util/keyboard'
 import { useComponentPick, useComponents, loadComponent } from './composable'
 
 export default defineComponent({
@@ -45,16 +45,17 @@ export default defineComponent({
       if (event.key === 'f' && event.altKey) {
         treeFilterInput.value.focus()
         return false
-      }
-    })
-
-    onKeyUp(event => {
-      if (event.key === 's' && !pickingComponent.value) {
+      } else if (event.key === 's' && event.altKey && !pickingComponent.value) {
         startPickingComponent()
+        return false
       } else if (event.key === 'Escape' && pickingComponent.value) {
         stopPickingComponent()
+        return false
+      } else if (event.key === 'r' && (event.ctrlKey || event.metaKey) && event.altKey) {
+        refresh()
+        return false
       }
-    })
+    }, true)
 
     // Refresh
 
@@ -183,7 +184,10 @@ export default defineComponent({
       />
 
       <VueButton
-        v-tooltip="'Force refresh'"
+        v-tooltip="{
+          content: $t('ComponentTree.refresh.tooltip'),
+          html: true
+        }"
         class="icon-button flat"
         icon-left="refresh"
         @click="refresh()"

packages/app-frontend/src/features/components/SelectedComponentPane.vue

@@ -37,7 +37,7 @@ export default defineComponent({
         stateFilterInput.value.focus()
         return false
       }
-    })
+    }, true)
 
     const sameApp = computed(() => selectedComponent.data.value?.id.split(':')[0] === selectedComponentId.value?.split(':')[0])
 

packages/app-frontend/src/locales/en.js

@@ -54,11 +54,14 @@ export default {
   },
   ComponentTree: {
     select: {
-      tooltip: '[[S]] Select component in the page',
+      tooltip: '[[{{keys.alt}}]] + [[S]] Select component in the page',
     },
     filter: {
       tooltip: '[[{{keys.alt}}]] + [[F]] Filter components by name',
     },
+    refresh: {
+      tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force refresh',
+    },
   },
   ComponentInstance: {
     consoleId: {

packages/app-frontend/src/util/keyboard.ts

@@ -2,11 +2,13 @@ import { onMounted, onUnmounted } from '@vue/composition-api'
 
 type KeyboardHandler = (event: KeyboardEvent) => boolean | void | Promise<boolean | void>
 
-function handleKeyboard (type: 'keyup' | 'keydown', cb: KeyboardHandler) {
+function handleKeyboard (type: 'keyup' | 'keydown', cb: KeyboardHandler, force: boolean) {
   function handler (event: KeyboardEvent) {
-    if (typeof HTMLElement !== 'undefined' && event.target instanceof HTMLElement && (
-      event.target.tagName === 'INPUT' ||
-      event.target.tagName === 'TEXTAREA'
+    if (!force && (
+      typeof HTMLElement !== 'undefined' && event.target instanceof HTMLElement && (
+        event.target.tagName === 'INPUT' ||
+        event.target.tagName === 'TEXTAREA'
+      )
     )) {
       return
     }
@@ -26,10 +28,10 @@ function handleKeyboard (type: 'keyup' | 'keydown', cb: KeyboardHandler) {
   })
 }
 
-export function onKeyUp (cb: KeyboardHandler) {
-  handleKeyboard('keyup', cb)
+export function onKeyUp (cb: KeyboardHandler, force = false) {
+  handleKeyboard('keyup', cb, force)
 }
 
-export function onKeyDown (cb: KeyboardHandler) {
-  handleKeyboard('keydown', cb)
+export function onKeyDown (cb: KeyboardHandler, force = false) {
+  handleKeyboard('keydown', cb, force)
 }