TextBox can not get value, if value is filled by javascript

[butaixianran]

Describe the bug

At python side, TextBox can not get value, if the value is filled by javascript.

But if I type value into that textbox, python side can get value. I also tried to trigger change event in javascript, but python side still takes no action.

Is it a bug or it is designed in this way?
How can I make python side get the value filled by javascript?

Really need a solution here, thanks.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

At Python side:
prompt = gr.Textbox(label="Prompt", lines=3, value="", elem_id="pt_prompt")

At javascript side:

let pt_prompt = gradioApp().getElementById("pt_prompt").getElementsByTagName("textarea")[0];
pt_prompt.value = "Som text";

The value is filled into textbox just fine with javascript. But python side can not get it. Unless I manually click into that textbox and type something.

Screenshot

No response

Logs

No log is needed here.

System Info

Windows 11, chrome latest, gradio 3.16.2

Severity

annoying

[butaixianran]

Also, is there a way to trigger html element's event at python side manually? If gradio won't trigger it automatically.

[pngwn]

This is expected because of the frontend's reactivity works, it is not a bug.

In order for the changes to propagate, you need to dispatch an input event on the element too.

If you do this in your JavaScript then it should work:

const el = document
  .getElementById("pt_prompt")
  .getElementsByTagName("textarea")[0];
const input_event = new Event('input');

el.value = 'hello friends';
el.dispatchEvent(input_event)

This isn't recommended and there are no guarantees it will continue to work as we do not support this as official API but it should work for the foreseeable future.