Disable the submit button and enter-key submit when the text is empty (…

…#9583) * Disable the submit button and enter-key submit when the text is empty * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Oct 8, 2024 · b92a762 · b92a762
1 parent 4ec2feb
commit b92a762
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/.changeset/smooth-fans-hide.md b/.changeset/smooth-fans-hide.md
@@ -0,0 +1,7 @@
+---
+"@gradio/multimodaltextbox": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Disable the submit button and enter-key submit when the text is empty
diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -68,6 +68,7 @@
 
 	$: if (value === null) value = { text: "", files: [] };
 	$: value, el && lines !== max_lines && resize(el, lines, max_lines);
+	$: can_submit = value.text !== "";
 
 	const dispatch = createEventDispatcher<{
 		change: typeof value;
@@ -127,15 +128,19 @@
 		await tick();
 		if (e.key === "Enter" && e.shiftKey && lines > 1) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		} else if (
 			e.key === "Enter" &&
 			!e.shiftKey &&
 			lines === 1 &&
 			max_lines >= 1
 		) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		}
 	}
 
@@ -341,6 +346,7 @@
 					class="submit-button"
 					class:padded-button={submit_btn !== true}
 					on:click={handle_submit}
+					disabled={!can_submit}
 				>
 					{#if submit_btn === true}
 						<Send />
@@ -457,6 +463,13 @@
 		box-shadow: var(--button-shadow-active);
 	}
 
+	.stop-button:disabled,
+	.upload-button:disabled,
+	.submit-button:disabled {
+		background: var(--button-secondary-background-fill);
+		cursor: initial;
+	}
+
 	.submit-button :global(svg) {
 		height: 22px;
 		width: 22px;

diff --git a/js/textbox/shared/Textbox.svelte b/js/textbox/shared/Textbox.svelte
@@ -41,6 +41,7 @@
 	const show_textbox_border = !submit_btn;
 
 	$: value, el && lines !== max_lines && resize({ target: el });
+	$: can_submit = value !== "";
 
 	$: if (value === null) value = "";
 
@@ -112,15 +113,19 @@
 		await tick();
 		if (e.key === "Enter" && e.shiftKey && lines > 1) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		} else if (
 			e.key === "Enter" &&
 			!e.shiftKey &&
 			lines === 1 &&
 			max_lines >= 1
 		) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		}
 	}
 
@@ -299,6 +304,7 @@
 				class="submit-button"
 				class:padded-button={submit_btn !== true}
 				on:click={handle_submit}
+				disabled={!can_submit}
 			>
 				{#if submit_btn === true}
 					<Send />
@@ -440,6 +446,11 @@
 	.submit-button:active {
 		box-shadow: var(--button-shadow-active);
 	}
+	.stop-button:disabled,
+	.submit-button:disabled {
+		background: var(--button-secondary-background-fill);
+		cursor: pointer;
+	}
 	.submit-button :global(svg) {
 		height: 22px;
 		width: 22px;