Tabpane shows multiple tabs at the same time

[chalin]

If I insert the following tabpane in, for example, the User Guide

{{< tabpane lang="console" >}}
{{< tab AMD64 >}}
$ apk update
$ apk add wget shadow
$ wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/vX.Y/otelcol_X.Y_linux_amd64.apk
$ apk add --allow-untrusted otelcol_X.Y_linux_amd64.apk
{{< /tab >}}

{{< tab ARM64 >}}
$ apk update
$ apk add wget shadow
$ wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/vX.Y/otelcol_X.Y_linux_arm64.apk
$ apk add --allow-untrusted otelcol_X.Y_linux_arm64.apk
{{< /tab >}}

{{< tab i386 >}}
$ apk update
$ apk add wget shadow
$ wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/vX.Y/otelcol_X.Y_linux_386.apk
$ apk add --allow-untrusted otelcol_X.Y_linux_386.apk
{{< /tab >}}
{{< /tabpane >}}

then it renders like this, when using Docsy @HEAD (currently 7489c35):

Things I've tried:

• If I remove the lang attribute, it gets better (no multiple tabs shown), but then the formatting still isn't right.
• If I move the lang attribute into the tab elements (while naming the header parameter too), the original problem presents itself (multiple tab contents shown at the same time).

Could you take a look @deining? Thanks!

[deining]

If I insert the following tabpane in, for example, the User Guide
then it renders like this:

I investigated the issue and what you see here is caused by the persistance of the language feature.

Quick fix:

Disable persistance of language, use a language that is supported by Prism and everything will be o.k.:

{{< tabpane  persistLang=false lang="sh" >}}
...

Analysis

You are defining lang="console" globally for all tabs. With persistance of language enabled by default, a key active_language is set in the local storage of your browser, which is set to console:

active_language  |  console |

Once you load the page or click on a tab of the tabpane, the javascript function persistLang(language) is called. This function looks for tabs with lang="console", finds three of them and makes all three active. As soon as you disable persistence of language, this unwanted behaviour is gone.

• If I remove the lang attribute, it gets better
  (no multiple tabs shown), but then
  the formatting still isn't right.

This is a separate css issue, which can be fixed by adding the style rule listed below to assets/scss/shortcodes/tabbed-pane.scss:

.tab-content {
  .tab-pane {
    pre {
    margin: 0rem 0 0rem 0;
    border: none;
    max-width: 100%;
    }
    margin-top: 0rem;
    margin-bottom: 1.5rem;
    max-width: 80%;
    border-left: 1px solid rgba(0, 0, 0, 0.125);
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
}

The styling issue occurs only if you define a language not supported by Prism highlighter. This quirk should be definitely fixed.

• If I move the lang attribute into the tab elements
  (while naming the header parameter too),
  the original problem presents itself
  (multiple tab contents shown at the same time).

This is to be expected. You can set the language globally or separately for each tab, the result is the same.

How to proceed?

Currently persistance of the language is enabled by default, I would opt for disabling that feature by default. Furthermore, we should add to the documentation, that if the user enables this feature, he has to make sure that within one tabpane, a separate language is assigned to each tab. Additionally, we can improve the shortcode in the sense that an error is thrown if persistance of language is enabled and the language is defined globally (as in the case of the example authored by you). Anything else seems to be overkill for me.

@chalin, does that sound reasonable for you?

[chalin]

Thank you for the thorough investigation and detailed description.

@chalin, does that sound reasonable for you?

Yes.

[deining]

This issue was addressed with PR #1280. With this PR in place, the offending code given in the initial post can now be used as-is and works out of the box. A warning is issued, though, indicating to the user that duplicate language assignment was detected. In the case of the shortcode snippet given above, the following warning is presented:

WARN 2022/10/14 09:20:28 Tabpane on page 'Docsy Shortcodes': duplicate language 'console' detected, disabling persistance of language to avoid multiple tab display.

PR #1280 also addresses the styling issue mentioned above.