Fix value synchronisation issue in gr.Dataframe

.changeset/wet-rockets-bow.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Fix value synchronisation issue in gr.Dataframe

js/dataframe/shared/EditableCell.svelte

@@ -21,7 +21,6 @@
 		right: string;
 		display: boolean;
 	}[];
-	export let clear_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
 	export let is_static = false;
@@ -44,7 +43,6 @@
 	let is_expanded = false;
 
 	export let el: HTMLInputElement | null;
-	$: _value = value;
 
 	function truncate_text(
 		text: string | number,
@@ -72,10 +70,6 @@
 		: display_content;
 
 	function use_focus(node: HTMLInputElement): any {
-		if (clear_on_focus) {
-			_value = "";
-		}
-
 		requestAnimationFrame(() => {
 			node.focus();
 		});
@@ -95,7 +89,6 @@
 	function handle_keydown(event: KeyboardEvent): void {
 		if (event.key === "Enter") {
 			if (edit) {
-				value = _value;
 				dispatch("blur");
 			} else if (!header) {
 				is_expanded = !is_expanded;
@@ -118,7 +111,7 @@
 		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
-		bind:value={_value}
+		bind:value
 		class:header
 		tabindex="-1"
 		on:blur={handle_blur}

js/dataframe/shared/Table.svelte

@@ -128,7 +128,6 @@
 	}>();
 
 	$: editing = $df_state.ui_state.editing;
-	let clear_on_focus = false;
 	$: header_edit = $df_state.ui_state.header_edit;
 	$: selected_header = $df_state.ui_state.selected_header;
 	$: active_cell_menu = $df_state.ui_state.active_cell_menu;
@@ -306,7 +305,6 @@
 		event.preventDefault();
 		event.stopPropagation();
 		if (!editable) return;
-		clear_on_focus = false;
 		df_actions.set_editing(false);
 		df_actions.handle_header_click(col, editable);
 		parent.focus();
@@ -523,7 +521,6 @@
 		editable,
 		show_row_numbers,
 		get_data_at,
-		clear_on_focus,
 		selected_cells,
 		parent_element: parent
 	});
@@ -941,7 +938,6 @@
 								{line_breaks}
 								datatype={Array.isArray(datatype) ? datatype[j] : datatype}
 								{editing}
-								{clear_on_focus}
 								{max_chars}
 								{root}
 								{editable}

js/dataframe/shared/TableCell.svelte

@@ -46,7 +46,6 @@
 	export let line_breaks: boolean;
 	export let datatype: Datatype;
 	export let editing: [number, number] | false;
-	export let clear_on_focus: boolean;
 	export let max_chars: number | undefined;
 	export let root: string;
 	export let editable: boolean;
@@ -122,17 +121,13 @@
 			{is_static}
 			edit={editing && editing[0] === index && editing[1] === j}
 			{datatype}
-			on:blur={() => {
-				clear_on_focus = false;
-			}}
 			on:focus={() => {
 				const row = index;
 				const col = j;
 				if (!selected_cells.some(([r, c]) => r === row && c === col)) {
 					selected_cells = [[row, col]];
 				}
 			}}
-			{clear_on_focus}
 			{root}
 			{max_chars}
 			{i18n}

js/dataframe/shared/context/selection_context.ts

@@ -23,7 +23,6 @@ export type SelectionContext = {
 	editable: boolean;
 	show_row_numbers: boolean;
 	get_data_at: (row: number, col: number) => string | number;
-	clear_on_focus: boolean;
 	selected_cells: [number, number][];
 	parent_element: HTMLElement;
 	actions: {
@@ -50,7 +49,6 @@ export function create_selection_context(
 
 			if (context.show_row_numbers && col === -1) return;
 
-			context.clear_on_focus = false;
 			context.df_actions.set_active_cell_menu(null);
 			context.df_actions.set_active_header_menu(null);
 			context.df_actions.set_selected_header(false);