Textbox and Code Component Blur/Focus Fixes (#6323)

* focus and blur events

* format

* add changeset

* fixes

* fixes

* format

---------

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

.changeset/ready-dancers-camp.md

@@ -0,0 +1,7 @@
+---
+"@gradio/code": patch
+"@gradio/textbox": patch
+"gradio": patch
+---
+
+fix:Textbox and Code Component Blur/Focus Fixes

gradio/components/code.py

@@ -36,7 +36,12 @@ class Code(Component):
         None,
     ]
 
-    EVENTS = [Events.change, Events.input]
+    EVENTS = [
+        Events.change,
+        Events.input,
+        Events.focus,
+        Events.blur,
+    ]
 
     def __init__(
         self,

js/code/Index.svelte

@@ -21,6 +21,8 @@
 	export let gradio: Gradio<{
 		change: typeof value;
 		input: never;
+		blur: never;
+		focus: never;
 	}>;
 	export let value = "";
 	export let value_is_output = false;
@@ -74,6 +76,14 @@
 	{:else}
 		<Widget {language} {value} />
 
-		<Code bind:value {language} {lines} {dark_mode} readonly={!interactive} />
+		<Code
+			bind:value
+			{language}
+			{lines}
+			{dark_mode}
+			readonly={!interactive}
+			on:blur={() => gradio.dispatch("blur")}
+			on:focus={() => gradio.dispatch("focus")}
+		/>
 	{/if}
 </Block>

js/code/shared/Code.svelte

@@ -28,7 +28,11 @@
 	export let readonly = false;
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
 
-	const dispatch = createEventDispatcher<{ change: string }>();
+	const dispatch = createEventDispatcher<{
+		change: string;
+		blur: undefined;
+		focus: undefined;
+	}>();
 	let lang_extension: Extension | undefined;
 	let element: HTMLDivElement;
 	let view: EditorView;
@@ -63,10 +67,21 @@
 	}
 
 	function createEditorView(): EditorView {
-		return new EditorView({
+		const editorView = new EditorView({
 			parent: element,
 			state: createEditorState(value)
 		});
+		editorView.dom.addEventListener("focus", handleFocus, true);
+		editorView.dom.addEventListener("blur", handleBlur, true);
+		return editorView;
+	}
+
+	function handleFocus(): void {
+		dispatch("focus");
+	}
+
+	function handleBlur(): void {
+		dispatch("blur");
 	}
 
 	function getGutterLineHeight(_view: EditorView): string | null {

js/textbox/shared/Textbox.svelte

@@ -64,6 +64,9 @@
 		}
 	}
 	afterUpdate(() => {
+		if (autofocus) {
+			el.focus();
+		}
 		if (can_scroll && autoscroll) {
 			scroll();
 		}