1 files changed, 18 insertions, 30 deletions

diff --git a/app/assets/javascripts/listbox/index.js b/app/assets/javascripts/listbox/index.js
index f63171e2785..7eacbf7fcdd 100644
--- a/app/assets/javascripts/listbox/index.js
+++ b/app/assets/javascripts/listbox/index.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlListbox } from '@gitlab/ui';
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
@@ -31,37 +31,25 @@ export function initListbox(el, { onChange } = {}) {
       },
     },
     render(h) {
-      return h(
-        GlDropdown,
-        {
-          props: {
-            text: this.text,
-            right,
+      return h(GlListbox, {
+        props: {
+          items,
+          right,
+          selected: this.selected,
+          toggleText: this.text,
+        },
+        class: className,
+        on: {
+          select: (selectedValue) => {
+            this.selected = selectedValue;
+            const selectedItem = items.find(({ value }) => value === selectedValue);
+
+            if (typeof onChange === 'function') {
+              onChange(selectedItem);
+            }
           },
-          class: className,
         },
-        items.map((item) =>
-          h(
-            GlDropdownItem,
-            {
-              props: {
-                isCheckItem: true,
-                isChecked: this.selected === item.value,
-              },
-              on: {
-                click: () => {
-                  this.selected = item.value;
-
-                  if (typeof onChange === 'function') {
-                    onChange(item);
-                  }
-                },
-              },
-            },
-            item.text,
-          ),
-        ),
-      );
+      });
     },
   });
 }