Store gr.Accordion's open value (#7375)

* store open as writeable val

* add changeset

* add e2e test

* formatting

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/proud-mirrors-remain.md

@@ -0,0 +1,6 @@
+---
+"@gradio/accordion": patch
+"gradio": patch
+---
+
+fix:Store `gr.Accordion`'s `open` value

demo/blocks_flipper/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\"):\n", "        gr.Markdown(\"Look at me...\")\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\", open=False):\n", "        gr.Markdown(\"Look at me...\")\n", "        temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label=\"Slide me\")\n", "        temp_slider.change(lambda x:x, [temp_slider])\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_flipper/run.py

@@ -22,8 +22,10 @@ def flip_image(x):
             image_output = gr.Image()
         image_button = gr.Button("Flip")
 
-    with gr.Accordion("Open for More!"):
+    with gr.Accordion("Open for More!", open=False):
         gr.Markdown("Look at me...")
+        temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label="Slide me")
+        temp_slider.change(lambda x:x, [temp_slider])
 
     text_button.click(flip_text, inputs=text_input, outputs=text_output)
     image_button.click(flip_image, inputs=image_input, outputs=image_output)

js/accordion/Index.svelte

@@ -23,7 +23,7 @@
 		{...loading_status}
 	/>
 
-	<Accordion {label} bind:open>
+	<Accordion {label} initial_open={open}>
 		<Column>
 			<slot />
 		</Column>

js/accordion/shared/Accordion.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
+	import { writable } from "svelte/store";
+
+	export let initial_open = true;
 	export let label = "";
-	export let open = true;
+
+	let open = writable(initial_open);
+
+	const toggle_open = (): void => {
+		open.update((value) => !value);
+	};
 </script>
 
-<button on:click={() => (open = !open)} class="label-wrap" class:open>
+<button on:click={toggle_open} class="label-wrap" class:open={$open}>
 	<span>{label}</span>
-	<span style:transform={open ? "rotate(0)" : "rotate(90deg)"} class="icon">
+	<span style:transform={$open ? "rotate(0)" : "rotate(90deg)"} class="icon">
 		▼
 	</span>
 </button>
-<div style:display={open ? "block" : "none"}>
+<div style:display={$open ? "block" : "none"}>
 	<slot />
 </div>
 

js/app/test/blocks_flipper.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@gradio/tootils";
+
+test("accordion stays open when interacting with the slider", async ({
+	page
+}) => {
+	await page.getByRole("button", { name: "Open for More! ▼" }).click();
+	await page.getByLabel("range slider for Slide me").fill("0.5");
+	await expect(page.getByText("Look at me...")).toBeVisible();
+});