[Tab Navigation] Programmatically select tabs

[ledex]

Describe the feature request This feature would allow the current tab to be programmatically selected based on the state of the application.

Describe the use case This feature has many use cases and has been implemented by other UI-libaries.

In the example below, many tabs are disabled since the event is dropped and only the selection filter can be displayed. Without this feature, the first tab is always selected, even if it's disabled.

Describe alternatives you've considered Our current workaround is that we have a ref to the "Selection Filter" tab (from the example above) and we conditionally click on the ref.

if (event.status === "DROPPED") {
    sfTab.current.click();
}

Additional context MUI i.e. allows to set the index of the initially selected tab as documented here.

[tshimber]

@ledex hi! where's no info, which version of Scale do you use, would be helpful. anyway please update to latest version. in this case:

1) disabled tabs shouldn't got selected. I've checked it in code and tested it: the first enabled tab is getting selected on start.

2) considering concrete tab to select: this feature is supported as well. to use it, you need to put 'selected' on the tab header, which should be selected on start. this is not obvious, so we meight add it to the story book. thus adding additional tab-index-to-select prop seems excessing.

please, leave a feedback if it works for you.

[tshimber]

example 1: first tab is disabled

<scale-tab-nav>
      <scale-tab-header disabled slot="tab">General</scale-tab-header>
      <scale-tab-panel slot="panel">
        Freegan kinfolk farm-to-table humblebrag cred…
      </scale-tab-panel>
      <scale-tab-header slot="tab">Usage</scale-tab-header>
      <scale-tab-panel slot="panel">
        Bespoke austin pork belly yuccie pop-up. Before they sold out…
      </scale-tab-panel>
      <scale-tab-header slot="tab">Style</scale-tab-header>
      <scale-tab-panel slot="panel">
        Biodiesel chia af hoodie tumeric bespoke letterpress…
      </scale-tab-panel>
      <scale-tab-header slot="tab">Code</scale-tab-header>
      <scale-tab-panel slot="panel">
        Asymmetrical tattooed chia, banh mi blog microdosing…
      </scale-tab-panel>
    </scale-tab-nav>

looks so:

[tshimber]

example 2: first tab is disabled, 3d tab is selected

<scale-tab-nav>
      <scale-tab-header disabled slot="tab">General</scale-tab-header>
      <scale-tab-panel slot="panel">
        Freegan kinfolk farm-to-table humblebrag cred…
      </scale-tab-panel>
      <scale-tab-header slot="tab">Usage</scale-tab-header>
      <scale-tab-panel slot="panel">
        Bespoke austin pork belly yuccie pop-up. Before they sold out…
      </scale-tab-panel>
      <scale-tab-header selected slot="tab">Style</scale-tab-header>
      <scale-tab-panel slot="panel">
        Biodiesel chia af hoodie tumeric bespoke letterpress…
      </scale-tab-panel>
      <scale-tab-header slot="tab">Code</scale-tab-header>
      <scale-tab-panel slot="panel">
        Asymmetrical tattooed chia, banh mi blog microdosing…
      </scale-tab-panel>
    </scale-tab-nav>

looks so:

[ledex]

Hi @tshimber! I'm using Scale version 3.0.0-beta.151. Maybe this is not a feature but a bug. I think the problem only exists when tabs are programatically disabled or enabled. Selecting the tab afterwards does not work.