nav-active-item-marker="colored-block" not working

[shawnachieve]

I'm probably doing something wrong in my implementation as I see this working on the example page.

On my site, setting "nav-active-item-marker" to "colored-block" doesn't do anything. Specifically, we're trying to get RapiDoc to highlight the entire row of text in the nav for the selected method. However, all we ever get is the thin colored bar on the edge of the screen.

Here is the rapi-doc tag that we're embedding in the page:

<rapi-doc
        spec-url={{ file_url }}
        allow-authentication="true"
        theme="light"
        allow-search="true"
        allow-try="true"
        render-style="read"
        schema-style="table"
        show-header="false"
        allow-spec-url-load="false"
        allow-spec-file-load="false"
        allow-spec-file-download="true"
        show-method-in-nav-bar="as-colored-block"
        sort-endpoints-by="path"
        regular-font="myriad-pro"
        primary-color="#E2000F"
        persist-auth="false"
        nav-active-item-marker="colored-block"
        nav-accent-color="#E2000F"
        nav-accent-text-color="#FFFFFF"
        show-curl-before-try="true"
        nav-item-spacing="compact"
        fill-request-fields-with-example="false"
        schema-style="table"
        schema-expand-level="2">
    </rapi-doc>

When inspecting the rendered output, I see that the div tag has the classes "nav-bar-path left-bar active" when it should have "nav-bar-path colored-block active".

I'm using the latest js from the CDN if that makes any difference.

I looked through the source code and it looks like I have things configured correctly (at least I can't see where its looking for something different than what I'm providing).

Thanks for any guidance or suggestions that you have.

[prassie]

@shawnachieve It does work, except that you've to re-select the active item after switching the option. As show below from the example: https://rapidocweb.com/examples/api-demo.html#get-/providers/microsoft.aadiam/diagnosticSettings

[shawnachieve]

Thanks for the response @prassie . That example is what I was referring to with the example working.

But it's not working with that option pre-set in the HTML tag. Even after clicking on an entry in the nav menu.

As you can see in the following screenshots, nav-active-item-marker="colored-block" is set on the <rapi-doc> tag, but the nav elements are rendered with the left-bar class.

Updated info: I was able to get it to work if I set that attribute via the following js event listener. It just doesn't work when preset in the <rapi-doc> tag.

    <script>
        rapidocElement.addEventListener('spec-loaded', (e) => {
            document.getElementById('rapidocElement').setAttribute('nav-active-item-marker', 'colored-block')
        });
    </script>

[GreyXor]

Thanks for the response @prassie . That example is what I was referring to with the example working.

But it's not working with that option pre-set in the HTML tag. Even after clicking on an entry in the nav menu.

As you can see in the following screenshots, nav-active-item-marker="colored-block" is set on the <rapi-doc> tag, but the nav elements are rendered with the left-bar class.

Updated info: I was able to get it to work if I set that attribute via the following js event listener. It just doesn't work when preset in the <rapi-doc> tag.

    <script>
        rapidocElement.addEventListener('spec-loaded', (e) => {
            document.getElementById('rapidocElement').setAttribute('nav-active-item-marker', 'colored-block')
        });
    </script>

I have the same issue