## Summary GitLab's feature specs now fail on unexpected browser console errors (https://gitlab.com/gitlab-org/gitlab/-/merge_requests/255207). The catalogue of errors is https://gitlab.com/gitlab-org/gitlab/-/work_items/628901, section B. Three of the uncaught errors are thrown inside `@gitlab/ui` 137.2.0, so the fix belongs here, followed by a version bump in gitlab-org/gitlab. All three are the same shape: an async callback (click handler, `$nextTick`, awaited watcher) runs after the component or a ref it needs is gone. Each bug below can be its own MR. They are grouped here because they share the cause and the follow-up bump. ## GlDisclosureDropdown: item click handler reads `$refs.baseDropdown` after unmount The item click handler of `GlDisclosureDropdown` reads `this.$refs.baseDropdown` after the dropdown has unmounted. When an item's action destroys or re-renders the dropdown before the handler finishes, the console shows `Uncaught TypeError: Cannot read properties of null (reading 'containsElement')`. Seen with `@gitlab/ui` 137.2.0 as installed in gitlab-org/gitlab. `main` of https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com has the same code. ### Where it throws `packages/gitlab-ui/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue`, item click handler: ```js if ( this.autoClose && e.target.closest(ITEM_SELECTOR) && this.$refs.baseDropdown.containsElement?.(e.target) ) { this.closeAndFocus(); } ``` The optional chaining guards a missing `containsElement` method, which the comment explains is for shallow-mounted specs. It does not guard a missing `baseDropdown` ref. ### How it happens Clicking an item whose action removes or re-renders the dropdown, for example "Delete" on an incident timeline event or submitting a form in a drawer, unmounts the dropdown before the click handler finishes. `this.$refs.baseDropdown` is then null. ### Proposed fix - Change the call to `this.$refs.baseDropdown?.containsElement?.(e.target)`. - Add a spec that clicks an item whose handler destroys the dropdown and asserts no error is thrown. Then bump `@gitlab/ui` in gitlab-org/gitlab. ### Where GitLab hits it 16 examples in 7 spec files: - `spec/features/incidents/incident_timeline_events_spec.rb` - `spec/features/groups/service_accounts_spec.rb` - `spec/features/projects/service_accounts_spec.rb` - `spec/features/profiles/user_updates_comment_template_spec.rb` - `ee/spec/features/groups/user_updates_comment_template_spec.rb` - `ee/spec/features/groups/settings/work_items/custom_status_configuration_spec.rb` CI jobs: https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296272 and https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296284. ## GlBreadcrumb: `items` watcher measures refs after the component unmounted The async `items` watcher of `GlBreadcrumb` measures refs after the component has unmounted. When the breadcrumb is unmounted, or its items change again, while the watcher awaits `$nextTick`, `this.$refs.dropdown` is undefined and the watcher throws. Vue reports it as: ``` [Vue warn]: Error in callback for watcher "items" (Promise/async): "TypeError: Cannot read properties of undefined (reading 'clientWidth')" found in ---> <GlBreadcrumb> <ServiceAccountsBreadcrumb> <Root> ``` Seen with `@gitlab/ui` 137.2.0. ### Where it throws `packages/gitlab-ui/src/components/base/breadcrumb/breadcrumb.vue`, `items` watcher. After `await this.$nextTick()` it returns when `this.$refs.breadcrumbs` is missing, measures each breadcrumb, then reads: ```js this.dropdownWidth = this.$refs.dropdown.clientWidth; ``` without a guard. ### How it happens The breadcrumb is unmounted, or receives new items, while the watcher awaits `$nextTick`. After the await, `this.$refs.dropdown` is undefined. ### Proposed fix - After the await, return when `this.$refs.dropdown` is missing, or when the component is destroyed, the same way the watcher already returns when `this.$refs.breadcrumbs` is missing. - Add a spec that unmounts the breadcrumb during the pending tick and asserts no error is thrown. Then bump `@gitlab/ui` in gitlab-org/gitlab. ### Where GitLab hits it 9 examples in 3 spec files, all around access token create, revoke and rotate, which re-render the breadcrumb: - `spec/features/groups/service_accounts_spec.rb` - `spec/features/projects/service_accounts_spec.rb` (project and subgroup variants) CI jobs: https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296254 and https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296258. ## Vendored bootstrap-vue tooltip: `$toolpop.show is not a function` after teardown The vendored bootstrap-vue tooltip that backs `GlTooltip` and `GlPopover` throws `Uncaught TypeError: $toolpop.show is not a function` from the `$nextTick` callback in its `mounted` hook. It appears in both the Vue 2 build and the Vue 3 compat build. Seen with `@gitlab/ui` 137.2.0. ### Where it throws `packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.js`, `mounted`: ```js this.$nextTick(() => { const $toolpop = (this.$_toolpop = createNewChildComponent(this, Component, { ... })); $toolpop.updateData(this.templateData); ... if (this.localShow) { $toolpop.show(); } }); ``` ### How it happens The error appears when a note that contains a cross-reference is re-rendered right after it is posted. The tooltip or popover host is torn down or replaced between `mounted` and the next tick, and the child instance created in the callback has no `show` method. The exact mechanism is not confirmed. The stack points at this callback in both builds. ### Proposed fix - In the `$nextTick` callback, bail out when the component was destroyed in the meantime. bootstrap-vue sets `$_toolpop` to null in `beforeDestroy`, so a destroyed flag or that null check can be reused. - Guard `typeof $toolpop.show === 'function'` before calling it. - Add a spec that destroys the host before the tick and asserts no error is thrown. Then bump `@gitlab/ui` in gitlab-org/gitlab. ### Where GitLab hits it 4 examples in 2 spec files: - `spec/features/work_items/issues/notes_on_issues_spec.rb`, "creates a note with reference and cross references the issue", for private, public and internal projects - `ee/spec/features/work_items/epics/referencing_epics_spec.rb` CI jobs: https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296261 and https://gitlab.com/gitlab-org/gitlab/-/jobs/16462296301. ## References - Catalogue entry: https://gitlab.com/gitlab-org/gitlab/-/work_items/628901 (section B) - Feature specs fail on console errors: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/255207 - Sibling issue for the At.js fork: https://gitlab.com/gitlab-org/gitlab/-/work_items/628981 <!-- claude session=a2e93a0e-4a6e-4a4b-90d6-5c31a76680c7 posted=2026-09-14T14:58:38Z -->