fix: disable swipe when input focused

Zephyruso · Feb 13, 2025 · 7236edc · 7236edc
1 parent 36d19a9
commit 7236edc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/components/common/TextInput.vue b/src/components/common/TextInput.vue
@@ -12,9 +12,6 @@
       :placeholder="placeholder || ''"
       :name="name || ''"
       :autocomplete="autocomplete || ''"
-      @touchstart.stop
-      @touchmove.stop
-      @touchend.stop
     />
     <XMarkIcon
       v-if="!beforeClose && clearable"

diff --git a/src/components/settings/SourceIPLabels.vue b/src/components/settings/SourceIPLabels.vue
@@ -21,7 +21,7 @@
             class="input input-sm input-bordered w-36 sm:w-64"
             :value="key"
             @input="(e) => handlerLabelKeyChange(e, id, 'key')"
-            @click="handlerIPInputFocus"
+            @click="(e) => handlerIPInputFocus(e, id)"
           />
           <ArrowRightCircleIcon class="h-4 w-4 shrink-0" />
           <input
@@ -43,7 +43,7 @@
       <TagIcon class="h-4 w-4 shrink-0" />
       <input
         class="input input-sm input-bordered w-36 sm:w-64"
-        v-model="newLabelForIP.ip"
+        v-model="newLabelForIP.key"
         @click="handlerIPInputFocus"
         placeholder="IP / eui64 / Regex"
       />
@@ -83,15 +83,17 @@ import Draggable from 'vuedraggable'
 
 const { showTip, destroyTip } = useTooltip()
 
-const handlerIPInputFocus = (e: Event) => {
+const handlerIPInputFocus = (e: Event, id?: string) => {
   const source = uniq(connections.value.map((conn) => conn.metadata.sourceIP))
     .filter(Boolean)
+    .filter((ip) => !sourceIPLabelList.value.find((item) => item.key === ip))
     .sort()
 
   if (!source.length) {
     return
   }
   const ipMenu = document.createElement('div')
+  const sourceItem = sourceIPLabelList.value.find((item) => item.id === id) || newLabelForIP
 
   for (const ip of source) {
     const ipItem = document.createElement('div')
@@ -100,7 +102,7 @@ const handlerIPInputFocus = (e: Event) => {
 
     ipItem.textContent = ip
     ipItem.addEventListener('click', () => {
-      newLabelForIP.ip = ip
+      sourceItem.key = ip
       destroyTip()
     })
     ipMenu.appendChild(ipItem)
@@ -115,22 +117,22 @@ const handlerIPInputFocus = (e: Event) => {
 }
 
 const newLabelForIP = reactive({
-  ip: '',
+  key: '',
   label: '',
 })
 
 const handlerLabelAdd = () => {
-  if (!newLabelForIP.ip || !newLabelForIP.label) {
+  if (!newLabelForIP.key || !newLabelForIP.label) {
     return
   }
 
   sourceIPLabelList.value.push({
-    key: newLabelForIP.ip,
+    key: newLabelForIP.key,
     label: newLabelForIP.label,
     id: uuid(),
   })
 
-  newLabelForIP.ip = ''
+  newLabelForIP.key = ''
   newLabelForIP.label = ''
 }
 

diff --git a/src/components/settings/ZashboardSettings.vue b/src/components/settings/ZashboardSettings.vue
@@ -84,9 +84,6 @@
           <div
             class="flex items-center gap-2"
             v-if="customBackgroundURL"
-            @touchstart.stop
-            @touchmove.stop
-            @touchend.stop
           >
             {{ $t('transparent') }}
             <input

diff --git a/src/composables/swipe.ts b/src/composables/swipe.ts
@@ -87,9 +87,15 @@ export const useSwipeRouter = () => {
     ]?.[1]?.()
   }
 
+  const isInputActive = () => {
+    const activeEl = document.activeElement
+    return activeEl && (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA')
+  }
+
   watch(direction, () => {
     if (
       document.querySelector('dialog:modal') ||
+      isInputActive() ||
       window.getSelection()?.toString()?.length ||
       disableSwipe.value
     )