Fix render trigger (#10212)

* changes

* add changeset

* changes

* Update gradio/renderable.py

Co-authored-by: Abubakar Abid <[email protected]>

---------

Co-authored-by: Ali Abid <[email protected]>
Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>

.changeset/evil-walls-look.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix render trigger

demo/render_tests/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_tests"]}, {"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": ["from datetime import datetime\n", "\n", "import gradio as gr\n", "\n", "def update_log():\n", "    return datetime.now().timestamp()\n", "\n", "def get_target(evt: gr.EventData):\n", "    return evt.target\n", "\n", "def get_select_index(evt: gr.SelectData):\n", "    return evt.index\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Textbox(value=update_log, every=0.2, label=\"Time\")\n", "    \n", "    slider = gr.Slider(1, 10, step=1)\n", "    @gr.render(inputs=[slider])\n", "    def show_log(s):\n", "        with gr.Row():\n", "            for i in range(s):\n", "                gr.Textbox(value=update_log, every=0.2, label=f\"Render {i + 1}\")\n", "\n", "    with gr.Row():\n", "        selected_btn = gr.Textbox(label=\"Selected Button\")\n", "        selected_chat = gr.Textbox(label=\"Selected Chat\")\n", "    @gr.render(inputs=[slider])\n", "    def show_buttons(s):\n", "        with gr.Row():\n", "            with gr.Column():\n", "                for i in range(s):\n", "                    btn = gr.Button(f\"Button {i + 1}\")\n", "                    btn.click(get_target, None, selected_btn)\n", "            chatbot = gr.Chatbot([[\"Hello\", \"Hi\"], [\"How are you?\", \"I'm good.\"]])\n", "            chatbot.select(get_select_index, None, selected_chat)\n", "\n", "    selectable_chat = gr.Chatbot([[\"chat1\", \"chat2\"], [\"chat3\", \"chat4\"]])\n", " \n", "    @gr.render(triggers=[selectable_chat.select])\n", "    def show_selected_chat(selection: gr.SelectData):\n", "        gr.Textbox(label=\"Trigger Index\", value=selection.index)\n", "\n", "    @gr.render()\n", "    def examples_in_interface():\n", "        gr.Interface(lambda x:x, gr.Textbox(label=\"input\"), gr.Textbox(), examples=[[\"test\"]])\n", "\n", "    @gr.render()\n", "    def examples_in_blocks():\n", "        a = gr.Textbox(label=\"little textbox\")\n", "        gr.Examples([[\"abc\"], [\"def\"]], [a])\n", "\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: render_tests"]}, {"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": ["from datetime import datetime\n", "\n", "import gradio as gr\n", "\n", "def update_log():\n", "    return datetime.now().timestamp()\n", "\n", "def get_target(evt: gr.EventData):\n", "    return evt.target\n", "\n", "def get_select_index(evt: gr.SelectData):\n", "    return evt.index\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Textbox(value=update_log, every=0.2, label=\"Time\")\n", "    \n", "    slider = gr.Slider(1, 10, step=1)\n", "    @gr.render(inputs=[slider])\n", "    def show_log(s):\n", "        with gr.Row():\n", "            for i in range(s):\n", "                gr.Textbox(value=update_log, every=0.2, label=f\"Render {i + 1}\")\n", "\n", "    slider2 = gr.Slider(1, 10, step=1, label=\"Box Count\")\n", "    btn = gr.Button(\"Create Boxes\")\n", "    @gr.render(inputs=[slider2], triggers=[btn.click])\n", "    def show_log_2(s):\n", "        for i in range(s):\n", "            gr.Textbox(value=str(i), label=f\"Count {i + 1}\")\n", "\n", "    with gr.Row():\n", "        selected_btn = gr.Textbox(label=\"Selected Button\")\n", "        selected_chat = gr.Textbox(label=\"Selected Chat\")\n", "    @gr.render(inputs=[slider])\n", "    def show_buttons(s):\n", "        with gr.Row():\n", "            with gr.Column():\n", "                for i in range(s):\n", "                    btn = gr.Button(f\"Button {i + 1}\")\n", "                    btn.click(get_target, None, selected_btn)\n", "            chatbot = gr.Chatbot([[\"Hello\", \"Hi\"], [\"How are you?\", \"I'm good.\"]])\n", "            chatbot.select(get_select_index, None, selected_chat)\n", "\n", "    selectable_chat = gr.Chatbot([[\"chat1\", \"chat2\"], [\"chat3\", \"chat4\"]])\n", " \n", "    @gr.render(triggers=[selectable_chat.select])\n", "    def show_selected_chat(selection: gr.SelectData):\n", "        gr.Textbox(label=\"Trigger Index\", value=selection.index)\n", "\n", "    @gr.render()\n", "    def examples_in_interface():\n", "        gr.Interface(lambda x:x, gr.Textbox(label=\"input\"), gr.Textbox(), examples=[[\"test\"]])\n", "\n", "    @gr.render()\n", "    def examples_in_blocks():\n", "        a = gr.Textbox(label=\"little textbox\")\n", "        gr.Examples([[\"abc\"], [\"def\"]], [a])\n", "\n", "\n", "if __name__ == '__main__':\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/render_tests/run.py

@@ -21,6 +21,13 @@ def show_log(s):
             for i in range(s):
                 gr.Textbox(value=update_log, every=0.2, label=f"Render {i + 1}")
 
+    slider2 = gr.Slider(1, 10, step=1, label="Box Count")
+    btn = gr.Button("Create Boxes")
+    @gr.render(inputs=[slider2], triggers=[btn.click])
+    def show_log_2(s):
+        for i in range(s):
+            gr.Textbox(value=str(i), label=f"Count {i + 1}")
+
     with gr.Row():
         selected_btn = gr.Textbox(label="Selected Button")
         selected_chat = gr.Textbox(label="Selected Chat")

gradio/renderable.py

@@ -145,8 +145,9 @@ def show_split(text):
         ]
 
     if new_triggers:
-        for trigger in new_triggers:  # type: ignore
-            trigger.callback(trigger.__self__)  # type: ignore
+        for trigger in new_triggers:
+            if trigger.callback:
+                trigger.callback(trigger.__self__)  # type: ignore
 
     def wrapper_function(fn):
         Renderable(

js/spa/test/render_tests.spec.ts

@@ -1,5 +1,12 @@
 import { test, expect } from "@self/tootils";
 
+test("Test button.click listener works in render", async ({ page }) => {
+	const slider = page.getByLabel("number input for Box Count");
+	await slider.fill("6");
+	await page.getByRole("button", { name: "Create Boxes" }).click();
+	await expect(page.getByLabel("Count 4")).toHaveValue("3");
+});
+
 test("Test every= works in render", async ({ page }) => {
 	const timebox = page.getByLabel("Time");
 	const box_1 = page.getByLabel("Render 1");