viewer: removing a tag from the filters opens the keyboard on mobile

GitHub: Resolves #93

1 files changed, 8 insertions, 0 deletions

diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index d9d932f..34d96bd 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -30,6 +30,7 @@
     size="is-medium"
     class="paneltag-input"
     @typing="searchTags"
+    @click.capture.native="onClick"
   >
     <template slot-scope="props">{{displayOption(props.option)}}</template>
     <template slot="empty">{{$t('tagInput.nomatch')}}</template>
@@ -58,6 +59,13 @@ export default class LdTagInput extends Vue {
       .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag))
       .sort((a, b) => b.items.length - a.items.length);
   }
+
+  // Prevents the keyboard from opening on mobile when removing a tag
+  onClick(e: MouseEvent) {
+    const target = e.target;
+    if (target instanceof HTMLAnchorElement)
+      target.addEventListener("click", e => e.stopPropagation());
+  }
 }
 </script>