Fix .select for gr.Image, gr.CheckboxGroup (#6942)

* fix .select for Image, CheckboxGroup

* add changeset

* generate notebook

* fix

* add changeset

* fixes

* add changeset

---------

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

.changeset/bright-ravens-listen.md

@@ -0,0 +1,7 @@
+---
+"@gradio/checkboxgroup": patch
+"@gradio/image": patch
+"gradio": patch
+---
+
+fix:Fix `.select` for `gr.Image`, `gr.CheckboxGroup`

demo/image_component_events/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_component_events"]}, {"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.Row():\n", "        with gr.Column():\n", "            input_img = gr.Image(type=\"filepath\", label=\"Input Image\", sources=[\"upload\", \"clipboard\"])\n", "        with gr.Column():\n", "            output_img = gr.Image(type=\"filepath\", label=\"Output Image\", sources=[\"upload\", \"clipboard\"])\n", "        with gr.Column():\n", "            num_change = gr.Number(label=\"# Change Events\", value=0)\n", "            num_load = gr.Number(label=\"# Upload Events\", value=0)\n", "            num_change_o = gr.Number(label=\"# Change Events Output\", value=0)\n", "            num_clear = gr.Number(label=\"# Clear Events\", value=0)\n", "        input_img.upload(lambda s, n: (s, n + 1), [input_img, num_load], [output_img, num_load])\n", "        input_img.change(lambda n: n + 1, num_change, num_change)\n", "        input_img.clear(lambda n: n + 1, num_clear, num_clear)\n", "        output_img.change(lambda n: n + 1, num_change_o, num_change_o)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_component_events"]}, {"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", "def test_select_is_defined(n, evt: gr.SelectData):\n", "    assert isinstance(evt.index, list)\n", "    assert isinstance(evt.index[0], int)\n", "    return n + 1\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_img = gr.Image(type=\"filepath\", label=\"Input Image\", sources=[\"upload\", \"clipboard\"])\n", "        with gr.Column():\n", "            output_img = gr.Image(type=\"filepath\", label=\"Output Image\", sources=[\"upload\", \"clipboard\"])\n", "        with gr.Column():\n", "            num_change = gr.Number(label=\"# Change Events\", value=0)\n", "            num_load = gr.Number(label=\"# Upload Events\", value=0)\n", "            num_change_o = gr.Number(label=\"# Change Events Output\", value=0)\n", "            num_clear = gr.Number(label=\"# Clear Events\", value=0)\n", "            num_select = gr.Number(label=\"# Select Events\", value=0)\n", "        input_img.upload(lambda s, n: (s, n + 1), [input_img, num_load], [output_img, num_load])\n", "        input_img.change(lambda n: n + 1, num_change, num_change)\n", "        input_img.clear(lambda n: n + 1, num_clear, num_clear)\n", "        output_img.change(lambda n: n + 1, num_change_o, num_change_o)\n", "        output_img.select(test_select_is_defined, num_select, num_select)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/image_component_events/run.py

@@ -1,5 +1,11 @@
 import gradio as gr
 
+def test_select_is_defined(n, evt: gr.SelectData):
+    assert isinstance(evt.index, list)
+    assert isinstance(evt.index[0], int)
+    return n + 1
+
+
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
@@ -11,10 +17,12 @@
             num_load = gr.Number(label="# Upload Events", value=0)
             num_change_o = gr.Number(label="# Change Events Output", value=0)
             num_clear = gr.Number(label="# Clear Events", value=0)
+            num_select = gr.Number(label="# Select Events", value=0)
         input_img.upload(lambda s, n: (s, n + 1), [input_img, num_load], [output_img, num_load])
         input_img.change(lambda n: n + 1, num_change, num_change)
         input_img.clear(lambda n: n + 1, num_clear, num_clear)
         output_img.change(lambda n: n + 1, num_change_o, num_change_o)
+        output_img.select(test_select_is_defined, num_select, num_select)
 
 if __name__ == "__main__":
     demo.launch()

gradio/events.py

@@ -116,7 +116,7 @@ def __init__(self, target: Block | None, data: Any):
         """
         The value of the selected item.
         """
-        self.selected: bool = data.get("_selected", True)
+        self.selected: bool = data.get("selected", True)
         """
         True if the item was selected, False if deselected.
         """

js/app/test/image_component_events.spec.ts

@@ -53,7 +53,7 @@ test("Image drag-to-upload uploads image successfuly.", async ({ page }) => {
 	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
 });
 
-test.skip("Image copy from clipboard dispatches upload event.", async ({
+test.skip("Image copy from clipboard dispatches upload event", async ({
 	page
 }) => {
 	// Need to make request from inside browser for blob to be formatted correctly
@@ -97,3 +97,19 @@ test("Image paste to clipboard via the Upload component works", async ({
 	await page.getByText("Paste from clipboard").click();
 	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
 });
+
+test("Image select and change events work as expected.", async ({ page }) => {
+	await page.getByRole("button", { name: "Drop Image Here" }).click();
+	const uploader = await page.locator("input[type=file]");
+	const change_output_counter = await page.getByLabel("# Change Events Output");
+	const select_event_counter = await page.getByLabel("# Select Events");
+
+	await uploader.setInputFiles("./test/files/cheetah1.jpg");
+	await expect(change_output_counter).toHaveValue("1");
+	await expect(select_event_counter).toHaveValue("0");
+
+	const output_image = await page.locator(".selectable");
+	await output_image.click();
+	await expect(change_output_counter).toHaveValue("1");
+	await expect(select_event_counter).toHaveValue("1");
+});

js/checkboxgroup/Index.svelte

@@ -32,7 +32,6 @@
 		} else {
 			value = [...value, choice];
 		}
-
 		gradio.dispatch("input");
 	}
 

js/image/shared/utils.ts

@@ -1,7 +1,12 @@
 export const get_coordinates_of_clicked_image = (
 	evt: MouseEvent
 ): [number, number] | null => {
-	let image = evt.currentTarget as HTMLImageElement;
+	let image;
+	if (evt.currentTarget instanceof Element) {
+		image = evt.currentTarget.querySelector("img") as HTMLImageElement;
+	} else {
+		return [NaN, NaN];
+	}
 
 	const imageRect = image.getBoundingClientRect();
 	const xScale = image.naturalWidth / imageRect.width;