Make search dropdowns consistent

app/assets/javascripts/gl_dropdown.js

@@ -654,10 +654,15 @@ GitLabDropdown = (function() {
       if (!selected) {
         fieldName = this.options.fieldName;
 
-        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
+        if (value) {
+          field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
           if (field.length) {
             selected = true;
           }
+        } else {
+          field = this.dropdown.parent().find(`input[name='${fieldName}']`);
+          selected = !field.length;
+        }
       }
       // Set URL
       if (this.options.url != null) {

app/assets/stylesheets/framework/dropdowns.scss

@@ -757,6 +757,7 @@
       button {
         border-radius: 0;
         padding: 8px 16px;
+        white-space: normal;
 
         // make sure the text color is not overriden
         &.text-danger {

app/assets/stylesheets/pages/search.scss

@@ -190,6 +190,8 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
+  @include new-style-dropdown;
+
   @media (min-width: $screen-sm-min) {
     display: -webkit-flex;
     display: flex;

spec/javascripts/gl_dropdown_spec.js

@@ -4,7 +4,10 @@ import '~/gl_dropdown';
 import '~/lib/utils/common_utils';
 import '~/lib/utils/url_utility';
 
-(() => {
+describe('glDropdown', function describeDropdown() {
+  preloadFixtures('static/gl_dropdown.html.raw');
+  loadJSONFixtures('projects.json');
+
   const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
   const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
   const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
@@ -39,10 +42,6 @@ import '~/lib/utils/url_utility';
     remoteCallback = callback.bind({}, data);
   };
 
-  describe('Dropdown', function describeDropdown() {
-    preloadFixtures('static/gl_dropdown.html.raw');
-    loadJSONFixtures('projects.json');
-
   function initDropDown(hasRemote, isFilterable, extraOpts = {}) {
     const options = Object.assign({
       selectable: true,
@@ -52,9 +51,8 @@ import '~/lib/utils/url_utility';
         fields: ['name']
       },
       text: project => (project.name_with_namespace || project.name),
-        id: project => project.id
+      id: project => project.id,
     }, extraOpts);
-
     this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options);
   }
 
@@ -222,5 +220,39 @@ import '~/lib/utils/url_utility';
       .trigger('focus');
     expect($searchInput.val()).toEqual('g');
   });
+
+  describe('renderItem', () => {
+    describe('without selected value', () => {
+      let dropdown;
+
+      beforeEach(() => {
+        const dropdownOptions = {
+
+        };
+        const $dropdownDiv = $('<div />');
+        $dropdownDiv.glDropdown(dropdownOptions);
+        dropdown = $dropdownDiv.data('glDropdown');
+      });
+
+      it('marks items without ID as active', () => {
+        const dummyData = { };
+
+        const html = dropdown.renderItem(dummyData, null, null);
+
+        const link = html.querySelector('a');
+        expect(link).toHaveClass('is-active');
+      });
+
+      it('does not mark items with ID as active', () => {
+        const dummyData = {
+          id: 'ea'
+        };
+
+        const html = dropdown.renderItem(dummyData, null, null);
+
+        const link = html.querySelector('a');
+        expect(link).not.toHaveClass('is-active');
+      });
+    });
   });
-})();
+});