fix: mobile enter button issues

kurozenzen · Apr 24, 2023 · e90df3f · e90df3f
1 parent 0fa1d9c
commit e90df3f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/lib/common/onEnterOrSpace.js b/src/lib/common/onEnterOrSpace.js
@@ -1,12 +1,19 @@
 /**
  * @param {(event: KeyboardEvent) => void} handler
+ * @returns {(event: KeyboardEvent) => void}
  */
-export default function (handler) {
+export default (handler) => {
   return (event) => {
-    if (event.code === 'Space' || event.code === 'Enter') {
+    if (isEnter(event) || isSpace(event)) {
       event.preventDefault()
       event.stopPropagation()
       handler(event)
     }
   }
 }
+
+/** @param {KeyboardEvent} event */
+export const isSpace = (event) => event.code === 'Space'
+
+/** @param {KeyboardEvent} event */
+export const isEnter = (event) => event.code === 'Enter' || event.key === 'Enter' // for mobile enter button
diff --git a/src/lib/tag-input/TagInput.svelte b/src/lib/tag-input/TagInput.svelte
@@ -3,12 +3,11 @@
   import ModifierSelect from '../modifier/ModifierSelect.svelte'
   import LoadingAnimation from '../common/LoadingAnimation.svelte'
   import currentPage from '../navigation/currentPage'
-  import onEnterOrSpace from '../common/onEnterOrSpace'
+  import onEnterOrSpace, { isEnter } from '../common/onEnterOrSpace'
   import { getTagSuggestions } from '../../api-client/ApiClient'
   import userdata from '../account/userdata'
   import { Tag, toActiveTag } from '../../types/tags/Tag'
   import TagSuggestion from './TagSuggestion.svelte'
-  import { prevent_default } from 'svelte/internal'
 
   /**
    * @typedef {import("../../types/tags/Tag").Tag} Tag
@@ -31,11 +30,13 @@
 
   $: {
     tags = []
+    selectedIndex = 0
     if (searchTerm !== '') {
       searchPromise = getSuggestions(searchTerm)
     }
   }
 
+  /** @param {Tag} tag */
   const pick = (tag) => () => {
     dispatch('pick', toActiveTag(tag, modifier))
     resetInput()
@@ -80,20 +81,12 @@
       }
     }}
     on:keyup={(event) => {
-      switch (event.code) {
-        case 'Enter':
-          pick(tags.length > selectedIndex ? tags[selectedIndex] : new Tag(searchTerm, 0, 'ambiguous'))()
-          break
-        case 'ArrowUp':
-          if (tags.length > 0) {
-            selectedIndex = (selectedIndex + tags.length - 1) % tags.length
-          }
-          break
-        case 'ArrowDown':
-          if (tags.length > 0) {
-            selectedIndex = (selectedIndex + 1) % tags.length
-          }
-          break
+      if (isEnter(event)) {
+        pick(tags.length > selectedIndex ? tags[selectedIndex] : new Tag(searchTerm, 0, 'ambiguous'))()
+      } else if (event.code === 'ArrowUp' && tags.length > 0) {
+        selectedIndex = (selectedIndex + tags.length - 1) % tags.length
+      } else if (event.code === 'ArrowDown' && tags.length > 0) {
+        selectedIndex = (selectedIndex + 1) % tags.length
       }
     }}
   />