Merge pull request #9974 from owncloud/remove-keycode-dep

refactor: remove keyCode dependency

package.json

@@ -34,7 +34,6 @@
     "@vue/compiler-dom": "3.3.4",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/runtime-dom": "3.3.4",
-    "keycode": "^2.2.1",
     "rollup-plugin-gzip": "^3.1.0",
     "vite-plugin-static-copy": "^0.16.0",
     "vite-plugin-treat-umd-as-commonjs": "0.1.3",
@@ -160,8 +159,7 @@
     },
     "patchedDependencies": {
       "@adobe/[email protected]": "patches/@[email protected]",
-      "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]"
     }
   },
   "jestSerializer": {

packages/design-system/src/directives/OcTooltip.ts

@@ -7,7 +7,7 @@ export const hideOnEsc = {
   defaultValue: true,
   fn({ hide }) {
     const onKeyDown = (e) => {
-      if (e.keyCode === 27) {
+      if (e.code === 'Escape') {
         hide()
       }
     }

packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue

@@ -6,7 +6,7 @@
     :disabled="readonly"
     :options="availableTags"
     taggable
-    :select-on-key-codes="[keycode('enter'), keycode(',')]"
+    :select-on-key-codes="selectOnKeyCodes"
     :create-option="createOption"
     :selectable="isOptionSelectable"
     :map-keydown="keydownMethods"
@@ -79,7 +79,6 @@ import {
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
 import diff from 'lodash-es/difference'
-import keycode from 'keycode'
 import { Resource } from '@ownclouders/web-client'
 
 type TagOption = {
@@ -90,6 +89,13 @@ type TagOption = {
 
 const tagsMaxCount = 100
 
+// the keycode property is deprecated in the JS event API, vue-select still works with it though
+enum KeyCode {
+  Backspace = 8,
+  Enter = 13,
+  ',' = 188
+}
+
 export default defineComponent({
   name: 'TagsSelect',
   props: {
@@ -232,7 +238,7 @@ export default defineComponent({
       const objectMapping = {
         ...map
       }
-      objectMapping[keycode('backspace')] = async (e) => {
+      objectMapping[KeyCode.Backspace] = async (e) => {
         if (e.target.value || selectedTags.value.length === 0) {
           return
         }
@@ -275,7 +281,7 @@ export default defineComponent({
       isOptionSelectable,
       showSelectNewLabel,
       save,
-      keycode,
+      selectOnKeyCodes: [KeyCode.Enter, KeyCode[',']],
       keydownMethods,
       readonly,
       getAdditionalAttributes,

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -322,9 +322,9 @@ export default defineComponent({
         return
       }
 
-      const { keyCode } = event
-      const isArrowUp = keyCode === 38
-      const isArrowDown = keyCode === 40
+      const { code } = event
+      const isArrowUp = code === 'ArrowUp'
+      const isArrowDown = code === 'ArrowDown'
 
       // to cycle through the list of roles only up and down keyboard events are allowed
       // if this is not the case we can return early and stop the script execution from here