Add latest changes from gitlab-org/gitlab@master

2 files changed, 43 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
new file mode 100644
index 00000000000..ad89b78b521
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue';
+
+export const initListboxInputs = () => {
+  const els = [...document.querySelectorAll('.js-listbox-input')];
+
+  els.forEach((el, index) => {
+    const { label, description, name, defaultToggleText, value = null } = el.dataset;
+    const { id } = el;
+    const items = JSON.parse(el.dataset.items);
+
+    return new Vue({
+      el,
+      name: `ListboxInputRoot${index + 1}`,
+      data() {
+        return {
+          selected: value,
+        };
+      },
+      render(createElement) {
+        return createElement(ListboxInput, {
+          on: {
+            select: (newValue) => {
+              this.selected = newValue;
+            },
+          },
+          props: {
+            label,
+            description,
+            name,
+            defaultToggleText,
+            selected: this.selected,
+            items,
+          },
+          attrs: {
+            id,
+          },
+        });
+      },
+    });
+  });
+};
diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
index 8340ee19084..bc6b5d3176f 100644
--- a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
@@ -115,7 +115,7 @@ export default {
 </script>
 
 <template>
-  <component :is="wrapperComponent" :label="label" :description="description">
+  <component :is="wrapperComponent" :label="label" :description="description" v-bind="$attrs">
     <gl-listbox
       :selected="selected"
       :toggle-text="toggleText"