From 29d9eb85ac9b5d605c750409075b5c2eb821d060 Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Thu, 3 Oct 2024 16:23:52 +0100
Subject: [PATCH] CU-86961hrm5: Fix bubbling up of keydown events when typing
 numbers into concept picker

---
 .../src/components/common/ConceptPicker.vue   | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/webapp/frontend/src/components/common/ConceptPicker.vue b/webapp/frontend/src/components/common/ConceptPicker.vue
index 289f2eaa..5a6c619e 100644
--- a/webapp/frontend/src/components/common/ConceptPicker.vue
+++ b/webapp/frontend/src/components/common/ConceptPicker.vue
@@ -1,24 +1,26 @@
 <template>
-  <v-select v-model="selectedCUI" @search="searchCUI"
-            :inputId="'searchBox'"
-            :clearSearchOnSelect="true"
-            :filterable="false"
-            :appendToBody="true"
-            :options="searchResults"
-            :loading="loadingResults"
-            label="cui"
-            @open="$emit('picker:opened')"
-            @close="$emit('picker:closed')">
-    <template v-slot:no-options="{ search, searching }">
-      <template v-if="searching">No results found for <em>{{ search }}</em>.
+  <div @keydown.stop>
+    <v-select v-model="selectedCUI" @search="searchCUI"
+              :inputId="'searchBox'"
+              :clearSearchOnSelect="true"
+              :filterable="false"
+              :appendToBody="true"
+              :options="searchResults"
+              :loading="loadingResults"
+              label="cui"
+              @open="$emit('picker:opened')"
+              @close="$emit('picker:closed')">
+      <template v-slot:no-options="{ search, searching }">
+        <template v-if="searching">No results found for <em>{{ search }}</em>.
+        </template>
+        <em v-else style="opacity: 0.5">Start typing to search for a concept.</em>
       </template>
-      <em v-else style="opacity: 0.5">Start typing to search for a concept.</em>
-    </template>
-    <template v-slot:option="option">
-      <span class="select-option">{{option.name}}</span>
-      <span class="select-option-cui"> - {{option.cui}}</span>
-    </template>
-  </v-select>
+      <template v-slot:option="option">
+        <span class="select-option">{{option.name}}</span>
+        <span class="select-option-cui"> - {{option.cui}}</span>
+      </template>
+    </v-select>
+  </div>
 </template>
 
 <script>