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

3 files changed, 11 insertions, 4 deletions

diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index b947cbec..ccc8344a 100644
--- a/javascript/edit-attention.js
+++ b/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)

 });

diff --git a/javascript/extensions.js b/javascript/extensions.js
index 59179ca6..ac6e35b9 100644
--- a/javascript/extensions.js
+++ b/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()

 }

diff --git a/javascript/ui.js b/javascript/ui.js
index ecf97cb3..954beadd 100644
--- a/javascript/ui.js
+++ b/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);
+}