Programmatically selecting tabs is broken

[FurkanGozukara]

Let's say I have below tabs

How can I switch to specific tab when user clicks a button?

So when user clicks load Metadata I can switch back to InstantId tab

Tab index 0 or 1 etc?

gradio==4.21.0

[abidlabs]

Hi @FurkanGozukara this is how its supposed to be done: https://github.com/gradio-app/gradio/issues/2412

However, I just tested this code on the latest version of gradio and its not working. It seems that we've had a regression. Let me categorize the issue appropriately and we'll get it fixed.

cc @hannahblair for visibility

[FurkanGozukara]

yes this didnt work for me

def change_tab(): return gr.Tabs.update(selected=1)

[phihung]

Here a quick example to reproduce

Both initial value with gr.Tabs(selected="b") as tabs and button click are ignored There are some warnings in the UI : Tabs.svelte:84 Attempted to select a non-interactive or hidden tab.

import gradio as gr

def select_c():
    return gr.Tabs(selected="c")

with gr.Blocks() as demo:
    with gr.Tabs(selected="b") as tabs:
        with gr.Tab("A", id="a"):
            gr.Markdown("## A")
        with gr.Tab("B", id="b"):
            gr.Markdown("## B")
        with gr.Tab("C", id="c"):
            gr.Markdown("## C")

    btn = gr.Button("Switch to tab C")
    btn.click(select_c, None, tabs)

demo.launch()

[ThanThoai]

Here a quick example to reproduce

Both initial value with gr.Tabs(selected="b") as tabs and button click are ignored There are some warnings in the UI : Tabs.svelte:84 Attempted to select a non-interactive or hidden tab.

import gradio as gr

def select_c():
    return gr.Tabs(selected="c")

with gr.Blocks() as demo:
    with gr.Tabs(selected="b") as tabs:
        with gr.Tab("A", id="a"):
            gr.Markdown("## A")
        with gr.Tab("B", id="b"):
            gr.Markdown("## B")
        with gr.Tab("C", id="c"):
            gr.Markdown("## C")

    btn = gr.Button("Switch to tab C")
    btn.click(select_c, None, tabs)

demo.launch()

When I downgraded the version to 3.50.2 it worked.

[aliabid94]

taking a look

[sbarman25]

It was working well in 4.21.0, but in 4.25.0 it doesn't. Fyi.

[Shaheerahmadzai]

Here a quick example to reproduce Both initial value with gr.Tabs(selected="b") as tabs and button click are ignored There are some warnings in the UI : Tabs.svelte:84 Attempted to select a non-interactive or hidden tab.

import gradio as gr

def select_c():
    return gr.Tabs(selected="c")

with gr.Blocks() as demo:
    with gr.Tabs(selected="b") as tabs:
        with gr.Tab("A", id="a"):
            gr.Markdown("## A")
        with gr.Tab("B", id="b"):
            gr.Markdown("## B")
        with gr.Tab("C", id="c"):
            gr.Markdown("## C")

    btn = gr.Button("Switch to tab C")
    btn.click(select_c, None, tabs)

demo.launch()

When I downgraded the version to 3.50.2 it worked.

Hi, in this case, we can just switch to the c tab how about another tabs? I want to after each click it chnage the tab, i try defferen ways but infortunitly not working. Can some one help me to do that!

there is my code:

def switch_tab(option): if option == 0: return gr.Tabs(selected=0) elif option == 1: return gr.Tabs(selected=1) elif option == 2: return gr.Tabs(selected=2) else: return gr.Tabs(selected=0) # Default to first tab

with gr.Blocks() as demo: with gr.Tabs() as tabs: with gr.TabItem("Tab 1", id=0): gr.Markdown("You are on Tab 1") with gr.TabItem("Tab 2", id=1): gr.Markdown("You are on Tab 2") with gr.TabItem("Tab 3", id=2): gr.Markdown("You are on Tab 3") with gr.Row(): btn = gr.Button(value="Switch tab") btn.click(switch_tab, inputs=None, outputs=tabs) demo.launch(share=True)

[cornzz]

@aliabid94 this may be related: if you dont explicitly define an id for tabs, the following warning (Tabs.svelte) is printed in the browser console on render and every time you select a tab:

Attempted to select a non-interactive or hidden tab.                              Tabs.svelte:84:11

This is on the latest gradio version. Reproduction: playground link

The change_tab function is called twice per tab click, but if no id is defined it is called a third time with an invalid id (I guess? Without explicit ids the id parameter is just an empty object so not sure how this even works), so tab_to_activate becomes undefined and the warning is printed.