1 files changed, 15 insertions, 17 deletions
diff --git a/app/assets/javascripts/tags/components/sort_dropdown.vue b/app/assets/javascripts/tags/components/sort_dropdown.vue
index 036ce2cca78..bb4f3ac0571 100644
--- a/app/assets/javascripts/tags/components/sort_dropdown.vue
+++ b/app/assets/javascripts/tags/components/sort_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlSearchBoxByClick } from '@gitlab/ui';
 import { mergeUrlParams, visitUrl, getParameterValues } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
@@ -8,8 +8,7 @@ export default {
     searchPlaceholder: s__('TagsPage|Filter by tag name'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     GlSearchBoxByClick,
   },
   inject: ['sortOptions', 'filterTagsPath'],
@@ -23,6 +22,11 @@ export default {
     selectedSortMethod() {
       return this.sortOptions[this.selectedKey];
     },
+    sortOptionsListboxItems() {
+      return Object.entries(this.sortOptions).map(([value, text]) => {
+        return { value, text };
+      });
+    },
   },
   created() {
     const sortValue = getParameterValues('sort');
@@ -37,9 +41,6 @@ export default {
     }
   },
   methods: {
-    isSortMethodSelected(sortKey) {
-      return sortKey === this.selectedKey;
-    },
     visitUrlFromOption(sortKey) {
       this.selectedKey = sortKey;
       const urlParams = {};
@@ -62,16 +63,13 @@ export default {
       data-testid="tag-search"
       @submit="visitUrlFromOption(selectedKey)"
     />
-    <gl-dropdown :text="selectedSortMethod" right data-testid="tags-dropdown">
-      <gl-dropdown-item
-        v-for="(value, key) in sortOptions"
-        :key="key"
-        :is-checked="isSortMethodSelected(key)"
-        is-check-item
-        @click="visitUrlFromOption(key)"
-      >
-        {{ value }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+    <gl-collapsible-listbox
+      v-model="selectedKey"
+      data-testid="tags-dropdown"
+      :items="sortOptionsListboxItems"
+      placement="right"
+      :toggle-text="selectedSortMethod"
+      @select="visitUrlFromOption"
+    />
   </div>
 </template>