fix OptionsSelector select bug on mobile

center-for-threat-informed-defense · Jun 13, 2024 · a600618 · a600618
1 parent bfd69c0
commit a600618
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/tie-web-interface/src/components/Controls/Fields/OptionSelector.vue b/src/tie-web-interface/src/components/Controls/Fields/OptionSelector.vue
@@ -40,7 +40,7 @@ export default defineComponent({
       select: null as string | null,
       showMenu: false,
       searchTerm: "",
-      focusBox: markRaw(new RawFocusBox("pointerdown"))
+      focusBox: markRaw(new RawFocusBox("click"))
     }
   },
   computed: {
@@ -78,20 +78,22 @@ export default defineComponent({
      * Field focus in behavior.
      */
     onFocusIn() {
+      if (this.showMenu) {
+        return;
+      }
       // Open menu
       this.showMenu = true;
       // Reset select
       this.select = this.filteredOptions[0]?.value;
-      // Focus search
-      setTimeout(() => {
-        (this.$refs.search as any)?.focus();
-      }, 0);
     },
 
     /**
      * Field focus out behavior.
      */
     onFocusOut() {
+      if (!this.showMenu) {
+        return;
+      }
       // Close menu
       this.showMenu = false;
       // Clear search

diff --git a/src/tie-web-interface/src/components/Controls/Fields/OptionsList.vue b/src/tie-web-interface/src/components/Controls/Fields/OptionsList.vue
@@ -4,8 +4,8 @@
       <div class="options-scrollbox" ref="scrollbox" :style="style">
         <ul class="options" v-if="hasOptions">
           <li ref="items" v-for="option in options" :key="option.value ?? 'null'" :list-id="option.value"
-            :class="{ active: isActive(option) }" @pointerdown="$emit('select', option.value)"
-            @mouseenter="setActive(option)" exit-focus-box>
+            :class="{ active: isActive(option) }" @click="$emit('select', option.value)" @mouseenter="setActive(option)"
+            exit-focus-box>
             <span>{{ option.text }}</span>
           </li>
         </ul>