Scoped labels do not remove old label in board sidebar

app/assets/javascripts/labels_select.js

@@ -32,6 +32,7 @@ export default class LabelsSelect {
         $selectbox,
         $sidebarCollapsedValue,
         $value,
+        $dropdownMenu,
         abilityName,
         defaultLabel,
         issueUpdateURL,
@@ -67,6 +68,7 @@ export default class LabelsSelect {
       $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
       $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
       $value = $block.find('.value');
+      $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
       $loading = $block.find('.block-loading').fadeOut();
       fieldName = $dropdown.data('fieldName');
       initialSelected = $selectbox
@@ -454,9 +456,21 @@ export default class LabelsSelect {
             }
 
             $loading.fadeIn();
+            const oldLabels = boardsStore.detail.issue.labels;
 
             boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
+              .then(() => {
+                if (isScopedLabel(label)) {
+                  const prevIds = oldLabels.map(label => label.id);
+                  const newIds = boardsStore.detail.issue.labels.map(label => label.id);
+                  const differentIds = _.difference(prevIds, newIds);
+                  $dropdown.data('marked', newIds);
+                  $dropdownMenu
+                    .find(differentIds.map(id => `[data-label-id="${id}"]`).join(','))
+                    .removeClass('is-active');
+                }
+              })
               .then(fadeOutLoader)
               .catch(fadeOutLoader);
           } else if (handleClick) {

ee/changelogs/unreleased/rjain-remove-old-label.yml

+---
+title: Scoped labels do not remove old label in board sidebar
+merge_request: 18313
+author:
+type: fixed

spec/features/boards/sidebar_spec.rb

@@ -14,6 +14,8 @@ describe 'Issue Boards', :js do
   let!(:bug)         { create(:label, project: project, name: 'Bug') }
   let!(:regression)  { create(:label, project: project, name: 'Regression') }
   let!(:stretch)     { create(:label, project: project, name: 'Stretch') }
+  let!(:scoped_label_1)     { create(:label, project: project, name: 'Scoped::Label1') }
+  let!(:scoped_label_2)     { create(:label, project: project, name: 'Scoped::Label2') }
   let!(:issue1)      { create(:labeled_issue, project: project, assignees: [user], milestone: milestone, labels: [development], relative_position: 2) }
   let!(:issue2)      { create(:labeled_issue, project: project, labels: [development, stretch], relative_position: 1) }
   let(:board)        { create(:board, project: project) }
@@ -27,6 +29,8 @@ describe 'Issue Boards', :js do
   end
 
   before do
+    stub_licensed_features(scoped_labels: true)
+
     project.add_maintainer(user)
 
     sign_in(user)
@@ -308,6 +312,33 @@ describe 'Issue Boards', :js do
       expect(card).to have_content(bug.title)
     end
 
+    it 'removes existing scoped label' do
+      click_card(card)
+
+      page.within('.labels') do
+        click_link 'Edit'
+
+        wait_for_requests
+
+        click_link scoped_label_1.title
+        click_link scoped_label_2.title
+
+        wait_for_requests
+
+        find('.dropdown-menu-close-icon').click
+
+        page.within('.value') do
+          expect(page).to have_selector('.badge', count: 3)
+          expect(page).not_to have_content(scoped_label_1.title)
+          expect(page).to have_content(scoped_label_2.title)
+        end
+      end
+
+      expect(card).to have_selector('.badge', count: 3)
+      expect(card).not_to have_content(scoped_label_1.title)
+      expect(card).to have_content(scoped_label_2.title)
+    end
+
     it 'adds a multiple labels' do
       click_card(card)