1 files changed, 4 insertions, 18 deletions
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
index 8042e8c7bc9..b0972246e70 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -1,16 +1,15 @@
 <script>
+import { GlSearchBoxByType } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
-import eventHub from '../event_hub';
-import frequentItemsMixin from './frequent_items_mixin';
 import Tracking from '~/tracking';
+import frequentItemsMixin from './frequent_items_mixin';
 
 const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
-    GlIcon,
+    GlSearchBoxByType,
   },
   mixins: [frequentItemsMixin, trackingMixin],
   data() {
@@ -32,30 +31,17 @@ export default {
       this.setSearchQuery(this.searchQuery);
     }, 500),
   },
-  mounted() {
-    eventHub.$on(`${this.namespace}-dropdownOpen`, this.setFocus);
-  },
-  beforeDestroy() {
-    eventHub.$off(`${this.namespace}-dropdownOpen`, this.setFocus);
-  },
   methods: {
     ...mapActions(['setSearchQuery']),
-    setFocus() {
-      this.$refs.search.focus();
-    },
   },
 };
 </script>
 
 <template>
   <div class="search-input-container d-none d-sm-block">
-    <input
-      ref="search"
+    <gl-search-box-by-type
       v-model="searchQuery"
       :placeholder="translations.searchInputPlaceholder"
-      type="search"
-      class="form-control"
     />
-    <gl-icon v-if="!searchQuery" name="search" class="search-icon" />
   </div>
 </template>