Fix snippet TOC always showing first file's headings

skkzshrequested to merge
gitlab-community/gitlab-org/gitlab:skkzsh/toc-snippet into master

What does this MR do and why?

Fixes TOC in a snippet always shows first file's head... (#603300 - closed).

Cause

document.querySelector returns only the first match in the document, so every TOC instance in a multi-file snippet grabbed the first blob viewer regardless of which file was selected.

Approach

  1. Scoped the query to the containing .file-holder, which wraps each file's header, content, and TOC in both snippet and repository views.
  2. Wrapped the template in a <div> so that this.$el is never a comment node, which has no closest() method.

Red → Green Cycle

  1. 64d7f9e0: Add spec for TOC with multiple files → 🔴 RED — at this point due to the existing bug (job log)
  2. 0b555a29: Scope the query to .file-holder → 🟢 GREEN

Screenshots

Manually verified in GDK-in-a-box:

snippet-multi-toc

Notes

  • I don't work on the frontend regularly, so a careful look at this approach would be very helpful.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by skkzsh

Merge request reports