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

This commit is contained in:
AUTOMATIC 2023-01-17 14:15:47 +03:00
parent aede265f1d
commit 38b7186e6e
3 changed files with 11 additions and 4 deletions

View File

@ -69,7 +69,6 @@ addEventListener('keydown', (event) => {
target.selectionStart = selectionStart; target.selectionStart = selectionStart;
target.selectionEnd = selectionEnd; 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. updateInput(target)
target.dispatchEvent(new Event("input", { bubbles: true }));
}); });

View File

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

View File

@ -278,3 +278,11 @@ function restart_reload(){
return [] 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);
}