Duplicated version menu on navigation for mkdocs

[ZedThree]

Details

• Read the Docs project URL: https://app.readthedocs.org/projects/fortitude/
• Build URL (if applicable): https://app.readthedocs.org/projects/fortitude/builds/27349638/
• Read the Docs username (if applicable): https://readthedocs.org/profiles/PeterHill/

Actual Result

When I click links in the left-hand nav pane, a new version drop-down menu (<div class=md-version>) appears in the top nav bar:

This doesn't happen locally, as this is the RTD inserted menu.

Expected Result

Just one drop-menu version menu stays there.

[humitos]

Hi. Did you fix this issue already? I can't reproduce it.

[ZedThree]

Nope, still happening for me. I've tried on four separate browsers (Vivaldi, Firefox, Chrome, Edge), on three devices (Linux desktop, Android, Windows 11)

[humitos]

Are you using the example from our docs to generate that version selector? This one https://docs.readthedocs.com/platform/latest/intro/mkdocs.html#integrate-the-read-the-docs-version-menu-into-your-site-navigation

[ZedThree]

Yup, here's the entirety of our javascript/readthedocs.js:

document.addEventListener("DOMContentLoaded", function(event) {
// Trigger Read the Docs' search addon instead of Material MkDocs default
document.querySelector(".md-search__input").addEventListener("focus", (e) => {
        const event = new CustomEvent("readthedocs-search-show");
        document.dispatchEvent(event);
    });
});

// Use CustomEvent to generate the version selector
document.addEventListener(
        "readthedocs-addons-data-ready",
        function (event) {
        const config = event.detail.data();
        const versioning = `
<div class="md-version">
<button class="md-version__current" aria-label="Select version">
    ${config.versions.current.slug}
</button>

<ul class="md-version__list">
${ config.versions.active.map(
    (version) => `
    <li class="md-version__item">
    <a href="${ version.urls.documentation }" class="md-version__link">
        ${ version.slug }
    </a>
            </li>`).join("\n")}
</ul>
</div>`;

    document.querySelector(".md-header__topic").insertAdjacentHTML("beforeend", versioning);
});

[humitos]

I think this happens because you have "Instant loading" enabled in your project at https://github.com/PlasmaFAIR/fortitude/blob/main/mkdocs.yml#L12C7-L12C25

If you disable that, it should work without issues.

To keep that feature enabled, the JS code has to be modified to avoid re-adding the version selector if it's already added, or -- delete the version selector and re-add it to avoid duplication.

[ZedThree]

My javascript is pretty poor, I have tried inserting:

document.querySelector(".md-version").remove();

just before the .insertAdjacentHTML call, and this seemed to remove the drop-down menu entirely. I think we'll just make do with disabling one or the other of these features

[humitos]

@ZedThree I opened a PR that removes the old versions before re-adding them. Can you give it a try?