UI stuck caused by the 'selected' of DataFrame not being reset (#3916)

* dataframe error fix

* changelog

* demo launch fix

CHANGELOG.md

@@ -6,6 +6,7 @@
 No changes to highlight.
 
 ## Bug Fixes:
+- Fix the issue of the UI stuck caused by the 'selected' of DataFrame not being reset. by [@tomchang25](https://github.com/tomchang25) in [PR 3916](https://github.com/gradio-app/gradio/pull/3916).
 - Fix issue where `gr.Video()` would not work inside a `gr.Tab()` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3891](https://github.com/gradio-app/gradio/pull/3891)
 - Fixed issue with old_value check in File. by [@tomchang25](https://github.com/tomchang25) in [PR 3859](https://github.com/gradio-app/gradio/pull/3859).
 - Fixed bug where all bokeh plots appeared in the same div by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3896](https://github.com/gradio-app/gradio/pull/3896)

demo/dataframe_block-ui-test/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: dataframe_block-ui-test"]}, {"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", "    count = gr.Slider(minimum=1, maximum=10, step=1, label=\"count\")\n", "    data = gr.DataFrame(\n", "        headers=[\"A\", \"B\"], col_count=(2, \"fixed\"), type=\"array\", interactive=True\n", "    )\n", "    btn = gr.Button(value=\"click\")\n", "    btn.click(\n", "        fn=lambda cnt: [[str(2 * i), str(2 * i + 1)] for i in range(int(cnt))],\n", "        inputs=[count],\n", "        outputs=[data],\n", "    )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dataframe_block-ui-test/run.py

@@ -0,0 +1,15 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    count = gr.Slider(minimum=1, maximum=10, step=1, label="count")
+    data = gr.DataFrame(
+        headers=["A", "B"], col_count=(2, "fixed"), type="array", interactive=True
+    )
+    btn = gr.Button(value="click")
+    btn.click(
+        fn=lambda cnt: [[str(2 * i), str(2 * i + 1)] for i in range(int(cnt))],
+        inputs=[count],
+        outputs=[data],
+    )
+
+demo.launch()

js/table/src/Table.svelte

@@ -22,6 +22,8 @@
 	export let editable = true;
 	export let wrap: boolean = false;
 
+	let selected: false | string = false;
+
 	$: {
 		if (values && !Array.isArray(values)) {
 			headers = values.headers;
@@ -29,10 +31,10 @@
 				values.data.length === 0
 					? [Array(headers.length).fill("")]
 					: values.data;
+			selected = false;
 		} else if (values === null) {
 			values = [Array(headers.length).fill("")];
-		} else {
-			values = values;
+			selected = false;
 		}
 	}
 
@@ -42,7 +44,6 @@
 	}>();
 
 	let editing: false | string = false;
-	let selected: false | string = false;
 	$: {
 		if (selected !== false) {
 			const loc = selected.split("-");