1 files changed, 20 insertions, 13 deletions
diff --git a/app/assets/javascripts/behaviors/select2.js b/app/assets/javascripts/behaviors/select2.js
index 37b75bb5e56..1f222d8c1f6 100644
--- a/app/assets/javascripts/behaviors/select2.js
+++ b/app/assets/javascripts/behaviors/select2.js
@@ -1,22 +1,29 @@
 import $ from 'jquery';
+import { loadCSSFile } from '../lib/utils/css_utils';
 
 export default () => {
-  if ($('select.select2').length) {
+  const $select2Elements = $('select.select2');
+  if ($select2Elements.length) {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
       .then(() => {
-        $('select.select2').select2({
-          width: 'resolve',
-          minimumResultsForSearch: 10,
-          dropdownAutoWidth: true,
-        });
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
+          .then(() => {
+            $select2Elements.select2({
+              width: 'resolve',
+              minimumResultsForSearch: 10,
+              dropdownAutoWidth: true,
+            });
 
-        // Close select2 on escape
-        $('.js-select2').on('select2-close', () => {
-          setTimeout(() => {
-            $('.select2-container-active').removeClass('select2-container-active');
-            $(':focus').blur();
-          }, 1);
-        });
+            // Close select2 on escape
+            $('.js-select2').on('select2-close', () => {
+              requestAnimationFrame(() => {
+                $('.select2-container-active').removeClass('select2-container-active');
+                $(':focus').blur();
+              });
+            });
+          })
+          .catch(() => {});
       })
       .catch(() => {});
   }