Keep new MR dropdown open when toggling notifications

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue

 <script>
-import { GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -22,6 +22,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
+    GlDropdownForm,
     GlIcon,
     GlLoadingIcon,
     GlToggle,
@@ -181,7 +182,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="isMergeRequest" class="gl-new-dropdown-item">
+  <gl-dropdown-form v-if="isMergeRequest" class="gl-new-dropdown-item">
     <div class="gl-px-5 gl-pb-2 gl-pt-1">
       <gl-toggle
         :value="subscribed"
@@ -192,7 +193,7 @@ export default {
         @change="toggleSubscribed"
       />
     </div>
-  </div>
+  </gl-dropdown-form>
   <sidebar-editable-item
     v-else
     ref="editable"

app/assets/stylesheets/page_bundles/merge_requests.scss

@@ -832,6 +832,8 @@ $tabs-holder-z-index: 250;
 .detail-page-header-actions {
   .gl-toggle {
     @include gl-ml-auto;
+    @include gl-rounded-pill;
+    @include gl-w-9;
   }
 }
 
@@ -844,3 +846,7 @@ $tabs-holder-z-index: 250;
     @include gl-font-weight-normal;
   }
 }
+
+.dropdown-menu li button.gl-toggle:not(.is-checked) {
+  background: $gray-400;
+}

spec/features/merge_request/user_manages_subscription_spec.rb

@@ -50,15 +50,11 @@
 
       wait_for_requests
 
-      click_button 'Toggle dropdown'
-
       expect(page).to have_selector('.gl-toggle.is-checked')
       find('[data-testid="notifications-toggle"] .gl-toggle').click
 
       wait_for_requests
 
-      click_button 'Toggle dropdown'
-
       expect(page).to have_selector('.gl-toggle:not(.is-checked)')
     end
   end