Add a `Textbox` variant that is single line and supports enter-on-click

[abidlabs]

To make certain kinds of demos easier (chatbot, image generation, etc), it would be great to have a simple Textbox template that only a single line and supports enter-on-click.

See original comment by @altryne here: https://github.com/gradio-app/gradio/issues/2071#issuecomment-1229222821

[ankrgyl]

Are you aware of any workarounds to this in the meantime? I tried using custom Javascript but I think due to shadow DOM issues was not able to reference another element that I want to trigger based on a text change.

[abidlabs]

You should be able to do this by creating a Textbox with lines=1, max_lines=1, and creating a .submit() event trigger. Let me know if that makes sense.

[ankrgyl]

That worked perfectly! Thank you so much.

[altryne]

due to shadow DOM issues was not able to reference another element that I want to trigger based on a text change You can do it like so :

document.querySelector('gradio-app').shadowRoot.querySelector('#some_id')?.click();

[ankrgyl]

Oh excellent, that's very helpful @altryne. Thank you. I was able to work around this one with @abidlabs' suggestion but I'll keep that in mind for the future.

[abidlabs]

Revisiting this issue, I think the right approach if someone wants this is to use Blocks and to create the .submit() event trigger instead of having a dedicated component. A minimum working example if anyone stumbles across this in the future:

with gr.Blocks() as demo:
  text1 = gr.Textbox()
  text2 = gr.Textbox()
  text1.submit(lambda x:x, text1, text2)
demo.launch()

Unless I've missed anything, this is pretty general and quite easy to get up and going, so will go ahead and close this issue.