Dropdowns are now displayed with the Select2 library widget

Resources/views/css/admin.css.twig

@@ -348,6 +348,30 @@ button.btn-danger {
     margin-bottom: .5em;
 }
 
+/* Select2 widget
+   ------------------------------------------------------------------------- */
+.select2-container--bootstrap .select2-selection {
+    border: 1px solid {{ colors.gray_dark }};
+}
+.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
+    color: {{ colors.text }};
+}
+.select2-container--bootstrap .select2-results__option {
+    margin-bottom: 0;
+}
+.select2-container--bootstrap .select2-results__option[aria-selected=true] {
+    background-color: {{ colors.gray_light }};
+    font-weight: bold;
+}
+.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
+    background-color: {{ brand_color }};
+}
+.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
+    border: 1px solid {{ colors.gray_dark }};
+    margin: 5px 1%;
+    width: 96%;
+}
+
 /* Modal windows
    ------------------------------------------------------------------------- */
 .modal-dialog .modal-content {

Resources/views/default/edit.html.twig

@@ -54,6 +54,11 @@
     {% endblock delete_form %}
 {% endblock %}
 
+{% block head_stylesheets %}
+    <link rel="stylesheet" href="{{ asset('bundles/easyadmin/stylesheet/select2.min.css') }}">
+    {{ parent() }}
+{% endblock %}
+
 {% block body_javascript %}
     {{ parent() }}
 
@@ -72,4 +77,13 @@
             });
         });
     </script>
+
+    <script src="{{ asset('bundles/easyadmin/javascript/select2.min.js') }}"></script>
+    <script type="text/javascript">
+        $(function() {
+            $('#main form select').select2({
+                theme: 'bootstrap'
+            });
+        });
+    </script>
 {% endblock %}

Resources/views/default/new.html.twig

@@ -19,6 +19,11 @@
     {% endblock entity_form %}
 {% endblock %}
 
+{% block head_stylesheets %}
+    <link rel="stylesheet" href="{{ asset('bundles/easyadmin/stylesheet/select2.min.css') }}">
+    {{ parent() }}
+{% endblock %}
+
 {% block body_javascript %}
     {{ parent() }}
 
@@ -28,4 +33,13 @@
             $('#new-form').areYouSure({ 'message': 'You haven\'t saved the changes made on this form.' });
         });
     </script>
+
+    <script src="{{ asset('bundles/easyadmin/javascript/select2.min.js') }}"></script>
+    <script type="text/javascript">
+        $(function() {
+            $('#main form select').select2({
+                theme: 'bootstrap'
+            });
+        });
+    </script>
 {% endblock %}

Tests/Controller/DefaultBackendTest.php

@@ -85,9 +85,9 @@ public function testAdminCssFile()
         $this->client->request('GET', '/admin/_css/admin.css');
 
         $this->assertEquals('text/css; charset=UTF-8', $this->client->getResponse()->headers->get('Content-Type'));
-        $this->assertEquals(19, substr_count($this->client->getResponse()->getContent(), '#E67E22'), 'The admin.css file uses the default brand color.');
+        $this->assertEquals(20, substr_count($this->client->getResponse()->getContent(), '#E67E22'), 'The admin.css file uses the default brand color.');
         // #222222 color is only used by the "dark" color scheme, not the "light" one
-        $this->assertEquals(15, substr_count($this->client->getResponse()->getContent(), '#222222'), 'The admin.css file uses the dark color scheme.');
+        $this->assertEquals(16, substr_count($this->client->getResponse()->getContent(), '#222222'), 'The admin.css file uses the dark color scheme.');
     }
 
     public function testListViewMainMenu()