Merge branch '287755-fix-dropdown-bug' into 'master'

Fix dropdown not closing on status update

See merge request gitlab-org/gitlab!61404

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -52,7 +52,7 @@ export default {
     },
     toggleFormDropdown() {
       this.isDropdownShowing = !this.isDropdownShowing;
-      const { dropdown } = this.$children[2].$refs.dropdown.$refs;
+      const { dropdown } = this.$refs.status.$refs.dropdown.$refs;
       if (dropdown && this.isDropdownShowing) {
         dropdown.show();
       }
@@ -102,6 +102,7 @@ export default {
       </p>
 
       <alert-status
+        ref="status"
         :alert="alert"
         :project-path="projectPath"
         :is-dropdown-showing="isDropdownShowing"

ee/changelogs/unreleased/287755-fix-dropdown-bug.yml

+---
+title: Fix dropdown not closing on status update
+merge_request: 61404
+author:
+type: fixed

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

@@ -10,9 +10,9 @@ const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
-  const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
-  const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findStatusDropdown = () => wrapper.findComponent(GlDropdown);
+  const findStatusDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+  const findStatusLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findStatusDropdownHeader = () => wrapper.findByTestId('dropdown-header');
   const findAlertStatus = () => wrapper.findComponent(AlertStatus);
   const findStatus = () => wrapper.findByTestId('status');