# Unable to clear input after submit

**URL:** <https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543>\
**Category:** 🔒 Gradio\
**Created:** [March 11, 2023, 12:39am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543 "2023-03-11T00:39:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexjedi](https://avatars.discourse-cdn.com/v4/letter/a/74df32/32.png) [@alexjedi](https://discuss.huggingface.co/u/alexjedi)\
**Post date:** [March 11, 2023, 12:39am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/1 "2023-03-11T00:39:55Z")

</div>

I’m very new to both huggingface and Gradio, so forgive me if this is a trivial issue, and I’m just a fool.

I’m using a Blocks object to implement a very basic chatbot, and I’d like to essentially clear the input textbox after the user presses enter or presses the submit button.

```auto
with gr.Blocks() as test:
    outp = gr.Chatbot(label="Reply", )
    inp = gr.Textbox(label="Chat with AI")
    inp.submit(chatbot, [outp, inp], outp)
    inp.update(lambda: None, inp)
    btn = gr.Button("Submit")
    btn.click(fn=chatbot, inputs=inp, outputs=outp)

```

My code looks like this currently.  
I simply wish to clear the input textbox after the input is submitted.

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [March 11, 2023, 3:03am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/2 "2023-03-11T03:03:45Z")

</div>

hi @alexjedi ,

You need to send an empty value back to the input textbox, just add these two lines

```auto
    btn.click(lambda x: gr.update(value=''), [],[inp])
    inp.submit(lambda x: gr.update(value=''), [],[inp])

```

---

<div class="post-metadata">

**Author:** ![nhtkid](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@nhtkid](https://discuss.huggingface.co/u/nhtkid)\
**Post date:** [April 13, 2023, 1:35pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/3 "2023-04-13T13:35:08Z")

</div>

Hi @alexjedi  
I came across the same issue.  
In my scenario, I am using the chatbot UI from Gradio.

```auto
with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")
    chat_history = []

    print(msg)
    
    def user(user_message, history):
        print("User message:", user_message)
        print("Chat history:", history)
        # Get response from QA chain
        response = qa({"question": user_message, "chat_history": history})
        # Append user message and response to chat history
        history.append((user_message, response["answer"]))
        print("Updated chat history:", history)
        # Clear the message box
        msg = ""
        print(msg)
        # Return response to chatbot
        return response["answer"], history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False)
    clear.click(lambda: None, None, chatbot, queue=False)

```

I have the same problem that we I submit the query, the Textbox doesn’t get cleared, but also get filled up with the response from the model. (The response also shows up in the chat window, so the same text gets displayed twice!)

How can I modify the code so as soon as the model returns the response, the text box will also get cleared?

Thanks!

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 14, 2023, 1:22am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/4 "2023-04-14T01:22:48Z")

</div>

hi @nhtkid

You want to return a clear state to msg box, can you try this?

```auto
with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")
    chat_history = []

    print(msg)
    
    def user(user_message, history):
        print("User message:", user_message)
        print("Chat history:", history)
        # Get response from QA chain
        response = qa({"question": user_message, "chat_history": history})
        # Append user message and response to chat history
        history.append((user_message, response["answer"]))
        print("Updated chat history:", history)
        # Clear the message box
        msg = ""
        print(msg)
        # Return response to chatbot
        return gr.update(value=""), history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False)
    clear.click(lambda: None, None, chatbot, queue=False)

```

---

<div class="post-metadata">

**Author:** ![nhtkid](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@nhtkid](https://discuss.huggingface.co/u/nhtkid)\
**Post date:** [April 14, 2023, 5:55am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/5 "2023-04-14T05:55:15Z")

</div>

Hi @radames,  
It worked beautifully.

And the only difference in your code is  
return gr.update(value=“”), history

Thank you so much!

---

<div class="post-metadata">

**Author:** ![anon21478985](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@anon21478985](https://discuss.huggingface.co/u/anon21478985)\
**Post date:** [April 25, 2023, 11:24am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/6 "2023-04-25T11:24:32Z")

</div>

Hi please I have the same problem using the blocks in Gradio:

interface = gr.Blocks()

with interface:  
logos = gr.Image(value=logo\_path, interactive=False, show\_label=False, elem\_id=“logo”)  
logos.style(height=100)  
chatbot = gr.Chatbot(label=“Conversation”)  
chatbot.style(height=350)  
message = gr.Textbox(placeholder=“Send a message”, label=“Chat”, elem\_id=“back”)  
message.style(container=True)  
state = gr.State()  
send = gr.Button(“Send”, elem\_id=“send”)  
message.submit(conversation\_history, [message, state], [chatbot, state], queue=False)  
send.click(conversation\_history, inputs=[message, state], outputs=[chatbot, state])  
send.style(size=“lg”)

interface.launch()

I want the Textbox to automatically clear after sending or the user hits enter.  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 25, 2023, 7:04pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/7 "2023-04-25T19:04:21Z")

</div>

you can add these two lines to click after submit or click

```python
  # clear message after click or submit
  message.submit(lambda x: gr.update(value=""), None, [message], queue=False)
  send.click(lambda x: gr.update(value=""), None, [message], queue=False)

```

---

<div class="post-metadata">

**Author:** ![anon21478985](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@anon21478985](https://discuss.huggingface.co/u/anon21478985)\
**Post date:** [April 25, 2023, 7:18pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/8 "2023-04-25T19:18:06Z")

</div>

> [@radames](#):
>
> ```auto
> message.submit(lambda x: gr.update(value=""), None, [message], queue=False)
> send.click(lambda x: gr.update(value=""), None, [message], queue=False)
> 
> ```

@radames  
I just did and I got this error  
UserWarning: Expected at least 1 arguments for function \<function at 0x0000016A157749D0\>, received 0

Note: It cleared the Textbox (thank you for that) when I send it works but I get this error on my ide  
UserWarning: Unexpected argument. Filling with None.  
warnings.warn(“Unexpected argument. Filling with None.”)  
please help

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 25, 2023, 7:50pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/9 "2023-04-25T19:50:05Z")

</div>

sorry, I can’t help you without more context, check your `conversation_history` function

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 25, 2023, 9:23pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/11 "2023-04-25T21:23:43Z")

</div>

sorry I’m not sure if I can help, this code snippet below works for me, but I don’t have your `callmocbt` , running latest Gradio

```python
import gradio as gr

def conversation_history(input, history):
  history = history or [] 
  s = list(sum(history, ()))
  s.append(input)
  inp = ''.join(s)
  output = inp
  history.append((input, output))
  return history, history

with gr.Blocks() as interface:
  logos = gr.Image(interactive=False, show_label=False, elem_id="logo")
  logos.style(height=100)
  chatbot = gr.Chatbot(label="Conversation")
  chatbot.style(height=325)
  message = gr.Textbox(placeholder="Send a message", label="Chat", lines=1)
  message.style(container=True)
  state = gr.State()
  send = gr.Button("Send")
  message.submit(conversation_history, [message, state], [chatbot, state], queue=False)
  message.submit(lambda x: gr.update(value=""), None, [message], queue=False)
  send.click(conversation_history, inputs=[message, state], outputs=[chatbot, state])
  send.click(lambda x: gr.update(value=""), None, [message], queue=False)
  send.style(size="lg")

interface.launch()

```

---

<div class="post-metadata">

**Author:** ![anon21478985](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@anon21478985](https://discuss.huggingface.co/u/anon21478985)\
**Post date:** [April 25, 2023, 10:52pm UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/12 "2023-04-25T22:52:18Z")

</div>

@radames fixed it, I changed None to [state], thanks 👍

---

<div class="post-metadata">

**Author:** ![cegh2001](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@cegh2001](https://discuss.huggingface.co/u/cegh2001)\
**Post date:** [May 6, 2023, 7:29am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/13 "2023-05-06T07:29:36Z")

</div>

Hi please I have the same problem using the blocks in Gradio

def chatgpt\_clone(input, history):  
history = history or   
s = list(sum(history, ()))  
s.append(input)  
inp = ’ '.join(s)  
output = openai\_create(inp)  
history.append((input, output))  
return history, history

block = gr.Blocks()

with block:  
gr.Markdown(“”“

# Build Yo’own ChatGPT with OpenAI API & Gradio
  
“””)

```
chatbot = gr.Chatbot()
message = gr.Textbox(placeholder=prompt)
state = gr.State()
submit = gr.Button("SEND")
submit.click(chatgpt_clone, inputs=[message, state], outputs=[chatbot, state])

```

And how i close the app from gradio? I use the terminal

---

<div class="post-metadata">

**Author:** ![Viraj88](https://avatars.discourse-cdn.com/v4/letter/v/278dde/32.png) [@Viraj88](https://discuss.huggingface.co/u/Viraj88)\
**Post date:** [July 5, 2023, 8:50am UTC](https://discuss.huggingface.co/t/unable-to-clear-input-after-submit/33543/14 "2023-07-05T08:50:11Z")

</div>

Hello, I am not able to assign enter key to submit button in my gradio UI.  
could you please help me to do so ?