Steps to replicate the issue (include links if applicable):
- Go to https://test.wikipedia.org/wiki/TOC_current_section_highlighting.
- Click "Edit" to edit with VE.
- Make some change.
- Save the page.
- Scroll to the bottom of the page.
What happens?:
The first section is highlighted as the current section.
What should have happened instead?:
The first visible section should be highlighted as the current section.
Other information (browser name/version, screenshots, etc.):
Chrome.
Additional QA
Steps to reproduce
- Open a (longer) talk page in the new Vector 2022 with the floating TOC.
- Scroll down a bit (so the first few ==sections== aren't on screen). Look at which section heading is highlighted in bold.
- Use the Reply tool to post a comment in any visible part of the page (doesn't have to be the one shown in bold).
- Don't touch the mouse/trackpad yet.
- Look at the TOC. Where's the bold?
- Watch the TOC while you scroll *up* a little (a couple of comments' worth should be enough). Why is the first ==section== in bold, even though it's still not visible on screen?
Reproduced in Chrome/macOS. Probably happens everywhere.
Developer notes
Although we update the TOC elements after an edit via the wikipage.tableOfContents hook, sectionObserver which is responsible for detecting intersection changes with the sections when scrolling remains unaware of any edits to the content's elements. We should probably move the wikipage.tableOfContents hook listener to main.js where it can trigger updates to both the TOC and sectionObserver.
There is a method, setElements, on sectionObserver,js that should be called with the updated list of sections we need to track after an edit.
https://phabricator.wikimedia.org/T316037#8643073
https://phabricator.wikimedia.org/T316037#8655226
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T316037#8643073 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T316037#8655226 |
