Allow empty value in gr.Number

.changeset/deep-teams-jump.md

@@ -0,0 +1,6 @@
+---
+"@gradio/number": patch
+"gradio": patch
+---
+
+fix:Allow empty value in gr.Number 

gradio/components/number.py

@@ -121,12 +121,14 @@ def preprocess(self, payload: float | None) -> float | int | None:
         """
         if payload is None:
             return None
-        elif self.minimum is not None and payload < self.minimum:
+
+        if self.minimum is not None and payload < self.minimum:
             raise Error(f"Value {payload} is less than minimum value {self.minimum}.")
         elif self.maximum is not None and payload > self.maximum:
             raise Error(
                 f"Value {payload} is greater than maximum value {self.maximum}."
             )
+
         return self._round_to_precision(payload, self.precision)
 
     def postprocess(self, value: float | int | None) -> float | int | None:

js/number/Index.svelte

@@ -3,7 +3,7 @@
 	import { Block, BlockTitle } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import { afterUpdate, tick } from "svelte";
+	import { afterUpdate, tick, onMount } from "svelte";
 
 	export let gradio: Gradio<{
 		change: never;
@@ -21,7 +21,7 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let value = 0;
+	export let value: number | null = 0;
 	export let show_label: boolean;
 	export let minimum: number | undefined = undefined;
 	export let maximum: number | undefined = undefined;
@@ -31,13 +31,17 @@
 	export let interactive: boolean;
 
 	function handle_change(): void {
-		if (!isNaN(value) && value !== null) {
+		if (!isNaN(parseInt(input_value)) && value !== null) {
+			value = parseInt(input_value);
 			gradio.dispatch("change");
 			if (!value_is_output) {
 				gradio.dispatch("input");
 			}
 		}
 	}
+
+	$: input_value = value === null ? "" : value.toString();
+
 	afterUpdate(() => {
 		value_is_output = false;
 	});
@@ -46,11 +50,11 @@
 		await tick();
 		if (e.key === "Enter") {
 			e.preventDefault();
+			handle_change();
 			gradio.dispatch("submit");
 		}
 	}
 
-	$: value, handle_change();
 	$: disabled = !interactive;
 </script>
 
@@ -73,11 +77,13 @@
 		<BlockTitle {show_label} {info}>{label}</BlockTitle>
 		<input
 			aria-label={label}
-			type="number"
-			bind:value
+			type="text"
+			bind:value={input_value}
 			min={minimum}
 			max={maximum}
 			{step}
+			on:change={handle_change}
+			on:input={handle_change}
 			on:keypress={handle_keypress}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}
@@ -96,7 +102,7 @@
 		border: var(--input-border-width) solid var(--input-border-color);
 		border-radius: var(--input-radius);
 	}
-	input[type="number"] {
+	input[type="text"] {
 		display: block;
 		position: relative;
 		outline: none !important;

js/number/Number.stories.svelte

@@ -17,6 +17,13 @@
 	}}
 />
 
+<Story
+	name="Number with empty value"
+	args={{
+		value: null
+	}}
+/>
+
 <Story
 	name="Number with step of 10"
 	args={{