A small tabset oddity

[jonkeane]

Thanks to @maelle (#1694) tabsets work fantastically in vignettes which is really great. They should also work (and mostly do) in other places like the home page from readme.md But I'm noticing one oddity. I can't quite tell if this is a bootstrap problem or something else going on.

I made a basic example package showing this. By default the R tab is selected, but if you scroll past it (on both safari and chrome), the css features that show that it's selected (rounded box, grey background, different color type) disappear (though the tab content remains). I also included an identical tabset in the vignette which works just fine and one can scroll past it without changing the selection indications.

https://github.com/jonkeane/simple-package has the source of the simple package.

[hadley]

Hmmm, so before scrolling down:

<a data-bs-toggle="tab" id="r-tab" href="#r" role="tab" aria-controls="r" aria-selected="true" class="nav-link active">R</a>

And after scrolling down:

<a data-bs-toggle="tab" id="r-tab" href="#r" role="tab" aria-controls="r" aria-selected="true" class="nav-link">R</a>

So something is stripping the active class.

[maelle]

Expected HTML markup https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior

[maelle]

The behaviour works on the homepage if using a README table of contents 🤯

E.g.

home:
  sidebar:
    structure: [links, toc, license, community, citation, authors, dev]

I tried this because that's the only JS thing that is different between the default homepage and a default vignette.

[maelle]

The fix is probably to not include the bootstrap-toc JS if there's no TOC otherwise it mixes with other things?!

[maelle]

Site I obtained with my pkgdown branch #1890: https://hopeful-lewin-04de2a.netlify.app/

[maelle]

(thanks a lot @jonkeane for the precise bug report & reprex!)

[maelle]

I do see an error in the console for the website mentioned above though. (from pkgdown.js)

[maelle]

That's because pkgdown.js has the line Toc.init

[maelle]

I updated my PR and the Netlify preview.

[jonkeane]

Oh wow, that was quick! And it looks like it works perfectly. Thank you!

[hadley]

Is this maybe the same problem as #1959?