Guard GlDisclosureDropdown auto-close when the ref is gone

Miguel Rinconrequested to merge
disclosure-dropdown-auto-close-destroyed-ref into main

What does this MR do?

Why

GlDisclosureDropdown.handleAutoClose runs on the native click that bubbles from a dropdown item to the disclosure content element. It reads this.$refs.baseDropdown.containsElement?.(e.target). The method call is optionally chained, but the ref is not.

When the item action destroys the dropdown synchronously, for example by navigating away, the click still reaches the handler. The bubbling path is fixed when the event is dispatched. Under Vue 3 (@vue/compat) the baseDropdown ref is null by then, so the handler throws:

[Vue warn]: Error in native event handler: "TypeError: Cannot read properties of null (reading 'containsElement')"
    at Proxy.handleAutoClose (@gitlab/ui/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js)

Vue 2 keeps $refs populated after destroy, so the error only shows on Vue 3. In GitLab it appears on the Vue 3 system spec jobs as browser console errors on 7 spec files (see references) and on the security policies list when a row action navigates.

What

  • Optionally chain the ref access in handleAutoClose. When the ref is gone there is nothing to close.
  • Add a spec where an item action destroys the dropdown. Without the fix it fails on Vue 3 with the containsElement TypeError. On Vue 2 it passes before and after.
  • Changeset for a @gitlab/ui patch release.

Alternatives ruled out:

  • Fix each GitLab caller: every GlDisclosureDropdown whose item click navigates or unmounts the dropdown is affected. One guard in the component covers them all.
  • Remove the listener in beforeDestroy: the click is already dispatching when the component is torn down, so the listener still fires.

How to verify

From packages/gitlab-ui:

yarn test:unit src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js
yarn test:unit-vue3 src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

Both runs pass 50 tests. Revert check: revert the change in disclosure_dropdown.vue and rerun the Vue 3 command. The new auto closing spec fails with Vue errors were logged: TypeError: Cannot read properties of null (reading 'containsElement').

Screenshots or screen recordings

No visual change.

Integrations

  • GitLab: no integration change needed. A Renovate dependency update picks up the patch.

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports