1 files changed, 47 insertions, 0 deletions
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
new file mode 100644
index 00000000000..65e4101352c
--- /dev/null
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -0,0 +1,47 @@
+class RefSelectDropdown {
+  constructor($dropdownButton, availableRefs) {
+    const availableRefsValue = availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
+    $dropdownButton.glDropdown({
+      data: availableRefsValue,
+      filterable: true,
+      filterByText: true,
+      remote: false,
+      fieldName: $dropdownButton.data('field-name'),
+      filterInput: 'input[type="search"]',
+      selectable: true,
+      isSelectable(branch, $el) {
+        return !$el.hasClass('is-active');
+      },
+      text(branch) {
+        return branch;
+      },
+      id(branch) {
+        return branch;
+      },
+      toggleLabel(branch) {
+        return branch;
+      },
+    });
+
+    const $dropdownContainer = $dropdownButton.closest('.dropdown');
+    const $fieldInput = $(`input[name="${$dropdownButton.data('field-name')}"]`, $dropdownContainer);
+    const $filterInput = $('input[type="search"]', $dropdownContainer);
+
+    $filterInput.on('keyup', (e) => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode !== 13) return;
+
+      const ref = $filterInput.val().trim();
+      if (ref === '') {
+        return;
+      }
+
+      $fieldInput.val(ref);
+      $('.dropdown-toggle-text', $dropdownButton).text(ref);
+
+      $dropdownContainer.removeClass('open');
+    });
+  }
+}
+
+export default RefSelectDropdown;