use v-model for dropdown search input

1 files changed, 10 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index aa46e47e84a..17afd2cbdae 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -3,29 +3,31 @@ import { __ } from '~/locale';
 
 export default {
   props: {
-    searchQuery: {
-      type: String,
-      required: false,
-      default: '',
-    },
     placeholderText: {
       type: String,
       required: true,
       default: __('Search'),
     },
   },
+  data() {
+    return { searchQuery: this.value };
+  },
+  watch: {
+    searchQuery(query) {
+      this.$emit('input', query);
+    },
+  },
 };
 </script>
 
 <template>
   <div class="dropdown-input">
     <input
-      autocomplete="off"
       class="dropdown-input-field"
       type="search"
+      v-model="searchQuery"
       :placeholder="placeholderText"
-      :searchQuery="searchQuery"
-      @input="$emit('input', $event.target.value)"
+      autocomplete="off"
     />
     <i
       aria-hidden="true"