Display check next to assigned user in dropdown

app/assets/javascripts/users_select.js

@@ -42,7 +42,6 @@
           showAnyUser = $dropdown.data('any-user');
           firstUser = $dropdown.data('first-user');
           options.authorId = $dropdown.data('author-id');
-          selectedId = $dropdown.data('selected');
           defaultLabel = $dropdown.data('default-label');
           issueURL = $dropdown.data('issueUpdate');
           $selectbox = $dropdown.closest('.selectbox');
@@ -51,6 +50,7 @@
           $value = $block.find('.value');
           $collapsedSidebar = $block.find('.sidebar-collapsed-user');
           $loading = $block.find('.block-loading').fadeOut();
+          selectedId = $dropdown.data('selected') || showNullUser ? 0 : null;
 
           var updateIssueBoardsIssue = function () {
             $loading.removeClass('hidden').fadeIn();
@@ -208,9 +208,9 @@
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
               isMRIndex = (page === page && page === 'projects:merge_requests:index');
+              selectedId = user.id;
               if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
                 e.preventDefault();
-                selectedId = user.id;
                 if (selectedId === gon.current_user_id) {
                   $('.assign-to-me-link').hide();
                 } else {
@@ -221,7 +221,6 @@
               if ($el.closest('.add-issues-modal').length) {
                 gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
               } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-                selectedId = user.id;
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();

app/assets/stylesheets/framework/dropdowns.scss

@@ -390,7 +390,8 @@
       &::before {
         position: absolute;
         left: 6px;
-        top: 6px;
+        top: 50%;
+        transform: translateY(-50%);
         font: normal normal normal 14px/1 FontAwesome;
         font-size: inherit;
         text-rendering: auto;

app/views/shared/issuable/_sidebar.html.haml

@@ -48,7 +48,7 @@
 
         .selectbox.hide-collapsed
           = f.hidden_field 'assignee_id', value: issuable.assignee_id, id: 'issue_assignee_id'
-          = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
+          = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true, selected: issuable.assignee_id } })
 
       .block.milestone
         .sidebar-collapsed-icon

changelogs/unreleased/31057-unnecessary-padding-along-left-side-of-assignees-dropdown.yml

+---
+title: Show checkmark on current assignee in assignee dropdown
+merge_request: 10767
+author:

spec/features/issues/form_spec.rb

@@ -2,6 +2,7 @@ require 'rails_helper'
 
 describe 'New/edit issue', feature: true, js: true do
   include GitlabRoutingHelper
+  include ActionView::Helpers::JavaScriptHelper
 
   let!(:project)   { create(:project) }
   let!(:user)      { create(:user)}
@@ -105,6 +106,33 @@ describe 'New/edit issue', feature: true, js: true do
 
       expect(find('.js-label-select')).to have_content('Labels')
     end
+
+    it 'correctly updates the selected user when changing assignee' do
+      click_button 'Assignee'
+      page.within '.dropdown-menu-user' do
+        click_link user.name
+      end
+
+      expect(find('input[name="issue[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+
+      click_button user.name
+
+      expect(find('.dropdown-menu-user a.is-active').first(:xpath, '..')['data-user-id']).to eq(user.id.to_s)
+
+      # check the ::before pseudo element to ensure checkmark icon is present
+      expect(before_for_selector('.dropdown-menu-selectable a.is-active')).not_to eq('')
+      expect(before_for_selector('.dropdown-menu-selectable a:not(.is-active)')).to eq('')
+
+      page.within '.dropdown-menu-user' do
+        click_link user2.name
+      end
+
+      expect(find('input[name="issue[assignee_id]"]', visible: false).value).to match(user2.id.to_s)
+
+      click_button user2.name
+
+      expect(find('.dropdown-menu-user a.is-active').first(:xpath, '..')['data-user-id']).to eq(user2.id.to_s)
+    end
   end
 
   context 'edit issue' do
@@ -154,4 +182,14 @@ describe 'New/edit issue', feature: true, js: true do
       end
     end
   end
+
+  def before_for_selector(selector)
+    js = <<-JS.strip_heredoc
+      (function(selector) {
+        var el = document.querySelector(selector);
+        return window.getComputedStyle(el, '::before').getPropertyValue('content');
+      })("#{escape_javascript(selector)}")
+    JS
+    page.evaluate_script(js)
+  end
 end