update sending input event in java script to not cause exception in browser https://github.com/gradio-app/gradio/issues/2981

javascript/edit-attention.js

@@ -69,7 +69,6 @@ addEventListener('keydown', (event) => {
 		target.selectionStart = selectionStart;
 		target.selectionEnd = selectionEnd;
 	}
-	// Since we've modified a Gradio Textbox component manually, we need to simulate an `input` DOM event to ensure its
-	// internal Svelte data binding remains in sync.
-	target.dispatchEvent(new Event("input", { bubbles: true }));
+
+	updateInput(target)
 });

javascript/extensions.js

@@ -29,7 +29,7 @@ function install_extension_from_index(button, url){
 
     textarea = gradioApp().querySelector('#extension_to_install textarea')
     textarea.value = url
-	textarea.dispatchEvent(new Event("input", { bubbles: true }))
+    updateInput(textarea)
 
     gradioApp().querySelector('#install_extension_button').click()
 }

javascript/ui.js

@@ -278,3 +278,11 @@ function restart_reload(){
 
     return []
 }
+
+// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
+// will only visible on web page and not sent to python.
+function updateInput(target){
+	let e = new Event("input", { bubbles: true })
+	Object.defineProperty(e, "target", {value: target})
+	target.dispatchEvent(e);
+}