Why not the Dropdown won't close after I had made my choice?

[JohnHerry]

Describe the bug

I am using Gradio v4.5.0, I am using a Dropdown component. and the params are:

   gr.Dropdown(
        choices=my_choicelist,
        multiselect=False, 
         allow_custom_value=False, 
        show_label=True,
        label="Select a color"
)

What I expect is if I select a color value, the Dropdown tab should close and leave what I had selected. But as a result, the Dropdown tab continues to pop out for me to do other selection, that is very strange.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

colors = ['red', 'black', 'green']
def color_to_value(useless_arg, color):
      values = {
         'black': 0,
         'green': 1,
         'red': 2
      }
      return values[color]

demo = gr.Interface(
    fn=color_to_value,
    inputs=[
         gr.Textbox(max_lines=10,  label="this is useless, just ignore!"),
         gr.Dropdown(
               choices=my_choicelist,
               multiselect=False, 
              allow_custom_value=False, 
              show_label=True,
             label="Select a color")
    ],
    outpus="number"
)

demo.launch(
     show_error=True,
     server_name="0.0.0.0",
     server_port=8008
)

Screenshot

No response

Logs

No response

System Info

httpx: 0.25.1
huggingface-hub: 0.19.4
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.2
numpy: 1.26.2
orjson: 3.9.10
packaging: 23.2
pandas: 2.1.3
pillow: 10.1.0
pydantic: 2.5.1
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
requests: 2.31.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.8.0
uvicorn: 0.24.0.post1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.10.0
httpx: 0.25.1
huggingface-hub: 0.19.4
packaging: 23.2
requests: 2.31.0
typing-extensions: 4.8.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[abidlabs]

Hi @JohnHerry I can't repro this issue. This is the code that I'm running:

import gradio as gr

colors = ['red', 'black', 'green']

def color_to_value(useless_arg, color):
      values = {
         'black': 0,
         'green': 1,
         'red': 2
      }
      return values[color]

demo = gr.Interface(
    fn=color_to_value,
    inputs=[
         gr.Textbox(max_lines=10,  label="this is useless, just ignore!"),
         gr.Dropdown(
               choices=colors,
               multiselect=False, 
              allow_custom_value=False, 
              show_label=True,
             label="Select a color")
    ],
    outputs="number"
)

demo.launch()

Can you upgrade to the latest version of gradio (4.8.0) and see if this issue is fixed?

[JohnHerry]

It makes no difference when I upgrade to vertion 4.8,

let me show the whole code here:

def text_to_speech(input_text, speaker_name, speed):
       ....
       return sr, audio

demo = gr.Interface(
    fn=text_to_speech,
    inputs=[
        gr.Textbox(max_lines=10, placeholder="please input the text you want to hear", label="Input Text"),
        gr.Dropdown(choices=list(speakers), value=0, multiselect=False, allow_custom_value=False, label="Speaker Name", info="please select a voice you want", show_label=True),
        gr.Slider(0, 1, value=1.0, step=0.1, label="Speech Speed", info="You can adjust speech speed here")
    ],
    outputs=gr.Audio(label="Result Waveform", show_download_button=True, autoplay=True),
    title="TTS Demo APP"
)

if __name__ == "__main__":
    demo.launch(show_error=True, server_name="0.0.0.0", server_port=8888)

All other components seems work except the Dropdown, its list page keeps showing even when I had make selection.

[abidlabs]

I added a slider, just as in your example, and it still is working fine for me.

Here's the code I've tested:

import gradio as gr

colors = ['red', 'black', 'green']

def color_to_value(useless_arg, color, ignore):
      values = {
         'black': 0,
         'green': 1,
         'red': 2
      }
      return values[color]

demo = gr.Interface(
    fn=color_to_value,
    inputs=[
         gr.Textbox(max_lines=10,  label="this is useless, just ignore!"),
         gr.Dropdown(
               choices=colors,
               multiselect=False, 
              allow_custom_value=False, 
              show_label=True,
             label="Select a color"),
         gr.Slider()
    ],
    outputs="number"
)

demo.launch()

and here's what I'm seeing:

https://github.com/gradio-app/gradio/assets/1778297/20043cf4-e23f-4d0d-bb23-cb213669227f

I'm running on Chrome, what about you?

[JohnHerry]

I am using Chrome version of 90.0.4430.85 X64

[abidlabs]

Can you share a recording of what behavior you're seeing?

[JohnHerry]

I am sorry it not clear in sight, but this shows the unexpected web action.

https://github.com/gradio-app/gradio/assets/8011802/c712f042-6f14-4802-b952-8d6dd3f1963c

[abidlabs]

What OS / environment are you running this on?

[JohnHerry]

the gradio app is runing under conda env in a docker container of CentOS7.5 [python==3.11.4, gradio==4.8.0], the web is opened in Chrome in Windows10

[abidlabs]

Hi @JohnHerry we haven't been able to repro this issue on Colab, Windows, or Mac unfortunately. If you are able to check other environments to see if this problem persists for you, that'd be helpful. For now, I'll mark this as repro needed.

[abidlabs]

Closing for lack of reproducibility. Sorry! Let us know if you are able to find any other info that could help us repro this.