Fix programmatic tab selection (#7916)

* changes * changes * add changeset * changes * add changeset * changes * add changeset --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Apr 11, 2024 · 52298db · 52298db
1 parent aeea884
commit 52298db
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/.changeset/many-snakes-glow.md b/.changeset/many-snakes-glow.md
@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:Fix programmatic tab selection
diff --git a/demo/tabs/run.ipynb b/demo/tabs/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabs"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.Tab(\"Set 1\"):\n", "            with gr.Tabs() as tabs_1:\n", "                tabset_1 = []\n", "                textset_1 = []\n", "                for i in range(10):\n", "                    with gr.Tab(f\"Tab {i+1}\") as tab:\n", "                        gr.Markdown(f\"Text {i+1}!\")\n", "                        textbox = gr.Textbox(label=f\"Input {i+1}\")\n", "                        tabset_1.append(tab)\n", "                        textset_1.append(textbox)\n", "        with gr.Tab(\"Set 2\"):\n", "            tabset_2 = []\n", "            textset_2 = []\n", "            for i in range(10):\n", "                with gr.Tab(f\"Tab {i+11}\") as tab:\n", "                    gr.Markdown(f\"Text {i+11}!\")\n", "                    textbox = gr.Textbox(label=f\"Input {i+11}\")\n", "                    tabset_2.append(tab)\n", "                    textset_2.append(textbox)\n", "\n", "        for text1, text2 in zip(textset_1, textset_2):\n", "            text1.submit(lambda x: x, text1, text2)\n", "\n", "    selected = gr.Textbox(label=\"Selected Tab\")\n", "    with gr.Row():\n", "        hide_odd_btn = gr.Button(\"Hide Odd Tabs\")\n", "        show_all_btn = gr.Button(\"Show All Tabs\")\n", "        make_even_uninteractive_btn = gr.Button(\"Make Even Tabs Uninteractive\")\n", "        make_all_interactive_btn = gr.Button(\"Make All Tabs Interactive\")\n", "\n", "    hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", "    show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", "    make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", "    make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", "\n", "    def get_selected_index(evt: gr.SelectData):\n", "        return evt.value\n", "    gr.on([tab.select for tab in tabset_1 + tabset_2], get_selected_index, outputs=selected)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabs"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.Tab(\"Set 1\"):\n", "            with gr.Tabs(selected=\"a3\") as tabs_1:\n", "                tabset_1 = []\n", "                textset_1 = []\n", "                for i in range(10):\n", "                    with gr.Tab(f\"Tab {i+1}\", id=f\"a{i+1}\") as tab:\n", "                        gr.Markdown(f\"Text {i+1}!\")\n", "                        textbox = gr.Textbox(label=f\"Input {i+1}\")\n", "                        tabset_1.append(tab)\n", "                        textset_1.append(textbox)\n", "        with gr.Tab(\"Set 2\"):\n", "            tabset_2 = []\n", "            textset_2 = []\n", "            for i in range(10):\n", "                with gr.Tab(f\"Tab {i+11}\") as tab:\n", "                    gr.Markdown(f\"Text {i+11}!\")\n", "                    textbox = gr.Textbox(label=f\"Input {i+11}\")\n", "                    tabset_2.append(tab)\n", "                    textset_2.append(textbox)\n", "\n", "        for text1, text2 in zip(textset_1, textset_2):\n", "            text1.submit(lambda x: x, text1, text2)\n", "\n", "    selected = gr.Textbox(label=\"Selected Tab\")\n", "    with gr.Row():\n", "        hide_odd_btn = gr.Button(\"Hide Odd Tabs\")\n", "        show_all_btn = gr.Button(\"Show All Tabs\")\n", "        make_even_uninteractive_btn = gr.Button(\"Make Even Tabs Uninteractive\")\n", "        make_all_interactive_btn = gr.Button(\"Make All Tabs Interactive\")\n", "    \n", "    select_tab_num = gr.Number(label=\"Select Tab #\", value=1)\n", "\n", "\n", "    hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", "    show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", "    make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", "    make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", "    select_tab_num.submit(lambda x: gr.Tabs(selected=f\"a{x}\"), inputs=select_tab_num, outputs=tabs_1)\n", "\n", "    def get_selected_index(evt: gr.SelectData):\n", "        return evt.value\n", "    gr.on([tab.select for tab in tabset_1 + tabset_2], get_selected_index, outputs=selected)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/tabs/run.py b/demo/tabs/run.py
@@ -3,11 +3,11 @@
 with gr.Blocks() as demo:
     with gr.Tabs():
         with gr.Tab("Set 1"):
-            with gr.Tabs() as tabs_1:
+            with gr.Tabs(selected="a3") as tabs_1:
                 tabset_1 = []
                 textset_1 = []
                 for i in range(10):
-                    with gr.Tab(f"Tab {i+1}") as tab:
+                    with gr.Tab(f"Tab {i+1}", id=f"a{i+1}") as tab:
                         gr.Markdown(f"Text {i+1}!")
                         textbox = gr.Textbox(label=f"Input {i+1}")
                         tabset_1.append(tab)
@@ -31,11 +31,15 @@
         show_all_btn = gr.Button("Show All Tabs")
         make_even_uninteractive_btn = gr.Button("Make Even Tabs Uninteractive")
         make_all_interactive_btn = gr.Button("Make All Tabs Interactive")
+
+    select_tab_num = gr.Number(label="Select Tab #", value=1)
+
 
     hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))
     show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))
     make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))
     make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))
+    select_tab_num.submit(lambda x: gr.Tabs(selected=f"a{x}"), inputs=select_tab_num, outputs=tabs_1)
 
     def get_selected_index(evt: gr.SelectData):
         return evt.value

diff --git a/js/app/src/Render.svelte b/js/app/src/Render.svelte
@@ -62,7 +62,7 @@
 </script>
 
 <RenderComponent
-	id={node.id}
+	_id={node.id}
 	component={node.component}
 	bind:instance={node.instance}
 	bind:value={node.props.value}

diff --git a/js/app/src/RenderComponent.svelte b/js/app/src/RenderComponent.svelte
@@ -16,7 +16,7 @@
 	export let gradio: Gradio;
 	export let elem_id: string;
 	export let elem_classes: string[];
-	export let id: number;
+	export let _id: number;
 
 	const s = (id: number, p: string, v: any): CustomEvent =>
 		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
@@ -32,7 +32,7 @@
 
 				function report(props: string) {
 					return function (propargs: any) {
-						const ev = s(id, props, propargs);
+						const ev = s(_id, props, propargs);
 						target.dispatchEvent(ev);
 					};
 				}

diff --git a/js/app/test/tabs.spec.ts b/js/app/test/tabs.spec.ts
@@ -61,3 +61,15 @@ test("output from one tab to another works", async ({ page }) => {
 	await expect(page.getByLabel("Input 14")).toBeVisible();
 	await expect(page.getByLabel("Input 14")).toHaveValue("hi");
 });
+
+test("programmatic selection works", async ({ page }) => {
+	await expect(page.getByText("Text 1!")).toBeHidden();
+	await expect(page.getByText("Text 3!")).toBeVisible();
+
+	await page.getByLabel("Select Tab #").click();
+	await page.getByLabel("Select Tab #").fill("6");
+	await page.getByLabel("Select Tab #").press("Enter");
+
+	await expect(page.getByText("Text 3!")).toBeHidden();
+	await expect(page.getByText("Text 6!")).toBeVisible();
+});